All Collections
SpringBuilder X
Embedding SpringBuilder X Sportsbook via Iframe
Embedding SpringBuilder X Sportsbook via Iframe

Integrate Sportsbook by SpringBuilder with your own environment as an iframe

Karen Sahakyan avatar
Written by Karen Sahakyan
Updated over a week ago

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:

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:

  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: user_id, auth_token: auth_token}}, '*')

openBetslip

Example:

document.getElementById('iframeID').contentWindow.postMessage({ openBetslip :true}, '*')

Did this answer your question?