Start of the game
To start the game, you will need to send a request to Fungamess, which would return data, and init the script from the response, as well as activate the launcher on the page.
Example usage: https://{base_url}/start?{parameters}
What partners get from Fungamess
{
"jsUrl": "<URL with Betby library>",
"brandId": "<integer>",
"token": "<JWT token>",
"theme": "<string>",
"lang": "<string>"
}
Information about the start of the game
Application initialization Application initialization is implemented throughout BTRenderer JavaScript class. Thus, it is necessary to create this object before you will initialize the application.
Installing BTRenderer script The script provided to partners via a link from Fungamess must be executed before any other steps.
Defining container The next step requires the insertion of a containing element into the section's body. Example:
Process of container definition should never involve iframe and overflow: hidden | auto | scroll for Betby application container and other containers that may be located higher in the DOM tree (parent div, body, html, etc)
Whitelist The list of domains should be whitelisted In the Content-Security-Policy header of the HTML document or in the meta tag. The following content should be included:
wss://*.sptpub.com
List of supported methods
initialize
updateOptions
kill
Method "initialize"
After DOM is successfully loaded, Partner has to init the BTRenderer by calling initialize() method. Example:
var bt = new BTRenderer().initialize({
brand_id: "11111111111111111",
token: "<JWT token>",
onTokenExpired: function() {},
themeName: "default",
lang: "en",
target: document.getElementById('betby'),
betSlipOffsetTop: 0,
betslipZIndex: 999,
onRouteChange: function() {},
onLogin: function() {},
onRegister: function() {},
onSessionRefresh: function() {},
onBetSlipStateChange: function() {}
});
List of parameters
| Parameter | Type | Description |
|---|---|---|
| brand_id | string | Unique Partner's Website ID, obtained during the onboarding process Partner receives it from Fungamess |
| token | string | Unique timely-restricted JWT token assigned to each user For unauthorized user pass token: null Platform receives it from the Fungamess |
| onTokenExpired | function | A function that returns a response with a new JWT token, if the previous one is expired Mandatory for authorized users To obtain a token, the platform must send a request from its front to its backend, and a POST-request from the backend to Fungamess, with a refreshSportbookToken method, with the following request body: { "id": "User ID", "api_token": "User Token" } The platform frontend can't make a direct request to the Fungamess |
| themeName | string | Unique name of theme provided by the Fungamess |
| lang | string | Frame language (default: en) The full list of supported languages can be found in the Appendices section The abbreviation is case-sensitive Language code in ISO 639-1 format (e.g., en, ru, es) |
| target | HTMLElement | An element of DOM for the betslip rendering into a div element, instead of an iframe The same as in "Defining container" section above |
| betSlipOffsetTop | number | The parameter that defines the gap between the top of the window and opened betslip (for example, fixed header) |
| betSlipOffsetBottom | number | The parameter that defines the gap between the bottom of the window and betslip (for example, fixed footer) |
| betSlipOffsetRight | number | The parameter that defines the gap between bottom of the window's right side and a betslip (for example, fixed sidebar) |
| betslipZIndex | number | The parameter that defines the index of betslip, in the relation to DOM elements, used on Partners website It allows to avoid the overlap conflicts of different elements Acceptable value should be 100 or more |
| url | string | The parameter that defines the page that will be shown to users after the application is initialized For example, if url="/1" page with soccer will be shown |
| stickyTop | number | The parameter that defines the range between top of the window and sticky (fixed) elements of the application (sidebar etc.) It is recommended to use the height of Partner's fixed header Use "0" in cases when there is no fixed header |
| scrollTopButtonPosition | string | The parameter that defines the scroll button position in the mobile website version There are two possible values: "left" and "right" |
| scrollToTopButtonVisible | boolean | The parameter that defines the scroll button display in the mobile website version There are two possible values: "true" and "false" |
| onRouteChange | callback | Callback function, provided by the Partner, that will be called, when player navigates across the frame |
| onLogin | callback | Callback function, provided by the Partner, that will be called, when player logs in with the frame Partners must specify, the action that should happen, when the login button is pressed For example, open a modal window with a login form or switch to another page (don't forget about the bt.kill() method, that should be called when the user reloads the page) |
| onRegister | callback | Callback function, provided by the Partner, that will be called, when player registers with the frame Panthers must specify, what should happen when they click on the register button For example, open a modal window with a register form or switch to another page (don't forget about the bt.kill() method, that should be called when the user reloads the page) |
| onSessionRefresh | callback | Callback function, provided by the Partner, that is responsible for the page refreshing and sport's initialization, with updated parameters |
| onRecharge | callback | Callback function, provided by Partner, that will be called, when player makes a deposit with the frame Partners must indicate the location where the user will be redirected after clicking on the "Make a deposit" button |
| onBannerClick | callback | Callback function, provided by the Partner, that will be called, when player clicks on "line_banner" |
| onOutcomeClick | callback | Callback function, provided by the Partner, that will be called, when player clicks on "line_banner" or any widget, and the outcome is added to the betslip |
| onBetSlipStateChange | callback | Callback function, provided by the Partner, that will be called, when player opens or closes the betslip This function accepts a boolean parameter "isOpen" { isOpen: true \ false } |
| betSlipButton | HTMLElement | Is used when player adds outcome to the betslip on the mobile device Relevant for cases, where Partner uses their own betslip button Animation will be targeted to the DOM element, provided by Partner, with the options { betSlipButton: someHTMLElement } |
| handlePageChange | HTMLElement | Callback function, provided by Partner, that will be called, when a user navigates between pages, inside of the application This function accepts a single parameter - url This callback should be used only in cases of custom routing |
Sportsbook inherits font from the parent page. Specific fonts can be applied on the sportsbook div element as well.
Once player has switched the language, signed in/out, a call of the initialize() method would be required, along with the transition of the updated parameters to it.
It is strongly recommended to use and update betSlipOffsetTop and betSlipOffsetBottom parameters to avoid UX conflicts in cases when your header/footer has dynamic height.
Linking
Partner can directly open a page inside of the frame by specifying ?bt-path=/page_address in the URL. To find the page URL press Shift + D.
Method "updateOptions"
betSlipOffsetTop
betSlipOffsetBottom
betSlipOffsetRight
betslipButton
url
stickyTop
Change top/bottom position of Betslip:
Use betSlipOffsetTop and betSlipOffsetBottom parameters to change the position of expanded betslip in relation to window top/bottom to avoid UX conflicts, like undesired overlap of website elements. Use method updateOptions to update them without the application reinitialization. Example:
bt.updateOptions({ betSlipOffsetTop: 5, betSlipOffsetBottom: 10 })
Method "kill"
Method is used to clean up BT Library.
This method is used to clean up DOM and unsubscribe from events. It should be used every time when users leave the application or Partner reinitializes the application with a new parameters.
Example:
bt.kill();