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:

  1. Sign up in springbme.com and generate a Project for your company. 
  2. Now select a template and generate a new website under that Project. 
  3. Head over to that websites Edit Mode, ex.: https://mynewsite.betconstruct.me/edit
  4. 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.
  5. 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:

https://sports.mysite.com/lang/iframe-sportsbook/{page_alias}?userID
={userId}&authToken={authToken}&oddsType={oddsType}


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:

  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, authToken: authToken}},“*”)

Did this answer your question?