Widget Integration
Getting Started
Before you get started, please take note of the following important steps:
API Token: To get your API token, navigate to the Backoffice app. From there, go to "User Management" and then "API Tokens". You'll be able to generate your token there.
Market Mapping: You'll need to map your markets using the "Market Mapping" screen.
Installing the Application
Include the following script tags at the end of the head element in your HTML:
Add the following script tags at the end of the head element:
2. Add lsports-sec html tag at the end of the body element:
HTML
Initialization your widget
You'll need to set the required attributes in your JavaScript code to use the widget. Here's how to do
it:
Updating your widget
Pay Attention
To keep the widget updated and identical to the host application, the fixtures attribute must always be updated.
It's essential to keep the widget updated to match the host application. The "fixtures" attribute must
be always updated. To do this, create a new reference of the array and pass it to the "fixtures"
property: widget.fixtures = [...updatedFixtures];
Remember to remove any finished fixtures, suspended or removed markets/bets, and update bet
odds changes in the fixtures. If a user selects a bet in the widget or on the host website and the bet
is successfully added to the bet slip, the "selected" property should be updated. This ensures the
information in the widget remains identical to what is shown on the host application.
Widget usage
Below is a basic usage example for the widget:
Custom Trigger
The widget comes with a default trigger element that can be replaced with your own HTML element
Passing a custom element automatically hides the default one
See Example:
Widget Configuration
Properties
The properties listed below can be used to modify the behavior and appearance of the widget:
Property | Attribute | Description | Type | Default |
apiToken (required) | api-token | Provided API JWT Token | string | undefined |
disabled | disabled | Whether the widget is disabled | boolean | false |
fixtures (required) |
| List of fixtures property, min 1, max 10 | Fixture[] | undefined |
isOpen | is-open | Whether the widget is open or not. Note: this property will not be updated automatically, in order to update it register an event listener to secClose and secOpen events | boolean | false |
language | language | Language of the widget and content (ISO 639-1 format) | en |ru |tr |uk |sw |ka |el |de |fr |ro |es| es-CO| pt |pt-BR|he |ar |hi |mr| fi |hy |pl |lv| et |lt |zh-CN
| English (en) |
side | side | Opening side of sec-container | "end" | "start" | 'end' |
trigger | trigger | An ID corresponding to the trigger element that causes the widget to open when clicked. | string | undefined | undefined |
Events
Event | Description | Type |
secBetClick | Emitted when a bet is selected in the widget | CustomEvent<BetClickEvent>
|
secClose | Emitted after the widget was closed | CustomEvent<void>
|
secOpen | Emitted after the widget was opened | CustomEvent<void>
|
secReady | Emitted after the widget was loaded | CustomEvent<void>
|
Methods
refresh() => Promise<void>
Reload the widget's configuration
Returns
Type: Promise<void>
toggle() => Promise<void>
Toggles the open state of the widget
Returns
Type: Promise<void>
CSS Custom Properties
Properties that allow to configure the Widget Fonts, Colors...
Name | Description |
--sec-card-bet-border-radius | Border radius of the widget's card bet line. Default 4px |
--sec-card-bet-font-size | Font size of the widget's card bet line. Default 14px |
--sec-card-border-radius | Border radius of the widget's card. Default 10px
|
--sec-color-danger | Danger color of the widget. Default #dc324f |
--sec-color-primary | Primary color of the widget. Default #195dad |
--sec-color-secondary | Secondary color of the widget. Default #feffe1 |
--sec-color-success | Success color of the widget. Default #01aa4e |
--sec-color-text | Main text color of the widget. Default #181c32 |
--sec-color-warning | Warning color of the widget. Default #fbad1f |
--sec-container-width | Width of the widget's container. Default 400px |
--sec-font-family | Font family of the widget. Default Open Sans |
--sec-trigger-bottom-spacing | Spacing of the widget's trigger from bottom of the screen. Supported only in bubble mode. Default 20px |
--sec-trigger-height | Height of the widget's trigger. Supported only in side-panel mode. Default 120px |
--sec-trigger-icon-size | Font size of the widget's trigger icon. Default 24px |
--sec-trigger-side-spacing | Spacing of the widget's trigger from side of the screen. Supported only in bubble mode. Default 20px |
--sec-trigger-width | Width of the widget's trigger. in bubble mode it also sets the height. Default 48px |
Interfaces
Structures that should be passed to the widget's properties.
Refer to the original guide for detailed descriptions and examples of Fixture, Market, Bet, Entity, and Bet Click Event interfaces.
Remember to replace the placeholders with your actual information when implementing the steps in
your environment. Enjoy exploring the functionalities of your new widget!