In this article, we will guide you through the integration of Sportsbook by SpringBuilder X in your own environment as an iframe.
Getting started
To include the iframe in your website, please follow these steps before starting the implementation process:
Sign up on SpringBME and generate a Project for your company
Now select a template and generate a new website under the newly created project
Head over to that websites Design Mode, ex.: https://mynewsite.springbuilder.site/design
Connect your domain (ex.: sports.mysite.com) to your SpringBuilder X website using the Domain app on the Dashboard.
After following these steps, you are good to go with embedding the sports pages into any external environments, like this:
Please find the parameters of the iframe URL below:
Required parameters:
your_domain: e.g. https://sports.mysite.com
page_alias: e.g. the alias of the page you have created in Step 3 (mentioned above)
To initiate the ‘logged in’ state on the iframe, please use these parameters:
user_id: ID of the player on BetConstruct Spring Platform (Swarm User)
auth_token: auth token generated for the player (to pass to Partner API backend).
Other parameters:
oddsType: displayed odds format ("decimal", "fractional", "american", "hongkong", "malay", "indo" )
Messages from iframe to parent
openSlider
Opens the top slider, the content is specified by tab property.
Example:
{
action :“openSlider”,
tab :“login”
}
Possible values for tab parameter are:
login: to show the login form
registrationForm: to show the registration form.
loginRestored
The message appears when login is restored by Swarm.
{
info :“loginRestored”
}
loggedOut
{
info :“loggedOut”
}
loggedIn
{
info :“loggedIn”
}
betslipDataBetsLength
This action is used every time the event count changes in Betslip:
parent.postMessage({ betslipDataBetsLength: count }, '*');
Messages from parent to iframe
openSlider
Opens the top slider, content is specified by tab property.
Example:
iframeEl.contentWindow.postMessage({ action :“openSlider”, tab :“sign-in”},“*”);
Possible values for tab parameters are:
login: to show the login form
registrationForm: to show the registration form.
openProfile
Opens user profile settings, content is specified by page property
Example:
iframeEl.contentWindow.postMessage({ action :“openProfile”, page :“my-profile”},“*”);
Possible values for page parameters are:
● profile - user can update profile data here
● documents - user can upload the documents that prove her/his personal information
● selfExclusion - user can self-exclude himself/herself from the account for a determined period of time
● timeout - user can take a short break from playing when taking a time-out
● password - user can change his/her password here
● betHistory - user can see completed bets here
● deposit - user can do deposit here
● balanceHistory
● bonusSportsbook
● bonusCasino
changeOddType
Changes the odds type inside iframe.
Example:
iframeEl.contentWindow..postMessage({ action :“changeOddType”, type :“decimal”},“*”)
Possible values for type parameters are:
decimal
fractional
american
hongkong
malay
indo
logout
Example:
iframeEl.contentWindow..postMessage({ action :“logout”},“*”)
login
Example:
iframeEl.contentWindow.postMessage({ action :'login', credentials: {playerId: user_id, auth_token: auth_token}}, '*')
openBetslip
Example:
document.getElementById('iframeID').contentWindow.postMessage({ openBetslip :true}, '*')