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!