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:

  1. Sign up on SpringBME and generate a Project for your company

  2. Now select a template and generate a new website under the newly created project

  3. Head over to that websites Design Mode, ex.: https://mynewsite.springbuilder.site/design

  4. 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:

https://sports.mysite.com/iframe-sportsbook/{lang}/{page_alias}?user_id={user_id}&auth_token={auth_token}&odds_type={odds_type}


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" )

  • 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, 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.

userUpdated 

{ 
action :“userUpdated”,
data
}

Called when updated user balance, first name, last name, avatar, etc.

loginRestored 

The 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:

  1. decimal

  2. fractional

  3. american

  4. hongkong

  5. malay

  6. indo

logout 

Example: 

iframeEl.contentWindow..postMessage({ action :“logout”},“*”)


login

Example: 

iframeEl.contentWindow..postMessage({ action :“login”, credentials: {playerId:playerId, auth_token: auth_token}},“*”)

Did this answer your question?