Data Free Integration

From BetgamesTV
Jump to navigation Jump to search

Integration with “betgames.js” script

Insert this JavaScript code block into your page and replace the script parameters. 

<div id="<IFRAME_HTML_CONTAINER_ID>"></div>
<script type="text/javascript">
    const clientUrl = '<IFRAME_CLIENT_SERVER>';
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `${clientUrl}/public/betgames.js?${Date.now()}`;
    script.onload = () => {
        window.BetGames.setup({
            containerId: '<IFRAME_HTML_CONTAINER_ID>',
            clientUrl: clientUrl,
            apiUrl: '<API_URL>',
            partnerCode: '<PARTNER_CODE>',
            token: '<TOKEN>',
            locale: '<LOCALE>',
            timezone: '<TIMEZONE>',
            oddsFormat: '<ODDS_FORMAT>',
            homeUrl: '<HOME_BUTTON_URL>',
            gameId: '<GAME_ID>',
        });
    };
    document.head.appendChild(script);
</script>

You can also place our script in the document head to enable this integration. 

<head>
    ...
    <script type="text/javascript" src="<IFRAME_CLIENT_SERVER>/public/betgames.js"></script>
</head>
<body>
    ...
    <div id="<IFRAME_HTML_CONTAINER_ID>"></div>
    <script type="text/javascript">
        window.BetGames.setup({
            containerId: '<IFRAME_HTML_CONTAINER_ID>',
            clientUrl: '<IFRAME_CLIENT_SERVER>',
            apiUrl: '<API_URL>',
            partnerCode: '<PARTNER_CODE>',
            token: '<TOKEN>',
            locale: '<LOCALE>',
            timezone: '<TIMEZONE>',
            oddsFormat: '<ODDS_FORMAT>',
            homeUrl: '<HOME_BUTTON_URL>',
            gameId: '<GAME_ID>',
        });
    </script>
</body>

Notes:

  • Ensure the <IFRAME_HTML_CONTAINER_ID> element exists in the DOM and is placed where you want the iFrame to appear. Otherwise, an error will occur.
  • Call window.BetGames.destroy() when navigating to another page to prevent memory leaks.

Direct integration without “betgames.js”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Partner page</title>
    </head>
    <body>
        <h1>iFrame test page</h1>
        <div id="iframe-content" style="margin: 0 auto;">
            <iframe
                frameborder="0"
                allow="autoplay; fullscreen; encrypted-media; clipboard-write; clipboard-read"
                scrolling="no"
                src="<IFRAME_CLIENT_SERVER>/auth?apiUrl=<API_URL>&partnerCode=<PARTNER_CODE>&token=<TOKEN>&locale=<LOCALE>&timezone=<TIMEZONE>&gameId=<GAME_ID>&homeUrl=<HOME_BUTTON_URL>"
                style="min-width: 100%; height: 1400px;">
            </iframe>
        </div>
    </body>
</html>

Classic games query parameters

Parameter Description Required Default
containerId string. ID of HTML element where iFrame should be loaded. +
clientUrl string. For testing use https://integrations01-datafree-webiframe.betgames.tv, for production - https://datafree-webiframe.betgames.tv . +
apiUrl string. For testing use https://integrations01-iframe.betgames.tv, for production - https://game6.betgames.tv -
partnerCode string. Provided by the BetGames Integration team. +
token string. Replace it with your newly generated tokens for authorised players. For not logged in players token is -. +
timezone string. Partner GMT timezone in which player will see all dates information. - user machine timezone
locale string. Ask BetGames Integration team for the supported language codes list, for example en, ru, lt. - en
oddsFormat string. Formatting of betting options values. Supported values: decimal, american, fractional, hongkong. - decimal
homeUrl string. Home button URL to navigate after clicking on mobile devices. - none
gameId string. Game ID of the default game to run. - Skyward Storm
dateTimeFormat string. Date time format. - lt

List of supported games

Name Game ID
Skyward Storm 187

Post message events from/to iFrame

Type Contract example Description
new_resize 
{
  "type": "new_resize",
  "payload": {
    "height": "500"
  },
  "windowName": "betgames_iframe"
}
Sending each time when iFrame detects update of the content height. As iFrame does not have any scroll, its height should be updated from the partner side. Sending 5 times with 300ms throttling to have smoother height updates.
scroll_to 
{
  "type": "scroll_to",
  "payload": {
    "scrollTo": 1239
  },
  "windowName": "betgames_iframe"
}
Sending when iFrame needs to update partner page scroll position, for example after closing betslip scroll where player was before opening.
windowData Request: 
{
  "type": "windowData",
  "windowName": "betgames_iframe"
}

Response: 

{
  "type": "windowData",
  "payload": {
    "width": 350,
    "height": 700,
    "scrollX": 0,
    "scrollY": 0,
    "clientRect": {
      "x": 0,
      "y": 50,
      "width": 350,
      "height": 1750,
      "top": 50,
      "right": 350,
      "bottom": 1800,
      "left": 0
    },
    "clientTop": 0,
    "clientLeft": 0
  }
}
Sending a request when iFrame needs to know about:
  • partner window width and height,
  • iFrame element size and position from partner side,
  • scroll position.

Values are used to properly display elements in current viewport, e.g. static height games, modals.

