Operator Integration Instructions v5.0

BetLink iFrame integration

Please note that the code snippets displayed in this article are intended to be used for assessment and testing purposes only. Prior to going live, please reach out to [email protected].

Integration Library

The Front Row Seat integration library is distributed with an ES module build and a UMD build, the examples below use the UMD syntax for clarity and to show the simplest implementation. When using via an import statement the ES module build be used.

The ES module build is intended for use in modern browsers* which support Javascript syntax and features released after 2016. These features allow web browsers to deliver better performance with smaller Javascript bundle sizes, causing users to experience faster page loads and response rates from the UI. This is the recommended approach due to its performance benefits.

The UMD build is intended for use in legacy browsers that do not support the modern Javascript features referenced above. The build contains polyfills that allow these legacy browsers to make use of the Front Row Seat integration library, but this comes at a cost of a larger bundle size which will result in slower initial page load times.

* Most popular "modern web browsers" are Chrome, Safari, Microsoft Edge, and Firefox. All of these are available on both mobile and desktop.

The package is distributed using npm, where both ES module and UMD builds are available: https://www.npmjs.com/package/@img-arena/front-row-seat

The UMD build is available on unpkg: https://unpkg.com/@img-arena/front-row-seat

For more information on how to use unpkg please see their docs: https://unpkg.com/

NOTE: It is highly encouraged to add FRS.js as a dependency to your project and to bundle the lib just like any other dependency. We have experienced unannounced downtime with CDN networks such as unpkg before.

Usage

All that is needed to integrate an IMG BetLink iFrame into your website is:

1. Add a containing HTML DOM element for where the Event Centre should appear

2. Include the integration library script

3. Initialise the integration library

The code below shows an example of integrating Betlink with placeholder values.

<!-- define where Betlink should appear in the page -->
<div id="img-betlink"></div>

<!-- load the integration library -->
<script src="https://unpkg.com/@img-arena/front-row-seat/dist/index.umd.js"></script>
<!-- initialise Betlink -->
<script type="text/javascript">
  // frontRowSeat is exposed on the window scope by loading the integration library
  const { MessageTopics } = frontRowSeat.eventCentreUtils;
  const betlinkInstance = frontRowSeat.eventCentre({
        "operator": <OPERATOR_NAME>,
        "sport": "golf", //? the sport of the embedded event centre. (supports only golf as of now).
        "version": "latest", //? the version of the event centre to be used within Betlink
        "betlinkVersion": "latest",
        "options": <OPERATOR_CONFIG_OPTIONS>,
        "targetModule": "full", //? this will always be "full"
        "targetElementSelector": "#img-arena-betlink",
        "env": "prod", //? event centre environment (BTEC environment).
        "betlinkEnv": "prod", //? Betlink environment
        "language": <LANGUAGE>,
        "theme": <OPERATOR_THEM> //? theme targetting both Beltink and the embedded event centre.
    });

    // subscribe to operator launch token requests emitted from Betlink
    betlinkInstance.on(MessageTopics.BETLINK_OPERATOR_AUTH_TOKEN_REQUEST, () => {
          // send an operator-generated launch token to Betlink
          betlinkInstance.emit(MessageTopics.BETLINK_OPERATOR_AUTH_TOKEN_RESPONSE, {
            operatorAuthToken: <OPERATOR_GENERATED_LAUCNH_TOKEN>;
            userId: <UNIQUE_ID_OF_THE_USER_REGISTERED_ON_THE_OPERATOR_PLATFORM>;
            operatorId: <OPERATOR_NAME>;
        });
    });
</script>

Target Element

There may be occasions where it is preferable to pass in an element node instead of a string for the target destination of Betlink

The targetElementSelector property can be either a string for the selection of a DOM element, or an element node itself.

const targetElement = document.querySelector('#img-arena-betlink');
const betlinkInstance = frontRowSeat.eventCentre({
    "operator": "img",
    "sport": "golf",
    "betlinkVersion": "latest",
    "version": "latest",
    "options": {
        "videoPlaybackEnabled": true,
        "disablePeopleImages": false,
        "units": "imperial",
        "betlinkOptions": {
            "fractionalOdds": true,
            "allowDecimalStakes": true,
            "allowDecimalPayouts": true,
            "eachWay": false,
            "currencySymbol": "£",
            "quickStakes": {
                "1M": 1000000,
                "2M": 1000000,
                "3M": 1000000,
                "4M": 1000000
            },
            "stakeLimits": {
                "maxStake": 1000,
                "minStake": 10,
                "maxPayOut": 10000000,
                "minPayOut": 20
            }
        }
    },
    "targetElementSelector": "#img-arena-betlink",
    "targetModule": "full",
    "env": "prod",
    "language": "en_GB",
    "theme": "default",
});

