Balance Widget Example

📋 Overview

The Balance Widget is a React/TypeScript component that displays:

Balance amount with icon
Progress ring animation
Responsive design
Interactive popup on click
Easy to customize

⚙️ Parameters

Parameter	Type	Description
`balanceAmount`	number	The balance amount to display
`progressPercentage`	number	Progress percentage (0-100)
`landingPageUrl`	string	URL to open on visit button click
`icon`	ReactNode	Icon or emoji to display (optional)

📝 Usage

To embed the Balance Widget in your HTML page:

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My App with Balance Widget</title>
        </head>
        <body>
        <h1>Welcome to My App</h1>

        <!-- Embed the widget script -->
        <script
        data-balance-widget
        data-widget-id="6979a3be207da8f71c725bcc"
        data-player-token="player-token-123"
        src="http://localhost:5173/dist/embed.js">
        </script>
        </body>
        </html>
      

Widget Parameters:

data-balance-widget - Enable the widget (required)
data-widget-id - Widget configuration ID (required). Example: 6979a3be207da8f71c725bcc, widget-2
data-player-token - Player authentication token (required). Used for eligibility checks

Note: The widget will automatically position itself in the bottom-right corner of the page. Click on it to open the landing page in a fullscreen iframe.

Balance Widget

📋 Overview

⚙️ Parameters

📝 Usage

🎯 Live Demo