subscribeWindowResize 
{
  "type": "subscribeWindowResize",
  "windowName": "betgames_iframe"
}
Sending request to subscribe window “resize” event on partner side and send new window data (windowData event) to iFrame.
unsubscribeWindowResize 
{
  "type": "unsubscribeWindowResize",
  "windowName": "betgames_iframe"
}
Sending request to unsubscribe window “resize” event on partner side.
reality_check 
{
  "type": "reality_check",
  "windowName": "betgames_iframe"
}
Sending each time user clicks place bet button.
balance_check 
{
  "type": "balance_check",
  "windowName": "betgames_iframe"
}
Sending after:
  • Each successful payin,
  • After winning.

Code to log post message events

Run this in the browser's developer tool console to view incoming post messages. 

window.addEventListener("message", (event) => {
    try {
        const data =
            typeof event.data === "string"
                ? JSON.parse(event.data)
                : event.data;
        console.info(data);
    } catch (e) {}
});

Examples

Example for partners without “betgames.js” integration

<div id="iframe-content"></div>
<script>
    const iframe = document.createElement('iframe');
    iframe.setAttribute('name', 'betgames_iframe');
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('scrolling', 'no');
    iframe.setAttribute('allow', 'autoplay; fullscreen; encrypted-media; clipboard-write; clipboard-read');
    iframe.setAttribute('src', `${clientUrl}/auth?${searchParams.toString()}`);
    iframe.style.display = 'block';
    iframe.style.width = '100%';
    document.getElementById('iframe-content').appendChild(iframe);

    const sendWindowData = () => {
        iframe.contentWindow.postMessage(
            JSON.stringify({
                type: 'windowData',
                payload: {
                    width: window.innerWidth,
                    height: window.innerHeight,
                    scrollX: window.scrollX,
                    scrollY: window.scrollY,
                    clientRect: iframe.getBoundingClientRect(),
                    clientTop: iframe.clientTop,
                    clientLeft: iframe.clientLeft,
                },
            }),
            '*',
        );
    };

    window.addEventListener('message', (message) => {
        try {
            const parsedData = JSON.parse(message.data);
            switch (parsedData.type) {
                case 'new_resize': {
                    iframe.style.height = `${parsedData.payload.height}px`;
                    break;
                }
                case 'scroll_to': {
                    window.scroll(0, Number(parsedData.payload.scrollTo));
                    break;
                }
                case 'windowData': {
                    sendWindowData();
                    break;
                }
                case 'subscribeWindowResize': {
                    window.addEventListener('resize', sendWindowData);
                    sendWindowData();
                    break;
                }
                case 'unsubscribeWindowResize': {
                    window.removeEventListener('resize', sendWindowData);
                    break;
                }
            }
        } catch (e) {}
    });
</script>

Example for partners with iframe inside iframe without “betgames.js” integration

<!-- inner-iframe.html -->
<html lang="en">
    <head>
        <!-- ... -->
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="iframe-content"></div>
        <script>
            const iframe = document.createElement('iframe');
            iframe.setAttribute('name', 'betgames_iframe');
            iframe.setAttribute('frameborder', '0');
            iframe.setAttribute('scrolling', 'no');
            iframe.setAttribute('allow', 'autoplay; fullscreen; encrypted-media; clipboard-write; clipboard-read');
            iframe.setAttribute('src', '<IFRAME_CLIENT_SERVER>/auth?apiUrl=<API_URL>&partnerCode=<PARTNER_CODE>&token=<TOKEN>&locale=<LOCALE>&timezone=<TIMEZONE>&gameId=<GAME_ID>&homeUrl=<HOME_BUTTON_URL>');
            iframe.style.display = 'block';
            iframe.style.height = '100%';
            iframe.style.width = '100%';
            document.getElementById('iframe-content').appendChild(iframe);
        </script>
    </body>
</html>

<!-- partner-page.html -->
<html lang="en">
    <head>
        <!-- ... -->
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="iframe-content"></div>
        <script>
            const iframe = document.createElement('iframe');
            iframe.setAttribute('name', 'betgames_iframe_inner');
            iframe.setAttribute('frameborder', '0');
            iframe.setAttribute('scrolling', 'no');
            iframe.setAttribute('allow', 'autoplay; fullscreen; encrypted-media; clipboard-write; clipboard-read');
            iframe.setAttribute('src', '<SRC_TO_INNER_IFRAME>');
            iframe.style.display = 'block';
            iframe.style.width = '100%';
            document.getElementById('iframe-content').appendChild(iframe);

            const sendWindowData = () => {
                iframe.contentWindow.postMessage(
                    JSON.stringify({
                        type: 'windowData',
                        payload: {
                            width: window.innerWidth,
                            height: window.innerHeight,
                            scrollX: window.scrollX,
                            scrollY: window.scrollY,
                            clientRect: iframe.getBoundingClientRect(),
                            clientTop: iframe.clientTop,
                            clientLeft: iframe.clientLeft,
                        },
                    }),
                    '*',
                );
            };

            window.addEventListener('message', (message) => {
                try {
                    const parsedData = JSON.parse(message.data);
                    switch (parsedData.type) {
                        case 'new_resize': {
                            iframe.style.height = `${parsedData.payload.height}px`;
                            break;
                        }
                        case 'scroll_to': {
                            window.scroll(0, Number(parsedData.payload.scrollTo));
                            break;
                        }
                        case 'windowData': {
                            sendWindowData();
                            break;
                        }
                        case 'subscribeWindowResize': {
                            window.addEventListener('resize', sendWindowData);
                            sendWindowData();
                            break;
                        }
                        case 'unsubscribeWindowResize': {
                            window.removeEventListener('resize', sendWindowData);
                            break;
                        }
                    }
                } catch (e) {}
            });
        </script>
    </body>
</html>
Retrieved from ‘http://wiki.betgames.tv/index.php?title=Data_Free_Integration&oldid=2522’