IFrame Integration
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.
- Load betgames.js from <CLIENT_URL>/public/betgames.js;
- Add timestamp at the end of the script src <CLIENT_URL>/public/betgames.js? + Date.now();
- "containerId", "clientUrl", "partnerCode", "token", are required parameters to load iFrame;
- 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">
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>',
defaultPage: '<DEFAULT_PAGE_NAME>',
theme: '<THEME_VALUE>',
bettingAmounts: '<POSSIBLE_BETTING_AMOUNTS>',
singleGame: '<SINGLE_GAME_ID_MODE>',
});
};
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="<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>',
defaultPage: '<DEFAULT_PAGE_NAME>',
theme: '<THEME_VALUE>',
bettingAmounts: '<POSSIBLE_BETTING_AMOUNTS>',
singleGame: '<SINGLE_GAME_ID_MODE>',
});
</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
NOTE: allow="autoplay; fullscreen; encrypted-media; clipboard-write; clipboard-read" must be added to support fullscreen, autoplay, draw code copying from bet history features
<!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>&theme=<THEME_VALUE>"
style="min-width: 100%; height: 1400px;">
</iframe>
</div>
</body>
</html>
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:// |
|
| apiUrl | No, but highly recommended | provided by the Betgames Integration team. For testing use https://integrations01-iframe.betgames.tv, for production - https://game6.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 |
| theme | No | optional parameter for displaying light or dark iframe theme. | 'light' |
| 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 |
| singleGame | No | optional parameter for launching the game in single-game mode (no access to other games via the lobby). Pass the game ID (from the List of Game ID's). | none |
| defaultPage | No | 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 |
| bettingAmounts | No | (number[]) Default betting amounts for betslip. Can be configured by BetGames integrations team or alternatively provided to this script. Example [1, 2, 3, 5, 10] | none |
| lobbyDefaultTab | No | optional parameter for redirecting to desired category in the iframe lobby.
"0" - ALL |
|
| 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:
|
lt |
Post message events from 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 doesn't 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 need to update partners page scroll position, for example after closing betslip scroll were player been 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. |
| gameNavigation |
{
"type": "gameNavigation",
"payload": {
"gameId": 1
}
}
|
Sending current GameID after entering the game. |
| fullscreen |
{
"type": "fullscreen",
"payload": {
"active": true/false
}
}
|
Sending when fullscreen is toggled. |
| lobbyOpened |
{
"type": "lobby",
"payload": "lobby"
}
|
Sending when lobby modal or lobby page is open. |
| themeEditorReady |
{
"type": "themeEditorReady"
}
|
Sending to partner side that theme editor is ready so that the initial styles could be send to avoid flash of default styling. |
| setThemeStyles |
Response from partner's page: {
"type": "setThemeStyles",
"payload": {
"theme": "light",
"themeData": {
"--primary": "#ff0000",
"--secondary": "#0000ff"
}
}
}
|
Response from partner's page with theme value and/or theme data as theme variable name/value pair data to do theming updates on the fly. |
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', `${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;
}
case 'themeEditorReady': {
iframe.contentWindow.postMessage(
JSON.stringify({
type: 'setThemeStyles',
payload: {
theme: '<THEME_VALUE>',
themeData: {}, // { '--<CSS_VARIABLE_NAME>': '<CSS_VARIABLE_VALUE>'}
},
}),
'*',
);
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>&theme=<THEME_VALUE>');
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;
}
case 'themeEditorReady': {
iframe.contentWindow.postMessage(
JSON.stringify({
type: 'setThemeStyles',
payload: {
theme: '<THEME_VALUE>',
themeData: {}, // { '--CSS_VARIABLE_NAME': 'CSS_VARIABLE_VALUE', ... }
},
}),
'*',
);
break;
}
}
} catch (e) {}
});
</script>
</body>
</html>
