Integration process
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:
Events
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...
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!