Playable banner launch

From BetgamesTV
Jump to navigation Jump to search

Integration with betgames-banner.js script 

<div id="<BANNER_HTML_CONTAINER_ID>" style="width: <WIDTH_OF_HTML_CONTAINER>; height: <HEIGHT_OF_HTML_CONTAINER>"></div>
<script type="text/javascript">
	const server = '<BETGAMES_BANNER_SERVER>';
	const script = document.createElement('script');
    script.type = 'text/javascript';
	script.src = `${server}/public/betgames-banner.js?${Date.now()}`;
	script.onload = () => {
		window.BetGamesWidget.setup({
			server: server,
 			partnerCode: '<PARTNER_CODE>',
			partnerToken: '<PARTNER_TOKEN>',
 			language: '<LANGUAGE>',
			timezone: '<TIMEZONE>',
			oddsFormat: '<ODDS_FORMAT>',
            gameId: '<GAME_ID>',
        	containerId: '<BANNER_HTML_CONTAINER_ID>',
			iframeUrl: '<IFRAME_URL>',
            isMobile: '<IS_MOBILE_BETTING>',
		});
	};
	document.head.appendChild(script);
</script>

Integrations script can set up multiple banners 

<div id="<BANNER_HTML_CONTAINER_ID>" style="width: <WIDTH_OF_HTML_CONTAINER>; height: <HEIGHT_OF_HTML_CONTAINER>"></div>
<script type="text/javascript">
	const server = '<BETGAMES_BANNER_SERVER>';
	const script = document.createElement('script');
    script.type = 'text/javascript';
	script.src = `${server}/public/betgames-banner.js?${Date.now()}`;
	script.onload = () => {
		window.BetGamesWidget.setup({
			server: server,
 			partnerCode: '<PARTNER_CODE>',
			partnerToken: '<PARTNER_TOKEN>',
 			language: '<LANGUAGE>',
			timezone: '<TIMEZONE>',
			oddsFormat: '<ODDS_FORMAT>',
            games: [
                {
                    gameId: '<GAME_ID_1>',
                	containerId: '<BANNER_HTML_CONTAINER_ID_1>',
                },
                {
                    gameId: '<GAME_ID_2>',
                	containerId: '<BANNER_HTML_CONTAINER_ID_2>',
                },
            ],
			iframeUrl: '<IFRAME_URL>',
            isMobile: '<IS_MOBILE_BETTING>',
		});
	};
	document.head.appendChild(script);
</script>

Notes:

  • Ensure the <BANNER_HTML_CONTAINER_ID> element exists in the DOM and is placed where you want the iFrame to appear. Otherwise, an error will occur.
  • 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;
  • Call window.BetGamesWidget.destroy() when navigating to another page to prevent memory leaks.
  • By default iFrame banner will take 100% width and height of the container in which it rendered.

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>Partner page</title>
    </head>
    <body>
        <h1>iFrame test page</h1>
        <div id="betgames-banner-content" style="width: <CONTAINER_WIDTH>; height: <CONTAINER_HRIGHT>;">
            <iframe
                frameborder="0"
                allow="autoplay; fullscreen; encrypted-media; clipboard-write; clipboard-read"
                scrolling="no"
                src="<BETGAMES_BANNER_SERVER>/?partnerCode=<PARTNER_CODE>&partnerToken=<PARTNER_TOKEN>&language=<LANGUAGE>&timezone=<TIMEZONE>&gameId=<GAME_ID>&iframeUrl=<IFRAME_URL>&isMobile=<IS_MOBILE_BETTING>"
                style="display: block; 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) +
partnerCode (string) provided by the Betgames Integration team +
partnerToken (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. Skyward Deluxe game ID: 91. War Of Bets game ID: 8.
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 0
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;
    --success: #86b514;
    --success-text: #690;
    --warning: #f68500;
    --error: #d60000;
    --text-light: #fff;
    --text-dark: #1b1b1b;
    --text-on-primary: var(--text-dark);
    --text-on-secondary: var(--text-light);
    --text-on-success: var(--text-light);
    --text-on-warning: var(--text-light);
    --text-on-error: var(--text-light);
    --won-message: #86b514;
    --font-main: Roboto, sans-serif;
    --font-condensed: Roboto Condensed, sans-serif;
    --body: #eee;
    --body-text: var(--text-light);
    --border: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --input: var(--body);
    --input-text: var(--body-text);
    --input-border: rgba(0, 0, 0, 0.15);
    --logo: url("/static/shared/images/betgames/logo.png");
    /* War of Bets */
    --war-background-image: url("/static/shared/images/banner/war/background.jpg");
    --war-background-tint: rgba(0, 0, 0, 0);
    --war-game-logo: url("/static/shared/images/banner/war/game-logo.png");
    /* Skyward Deluxe */
    --skywardgame-high-multiplier-text: #3de462;
    --skywardgame-high-multiplier: rgba(70, 255, 111, 0.15);
    --skywardgame-high-multiplier-shadow: rgba(61, 228, 98, 0.4);
    --skywardgame-medium-multiplier-text: #f05ef2;
    --skywardgame-medium-multiplier: rgba(240, 94, 242, 0.15);
    --skywardgame-medium-multiplier-shadow: rgba(240, 94, 242, 0.4);
    --skywardgame-low-multiplier-text: #4ecbfd;
    --skywardgame-low-multiplier: rgba(5, 131, 242, 0.15);
    --skywardgame-low-multiplier-shadow: rgba(78, 203, 253, 0.4);
    --skywardgame-flew-color: #ff3030;
    --skywardgame-flew-shadow: rgba(255, 48, 48, 0.3);
    --skywardgame-last-results-background: rgba(255, 255, 255, 0.05);
    --skywardgame-last-results-background-expanded: #000;
    --skywardgame-last-results-action-button: rgba(255, 255, 255, 0.1);
    --skywardgame-cancel-button: #ff4d4d;
    --skywardgame-cashout-button: linear-gradient(180deg, #f8ad1b, rgb(240, 161, 7));
    --skywardgame-betslip-actions: transparent;
}
Retrieved from ‘http://wiki.betgames.tv/index.php?title=Playable_banner_launch&oldid=2484’