In this article we will guide you through the integration of Sportsbook by SpringBuilder 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 in springbme.com and generate a Project for your company.
Now select a template and generate a new website under that Project.
Head over to that websites Edit Mode, ex.: https://mynewsite.betconstruct.me/edit
Go to Dashboard > Pages app. In the Pages app you will find 2 Sport Type page - LIVE and PREMATCH. If there are no such pages, just create your sports type pages: LIVE and PREMATCH.
Connect your domain (ex.: sports.mysite.com) to your SpringBuilder website using the Domain app on our 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 ‘logged in’ state on the iframe, please use these parameters:
userID: ID of the player on BetConstruct Spring Platform (Swarm User)
authToken: auth token generated for the player (to pass to Partner API backend).
Other parameters:
oddsType: displayed odds format ("decimal", "fractional", "american", "hongkong", "malay", "indo" )
sport: sport ID
region: region ID
competition: competition ID
game: game ID
getBalance=true (true or false)
getBalanceCallInterval : (default 30000 - ms) (needs to be set parameters with milliseconds)
Messages from iframe to parent
userBalance
{
action:"userBalance",
params:{
balance:user balance
bonus_balance:user bonuse balance
}
openSlider
Opens the top slider, 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.
userUpdated
{
action :“userUpdated”,
data
}
Called when updated user balance, first name, last name, avatar, etc.
loginRestored
Message appears when login is restored by Swarm.
{
info :“loginRestored”
}
loggedOut
{
info :“loggedOut”
}
loggedIn
{
info :“loggedIn”
}
windowSize
{
action: windowSize,
params: {
height: height of the iframe body;
width: width of the iframe body;
}
}
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:
● my-profile - user can update profile data here
● my-profile.documents - user can upload the documents that prove her/his personal information
● my-profile.self-exclusion - user can self-exclude himself/herself from the account for a determined period of time
● my-profile.time-out - user can take a short break from playing when taking a time-out
● my-profile.change-password - user can change his/her password here
● my-profile.deposit-limits - for changing deposit limits
● my-profile.bet-limit - for changing bet limits
● my-bets - user can see completed bets here
● my-wallet.deposit - user can do deposit here
● my-wallet.balance-history
● bonuses.sportsbook
● bonuses.casino
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:playerId, authToken: authToken}},“*”)