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_groove_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 Groove response',
    key: 'key from Groove response',
    themeName: 'themeName from Groove 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 Groove.

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.