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
}