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:

1. Add the following script tags at the end of the head element:

<script type="module" src="https://sec-cdn.dev.lsports.cloud/lsports-sec.esm.js" async></script>
<script nomodule src="https://sec-cdn.dev.lsports.cloud/lsports-sec.js" async></script>

2. Add lsports-sec html tag at the end of the body element:

<lsports-sec></lsports-sec>

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:

const widget = document.querySelector('lsports-sec');
// api token is required in order to use the widget
widget.apiToken = '123';
// a list of up to 10 mapped fixtures
widget.fixtures = [...];

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:

// First query the element
const widget = document.querySelector('lsports-sec');
// Events
widget.addEventListener('secBetClick', ev => console.log(ev.detail));
// Methods
widget.toggle();

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:

<button id='custom'>Click me!</button>
<lsports-sec trigger='custom'></lsports-sec>

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!

interface Fixture {
  id: string
  /**
   * ISO 8601 date string
   */
  date: string
  /**
   * on standard fixtures, expected a tuple of participants,
   * on outright fixtures an unlimited number of participants can be provided.
   */
  participants: Entity[]
  markets: Market[]
  league: Entity
  sport: Entity
  /**
   * optional display name for localization purposes. if not provided and there are 2 participants, it will be `participant[0] x participant[1]`,
   * If more than 2 participant are provided the league's `name` will be used.
   */
  displayName?: string
}

Market

interface Market extends Entity {
  bets: Bet[]
}

Bet

interface Bet {
  id: string
  name: string
  odds: number
  /**
   * Whether the bet is selected or not and the user already have it in his betslip.
   */
  selected: boolean
  /**
   * Bets with lines, for example +4.5, -4.5
   */
  line?: string
  player?: Entity
  /**
   * optional display name for the league, if not provided, the name property will be used.
   * for localization purposes.
   */
  displayName?: string
}

Entity

interface Entity {
  id: string
  name: string
  /**
   * optional display name for localization purposes. If not provided, `name` property will be used.
   */
  displayName?: string
}

Bet Click Event

interface BetClickEvent {
  fixtureId: string
  marketId: string
  betId: string
  selected: boolean
}