IFrame Integration

From BetgamesTV
Jump to navigation Jump to search

Standard integration with betgames.js script loader

Insert this block of JavaScript code to your page and replace script parameters.

  1. Load betgames.js from <CLIENT_URL>/public/betgames.js;
  2. Add timestamp at the end of the script src <CLIENT_URL>/public/betgames.js? + Date.now();
  3. "containerId", "clientUrl", "partnerCode", "token", are required parameters to load iFrame;
  4. Element with id of "containerId" value should exist in the DOM before loading script;

  

<div id="<IFRAME_HTML_CONTAINER_ID>"></div>
<script type="text/javascript">
    var clientUrl = '<IFRAME_CLIENT_SERVER>';
    var script = document.createElement('script');
 
    script.onload = function () {
        window.BetGames.setup({
            containerId: '<IFRAME_HTML_CONTAINER_ID>',
            clientUrl: clientUrl,
            partnerCode: '<YOUR_PARTNER_CODE>',
            token: '<PARTNER_TOKEN>',
    });
 }
    script.type = 'text/javascript';
    script.src = clientUrl + '/public/betgames.js' + '?' + Date.now();
 
    document.head.appendChild(script);
</script>

Explanation of parameters

Parameter Is required Description Default
containerId Yes "id" of HTML element were iFrame should be loaded
clientUrl Yes provided by the Betgames Integration team. For testing use https://integrations01-webiframe.betgames.tv, for production - https://webiframe.betgames.tv.

Important: make sure you use HTTP Secure protocol - https://

partnerCode Yes provided by the Betgames Integration team.
token Yes you should replace it with your newly generated tokens for authorized players. For not logged in players token is "-".
locale No check the List of supported languages for the proper language code. 'en'
timezone No timezone UTC (i.e. "-2", "0", "2", "2.5", "3", "5.45"). user machine timezone
oddsFormat No optional parameter for displaying odds in different formats (possible options: "american", "decimal", "fractional", "hongkong","decimal"). 'decimal'
homeUrl No optional parameter for displaying "Home" button in the mobile iFrame view, which is forwarding player to the provided URL address (make sure URL begins with "http://" or "https://"). none
gameId No optional parameter for redirecting to desired game. Check the List of Game ID's. "-1" will launch Betgames lobby. First game in the list of enabled games
defaultPage No (string) Default page to run. Possible values: 'results', 'video', 'lobby', 'profile'.

video in combination with runId will open particular archive video.

will look to gameId param
onlyGUI No optional parameter for launching the iFrame in GUI (graphical user interface) mode only. Possible values: 1 or 0. none
defaultGUI No optional parameter for launching the iFrame in GUI (graphical user interface) mode by default. Possible values: 1 or 0. none
dateTimeFormat No optional parameter for the date time format. Possible values:
  • us - "M/d/yyyy h:mm a", e.g.: 1/15/2023 2:00 PM,
  • uk - "dd/MM/yyyy HH:mm", e.g.: 15/01/2023 14:00,
  • lt - "yyyy-MM-dd HH:mm", e.g.: 2023-01-15 14:00,
  • pl - "dd.MM.yyyy HH:mm", e.g.: 15.01.2023 14:00,
  • ko - "yyyy.MM.dd HH:mm", e.g.: 2023.01.15 14:00,
  • ch - "yyyy-MM-dd HH:mm", e.g.: 2023-01-15 14:00.
    		•  lt

    Also you can put our script in the head of document and have such 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>',
        partnerCode: '<YOUR_PARTNER_CODE>',
        token: '<PARTNER_TOKEN>',
    });
</script>
</body>

    Direct integration without betgames.js

    NOTE: allow="fullscreen" must be added to support fullscreen feature 

    <!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>iFrame Partner</title>
</head>
<body style="background-color: orange">
<h1>iFrame test page</h1>
<div id="iframe-content" style="margin: 0 auto; padding-bottom: 100px">
     <iframe
        frameborder="0"
        allow="fullscreen" 
        scrolling="no"
        src="<IFRAME_CLIENT_SERVER>/auth?partnerCode=<YOUR_PARTNER_CODE>&token=<PARTNER_TOKEN>"
        style="min-width: 100%; height: 1410px;">
     </iframe>
