How do we start?
It’s simple. Follow the instructions below and if you have any questions, our team would be glad to assist on our support channels.
The widget is based on a ‘Web-component’ and can be integrated into any web-app (desktop, retail, tablet, or mobile). (Web Component is a suite of different technologies allowing you to create reusable custom elements - with their functionality encapsulated away from the rest of your code - and utilize them in your web apps)
Please take into consideration that our team will need access to your staging environment during the testing phase to validate and adjust the integration.
The integration requires you to add three lines of code to your front-end. The body, where you want to place the widget, should have:
<betbooster-widget demo=”1” home="homeTeam" away="awayTeam" date="dd/MM/yyyy HH:mm" sport="sport" apiKey=”apiKey” lang=”lang” originhome=”origin team name” originaway=”origin team away” originleague=”origin league name”></betbooster-widget>
Please note 1: The inserted hour is UTC time. Any hour within the ~6 hours window would suffice for the mappings. Matches can be requested even days before first kick-off.
Please note 2: the part of “demo=1” will be removed once both parties complete the integration
Calling to the product’s script:
Prod :
<script src="https://betbooster-widget.lvision.io/v3/prod/bundle-es5.js” defer></script>
Staging :
<script src="https://betbooster-widget.lvision.io/v3/staging/bundle-es5.js” defer></script>
And the last line, in the header: <base href="/">
BetBooster-widget attributes
Parameters | Type | Optional / Required | Description |
home | String | required | Name of home team / player |
away | String | required | Name of away team / player |
date | String | required | “dd/MM/yyyy hh:mm” format. (UTC time) |
sport | String | required | Basketball / Ice Hockey etc. |
apiKey | String | required | Provided by LSports* |
lang | String | optional | Please follow this list: http://www.lingoes.net/en/translator/langcode.htm(English set as default) |
originhome | String | required | Home team’s name as the customer wishes to display it after translation |
originaway | String | required | Away team’s name as the customer wishes to display it after translation |
originleague | String | required | League’s name as the customer wishes to display it after translation |
layout | String | optional | A selected design to apply on the widget |
* Unauthorized domains will be blocked
Please note 3: required parameters should be transferred in English as the default option
Once the web-component is initialized with the relevant attributes, we will automatically map the event and return the relevant tips.
Custom Design
Every customer can design the widget independently by overwriting our existing CSS classes with the “!important” flag. The Default design will be identified as “undefined”, however, a selection of potential designs is available by inserting the attribute layout=”1” / layout=”2” or layout=”3” into the script.
Additional design changes for customers' choosing:
1. Product name - Set your chosen title at the attribute
title="YOUR_TITLE_INSTEAD_BetBooster"
2. Pixel Scales Width and Height can be adjusted by changing your div element that wraps the widget
Bet-Slip integration
Similar to the first phase of integration, we do 95% of the work. Before starting the integration, both parties will agree on the best modules to use. A complete FAQ document will be attached when the integration kicks off.
The process goes as follows: We map all supported markets. An escaped JSON is built in order to contain data regarding the markets & odds. User selections are handled to sync UI/UX on all fronts (widget, web, Bet-Slip). Then we proceed to develop a function that will add selection into Bet-Slip
BetMarkets JSON includes the following data:
Parameters | Type | Optional / Required | Description |
marketId | string | Required | The Id of the market |
MarketName | string | Required | The name of the market |
bets | string | Required | Which selections the user chose to add to BetSlip |
line | string | Required | The median line for that market |
betslip / outcomeID | string | Required | The Id of the selection |
IsSelected | boolean string | Required | Bet selected or not (true / false) |
displayName | string | Optional | The name of the market, as the customer presents it on its own translation |
betName | string | Required | The bet name in English. used for Mappings. |
odds | string | Required | odds in your format. |
For instance:
[ { "id": 155, "name": "Match Winner", "bets": [ { "outcomeID / betslip": "8736234", "name": "1", "displayName": "Real Madrid", "odds": 1.70, "isSelected": 1 }, { "outcomeID / betslip": "8736235", "name": "X", "displayName": "Draw", "odds": 2.32, "isSelected": 0 }, { "outcomeID / betslip": "8736236", "name": "2", "displayName": "Barcelona", "odds": 1.62, "isSelected": 0 } ] }, ]
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article