Initialisation

To handle the synchronising of Betlink with your site there are two methods exposed on the return value from the eventCentre initialiser: on and emit. Both these methods follow the pub/sub pattern for asynchronous message exchange. The on method is for receiving messages from the Event Centre, whereas the emit method is for sending messages to the Event Centre.

Modularisation for Golf Stokeplay:

Betlink does not support any other module other than full.

Theming

The theme of the betlink and the embedded event centre can be configured by passing in a value for the theme parameter, this is how operators can add their brand colours and typography; the IMG Arena integrations team manage this process.

Betlink supports light and dark theme by default.

We will reach out to you at the start of BetLink integration with style sheets so that you can provide us your desired theming, in return you will receive an operator value to use in the theme field when launching the iframe.

Backend Environment

The backend environment used by betlink and the embedded event centre can be changed by setting the values of betlink_env andenvrespectively while initialising betlink via frs.js. Defining these fields are optional, if they are omitted the default value for betlink_env and env would be "prod". See the table below for additional options.

prod	production
sims	sims pre-production env with simulated tournament data

Options

Some additional options can be specified in the options field.

Option name	Description	example
videoPlaybackEnable	Enables viewing broadcasts when they are available	true
disablePeopleImages	to view or not view player avatars when available	false
units	Used for operators wishing to use metric units, rather than imperial	"metric"
betlinkOptions	Used to target betlink specific configuraiton options	"see below"
fractionalOdds	Set to "true" to see fractional odds, is decimal odds by default	true
allowDecimalStakes	Set to "true" to allow decimal places, is integer only stakes by default	true
allowDecimalPayouts	Set to "true" to allow decimal payouts, is integer only payout by default	true
eachWay	set to "true" to view EW markets, is win only markets by default	true
currencySymbol	set currency symbol (any string)	£
quickStakes	Set 4 x quick stakes display string and stake value, no quick stakes by default	see example above
stakeLimit	User cannot place a bet from the BetLink UI if outside of these limitsUser cannot place a bet from the BetLink UI if outside of these limits	see example above
multiplesBetting	Whether multiples betting is enabled. Defaults to false	true

As for theming, our integration team can assist with the above settings.

Important Notes:

• All BetlInk calculation are carried out as per decimal odds values regardless of the odds setting in the iframe

• EW betting is currently not supported, this setting will only display each way terms for ew markets

• Currency Symbol is for display purposes only, the underlying currency of the BetLink connection will be as per the commercial agreement.

Languages

Please see the Language Translations Available page to the left.

Message Topics

All the tables below detail the data fields present in the message data objects that are sent and received for each message topic.

Handshake Failed MessageTopics.HANDSHAKE_FAILED

Dedicated topic to signify the handshake between Event Centre and your site failed to complete. This topic is emitted by the integration library, it should only be subscribed to, not emitted.

Field	Type	Description	Required
timestamp	number	unix timestamp from time of failure	✅Context Update MessageTopics.CONTEXT_UPDATE

Operator temporary launch token request

Dedicated topic used to request an operator launch token to initiate operator authentication.

Operator temporary launch token response

Dedicated topic used to respond to operator launch token request

Field	Type	Description	Required
operatorAuthToken	string	a token generated by the operator used in the operator auth flow process	✅
userId	string	id which uniquely identifies an user registered with the operator who will be placing bets on betlink	✅
operatorId	string	id which uniquely identifies an operator generated by the integration teams	✅

Adding ability to close BetLink

If you want to be able to close BetLink from inside BetLink you can do so by implementing the following steps:

1. Set closeButton to true in BetLink options. This will show the close button on the top bar of the app.

2. Listen to the close button being clicked/tapped. When this happens, the parent page can listen to the closeBetLink message on the window, using a code snippet like this:

   window.addEventListener('message', (event) => {
       if (event && event.data === 'closeBetLink') {
           //replace this with your desired functionality
       }
   })