</div>
</body>
</html>

    Post message events from iFrame:

    Type Contract example Description
    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
    • iframeTop {"type":"iframeTop","payload":{"topPlus":1},"windowName":"betgames_iframe","data":{"topPlus":1}} Sending when iframe need to scroll partners page to the top, while navigating between pages. Optional "topPlus" param adds additional scroll from top.
    scroll_to {"type":"scroll_to","payload":{"scrollTo":1239},"windowName":"betgames_iframe","data":{"scrollTo":1239}} Sending when iframe need to update partners page scroll position, for example after closing betslip scroll were player been before opening.
    new_resize {"type":"new_resize","payload":{"height":"500"},"windowName":"betgames_iframe","data":{"height":"500"}} Sending each time when iFrame detects update of the content height. As iFrame doesn't have any scroll - its height should be updated from the partner side. Sending 6 times with 200ms throttling to have smoother height updates.
    getPageYOffset Request:

    {"type":"getPageYOffset","windowName":"betgames_iframe"} Response from partner's page:

    {"type":"getPageYOffset","payload":{"pageYOffset":1182}}

    		Request of pageYOffset of partner page to get current scroll position. Value will be used for scroll_to event, to update scroll position after closing betslip.
    gameNavigation {"type":"gameNavigation","payload":{"gameId":1}} Sending the current Game ID. The message is sent when the user selects a game on the lobby page and also when the user selects another game.
    fullscreen {"type":"fullscreen","payload":{"active":true/false}} Sending when the fullscreen is toggled
    lobbyOpened {"type":"lobby","payload":"lobby"} Sending when the lobby modal or lobby page is opened.

    Code to check iframe post messages:

    Code below could be inserted into the browser console to see incoming post messages 

    window.addEventListener("message", message => {
    try {
        const parsedData = JSON.parse(message.data);
        console.log(parsedData);
    } catch (e) {}
});

    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');
    iframe.setAttribute('src', '<IFRAME_CLIENT_SERVER>/auth?partnerCode=<PARTNER_CODE>&token=<TOKEN>');
    iframe.style.display = 'block';
    iframe.style.width = '100%';

    document.getElementById('iframe-content').appendChild(iframe);

	const staticHeight = () => {
        iframe.style.height = `${window.innerHeight}px`;
    };

    window.addEventListener('message', (message) => {
        try {
            const parsedData = JSON.parse(message.data);

            switch (parsedData.type) {
                case 'getPageYOffset': {
                    iframe.contentWindow.postMessage(
                        JSON.stringify({
                            type: 'getPageYOffset',
                            payload: {
                                pageYOffset: window.scrollY,
                            },
                        }),
                        '*',
                    );
                    break;
                }

                case 'themeEditorReady': {
                    iframe.contentWindow.postMessage(
                        JSON.stringify({
                            type: 'setThemeStyles',
                            payload: {
                                themeData: {}, // { '--VARIABLE': 'VALUE', ... }
                            },
                        }),
                        '*',
                    );
                    break;
                }

                case 'new_resize': {
                    if (!parsedData.payload.isStaticHeight) {
                        iframe.style.height = `${parsedData.payload.height}px`;
                    }
                    break;
                }

                case 'scroll_to': {
                    window.scroll(0, Number(parsedData.payload.scrollTo));
                    break;
                }

                case 'iframeTop': {
                    window.scroll(
                        0,
                        Number(parsedData.payload.topPlus) + iframe.offsetTop,
                    );
                    break;
                }

                case 'subscribeStaticHeight': {
                    window.addEventListener('resize', staticHeight);
                    staticHeight();
                    break;
                }

                case 'unsubscribeStaticHeight': {
                    window.removeEventListener('resize', staticHeight);
                    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');
        iframe.setAttribute('src', '<IFRAME_CLIENT_SERVER>/auth?partnerCode=<PARTNER_CODE>&token=<TOKEN>');
        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');
        iframe.setAttribute('src', '<SRC_TO_INNER_IFRAME>');
        iframe.style.display = 'block';
        iframe.style.width = '100%';

        document.getElementById('iframe-content').appendChild(iframe);

        window.addEventListener('message', (message) => {
            try {
                const parsedData = JSON.parse(message.data);
    
                switch (parsedData.type) {
                    case 'getPageYOffset': {
                        iframe.contentWindow.frames['betgames_iframe'].postMessage(
                            JSON.stringify({
                                type: 'getPageYOffset',
                                payload: {
                                    pageYOffset: window.scrollY,
                                },
                            }),
                            '*',
                        );
                        break;
                    }
    
                    case 'themeEditorReady': {
                        iframe.contentWindow.frames['betgames_iframe'].postMessage(
                            JSON.stringify({
                                type: 'setThemeStyles',
                                payload: {
                                    themeData: {}, // { '--VARIABLE': 'VALUE', ... }
                                },
                            }),
                            '*',
                        );
                        break;
                    }
    
                    case 'new_resize': {
                        if (!parsedData.payload.isStaticHeight) {
                            iframe.style.height = `${parsedData.payload.height}px`;
                        }
                        break;
                    }
    
                    case 'scroll_to': {
                        window.scroll(0, Number(parsedData.payload.scrollTo));
                        break;
                    }
    
                    case 'iframeTop': {
                        window.scroll(0, Number(parsedData.payload.topPlus) + iframe.offsetTop);
                        break;
                    }
    
                    case 'subscribeStaticHeight': {
                        window.addEventListener('resize', staticHeight);
                        staticHeight();
                        break;
                    }
    
                    case 'unsubscribeStaticHeight': {
                        window.removeEventListener('resize', staticHeight);
                        break;
                    }
                }
            } catch (e) {}
        });
    </script>
</body>
</html>
    Retrieved from ‘https://wiki.betgames.tv/index.php?title=IFrame_Integration&oldid=2254’