Playable banner launch

From BetgamesTV
Jump to navigation Jump to search

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

<div id="<BANNER_HTML_CONTAINER_ID>" style="height: <HEIGHT_OF_HTML_CONTAINER>"></div>
 
 
<script type="text/javascript">
    var script = document.createElement('script');
    var server = '<BETGAMES_BANNER_SERVER>';
  
    script.onload = function () {
        window.BetGamesWidget.setup({
            server:     server,
            partner:    '<PARTNER_CODE>',
            token:      '<PARTNER_TOKEN>',
            language:   '<LANGUAGE>',
            timezone:   '<TIMEZONE>',
            oddsFormat: '<ODDS_FORMAT>',
            iframeUrl:  '<PARTNER_IFRAME_URL>',
            isMobile:   '<IS_MOBILE_BETTING>', 
            games: [{
                id: '<GAME_ID>',
                containerId: '<BANNER_HTML_CONTAINER_ID>',
                height: '<HEIGHT_OF_HTML_CONTAINER>',
            }],
        });
    };
  
    script.type = 'text/javascript';
    script.src = server + '/js/betgames-widget.js' + '?' + Date.now();
  
    document.head.appendChild(script);
</script>

Also, you can put our script in the head of document and have such integration

...
<head>
    ...
    <script type="text/javascript" src="<BETGAMES_BANNER_SERVER>/js/betgames-widget.js"></script>
    ...
</head>
<body>
...
<div id="<BANNER_HTML_CONTAINER_ID>" style="height: <HEIGHT_OF_HTML_CONTAINER>"></div>
...
<script type="text/javascript">
    window.BetGamesWidget.setup({
        server:     '<BETGAMES_BANNER_SERVER>',
        partner:    '<PARTNER_CODE>',
        token:      '<PARTNER_TOKEN>',
        language:   '<LANGUAGE>',
        timezone:   '<TIMEZONE>',
        oddsFormat: '<ODDS_FORMAT>',
        iframeUrl:  '<PARTNER_IFRAME_URL>',
        isMobile:   '<IS_MOBILE_BETTING>',
        games: [{
            id: '<GAME_ID>',
            containerId: '<BANNER_HTML_CONTAINER_ID>',
            height?: '<HEIGHT_OF_HTML_CONTAINER>',
        }],
    });
</script>
</body>

Notes:

  • Make sure <BANNER_HTML_CONTAINER_ID> element exist in the DOM, put it in the place you want to see banner. Otherwise Error will be thrown;
  • Specify height of this <BANNER_HTML_CONTAINER_ID> element in style tag (or inside your css). Otherwise default value will be used - 337px. You can also specify it in the games object item, it will be added by our script;
  • By default iFrame banner will take 100% width and height of the container in which it rendered. Additionally you can specify width if needed. Otherwise it will inherit from parent HTML elements;
  • To add many games banners - add more containers and add additional object to the games parameter;

Direct integration without betgames-widget.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>Banner Partner</title>
</head>
<body>
<h1>iFrame test page</h1>
<div id="BANNER_HTML_CONTAINER_ID" style="width: <SOME_WIDTH>; height: <SOME_HEIGHT>">
     <iframe
        frameborder="0"
        allow="fullscreen"
        scrolling="no"
        src="<BETGAMES_BANNER_SERVER>/?partnerCode=<PARTNER_CODE>&token=<TOKEN>&language=<LANGUAGE>&oddsFormat=<ODDS_FORMAT>&iframeUrl=<IFRAME_URL>&gameId=<GAME_ID>&isMobile=<IS_MOBILE_BETTING>"
        style="width: 100%; height: 100%;">
     </iframe>
</div>
</body>
</html>

Min dimensions:

  • Vertical model: 200px x 356px;
  • Square mode: 200px x 270px;
  • Landscape mode: 450px x 200px, or 610px x 250px;

Recommended dimensions:

  • Vertical model: 220px x 400px;
  • Square mode: 350px x 350px;
  • Landscape mode: 600px x 240px.


Description of parameters:

Parameter Description Required Default
server (string) for testing use https://integrations01-widget.betgames.tv, for production - https://widget02.betgames.tv, https://widget02.betgamestv.ru (for Russian market) +
partner (string) provided by the Betgames Integration team +
token (string) you should replace it with your newly generated tokens for authorised players. For not logged in players token is "-" +
games (object) games to load in the banners
Parameter Description Required Default
containerId (string) "id" of HTML element were game banner should be loaded +
id (string) Game id to load. ask Betgames Integration team for supported games ids for banner. +
height (string) HTML element were game banner will be loaded height in pixels. If will be provided in inline or computed way, will be ignored. 337
+
language (string) ask Betgames Integration team for the supported language codes list (i.e. "en", "ru", "lt") en
timezone (string) partner GMT timezone 1
oddsFormat (string) formatting of betting options values. Supported values: "decimal", "american", "fractional", "hongkong" decimal
iframeUrl (string) url to a page where Betgames iFrame is implemented, according to user's language (i.e. "https://website/en/betgames", "https://website/lt/betgames" or it may be single url for all languages "https://website/betgames"). none
isMobile optional parameter to distinguish platform ("1"-mobile). For more information, please check the Is_mobile parameter functionality description. '0'

All possible CSS theming options

Default options:

:root {
    --primary: #f8ad1b;
    --secondary: #007bff;
 
    --text-light: #fff;
    --text-dark: #000;
    --text-on-primary: var(--text-dark);
    --text-on-secondary: var(--text-light);
    --font-main: Roboto, sans-serif;
    --font-condensed: Roboto Condensed, sans-serif;
 
    --body-text: var(--text-light); /* usually "--text-light" or "--text-dark" */
    --won-message: #ff0;
    --background-image: url('war.jpg');
    --background-tint: rgba(0, 0, 0, 0);
}