HTML processing
HTML processing
The HTML code that the casino displays to the player has to include the javascript code by referring to the URL received in the response as the URL parameter. The script contains definitions of functions and classes needed to render the Sportsbook on the casino side. Here is an example:
<script src="https://url_from_response.com"></script>Once the DOM is loaded, the casino has to initialize the BTRenderer object:
var bt = new BTRenderer().initialize({
brand_id: 'brandId from response',
key: 'key from response',
themeName: 'themeName from response',
lang: lang,
target: document.getElementById('betby'),
minFrameHeight: 700,
betSlipOffsetTop: 0,
betslipZIndex: 999,
cssUrls: [
'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
'https://link.to.google.fonts.css',
'https://link.to.some.other.fonts.css',
'https://link.to.some.extra.css.for.future.css'
],
fontFamilies: [
'Montserrat, sans-serif',
'Roboto, sans-serif'
],
onRouteChange: function () {
// Handle route changes
},
onLogin: function () {
// Handle user login
},
onRegister: function () {
// Handle user registration
},
onRecharge: function () {
// Handle user recharge
},
onSessionRefresh: function () {
// Handle session refresh
}
});The values of the brandId, key, and themeName parameters are taken from the Start game response that was received from Tech Fusion.
The target parameter is an HTML element into which BetBy embeds the Sportsbook UI.
The casino customizes the look and behavior of the Sportsbook through the parameters passed to the BTRenderer.
Description of parameters:
| Parameter | Data Type | Description |
|---|---|---|
| betSlipOffsetBottom | Number | The gap between the window bottom and the betslip. For example, this may be a fixed footer. |
| betSlipOffsetTop | Number | The gap between the window top and the opened betslip. For example, this may be a fixed header. |
| betslipZIndex | Number | The index of the betslip in relation to the DOM elements used on the Partner’s website. This helps to prevent overlapping conflicts. |
| cssUrls | String array | The links to fonts used on the Partner’s website. Note: This parameter is used for fonts only! |
| fontFamilies | String array | Lists the font names that are used on the Partner’s website. |
| lang | String | Frame language. The full list of supported languages can be reviewed in the Appendices section. The abbreviation is case-sensitive. Default: en |
| onLogin | callback | The callback function provided by the Partner that is called when a player logs in with the frame. |
| onRecharge | callback | The callback function provided by the Partner that is called when a player makes a deposit with the frame. |
| onRegister | callback | The callback function provided by the Partner that is called when a player registers with the frame. |
| onRouteChange | callback | The callback function provided by the Partner that is called when a player navigates across the frame. |
| onSessionRefresh | callback | The callback function provided by the Partner that is responsible for generating a new key and passing it to the frame. This function is called when a session token has expired. |
| target | HTML element | The HTML element where the bet slip is rendered. |