Embed code reference
Every part of the installation code, the attributes of the ls-soccersapi tag, and what developers need to know to integrate it.
This page is for developers who need to understand or adapt the code that Get code generates. For a standard installation, paste the code as it is; see Add the widget to your site.
The script line
<script src="https://static.soccersapi.com/widgets/ls-soccersapi/ls-soccersapi.umd.js?v=VERSION" data-ls-widgets="umd" data-ls-widgets-style="https://static.soccersapi.com/widgets/ls-soccersapi/style.css?v=VERSION" defer></script>| Attribute | Required | What it does |
|---|---|---|
data-ls-widgets="umd" | Yes | Marks this script as the widget bundle. The widget uses it to find its stylesheet, fonts and translations. Without it the widget appears unstyled. |
data-ls-widgets-style | Where the widget stylesheet is. none means you load style.css yourself. | |
data-ls-widgets-locales | Where the translation files are. By default, the locales folder next to the script. | |
?v= in the addresses | A version written by Get code, so browsers fetch the new files after an update. Keep it. |
- Load the script once per page. A second copy does no harm, but it is downloaded for nothing.
deferis fine. Tags already on the page become widgets when the script runs.- The script defines the
<ls-soccersapi>element. Olderwc-*tags are not part of this bundle.
The ls-soccersapi tag
<ls-soccersapi uid="YOUR_UID" widget-id="livescore" locale="en"></ls-soccersapi>| Attribute | Values | What it does |
|---|---|---|
uid | Written by Get code | Your account. Required; do not change it. |
widget-id | livescore, match, league, leagues, team, player | The widget type. Required. Your approved domain decides which configuration loads. |
locale | en (default), es, de, fr, it, pt, nl, pl, tk, ru, gr, vi, ar, cn, ko | The language. zh, el and tr are accepted too. A language the visitor picked in the widget's settings wins over this attribute. |
theme | light, dark, system | Forces the theme on this page; system follows the visitor's device. Without it: the visitor's own choice, then the configuration's default, then light. |
entity | See the next table | What the widget shows. Leave it out for the livescore. |
matchid | A match number | The match, with entity="match". |
leagueid | A competition number | The competition, with entity="league". |
seasonid | A season number | A season for entity="league" or entity="player". Empty means the current season. The Team widget ignores it. |
teamid | A team number | The team, with entity="team". |
playerid | A player number | The player, with entity="player". |
initial-tab | summary, prematch, events, lineups, statistics, commentary, standings, h2h, odds, tv | Match only: the tab to open first. A tab that is not available for that match falls back to the default tab. |
tparam | today (default), live, notstarted, ended, my_games, date:YYYY-MM-DD | Livescore only: the tab or the day to open first. |
entity values
| Value | Shows | Needs |
|---|---|---|
| (none) | The livescore | |
match | One match | matchid |
lineups, statistics, odds, tv | One match, opened on that tab | matchid |
league | One competition | leagueid, optionally seasonid |
leagues | The competitions directory | |
team | One team | teamid |
player | One player | playerid, optionally seasonid |
Attribute names are written exactly as shown, with no hyphen inside the ID
names: matchid, not match-id.
Changing attributes from JavaScript
The attributes are live: if your page changes matchid or entity, the widget
shows the new item without reloading. This is how a single-page application can
reuse one widget as the visitor moves between pages.
document.querySelector('ls-soccersapi').setAttribute('matchid', '1234567');An attribute cannot be removed or emptied after the widget has started: the last value stays. To switch a widget back to the livescore, replace the element with a new one.
Several widgets on one page
Put the script once and one tag per widget. Each tag keeps its own item and design. Visitor choices (language, theme, time zone, favourites, sound and odds switches) are stored in the browser for your whole site and shared by every widget; another widget picks up a change when the page reloads.
Windows are shared between widgets on a page
At the moment, a window opened from one widget can also appear in the other widgets on the same page. On a page with several widgets, give the extra ones the None (no entity links) navigation mode, and check the page before you publish it.
Styles and your site's CSS
The widget renders inside your page, not in an iframe or a shadow root. Its styles are scoped to its own elements, so your site's CSS normally does not reach it, but some rules can:
- rules on element names with
!important, such asbutton { … !important }; - a change to the root font size (
html { font-size: … }), because the widget sizes text inrem; overflowortransformon a parent element, which affects sticky headers, floating cards and pop-up windows;- a
<style>or<link>element withid="styles", which the widget reads as its own stylesheet and then skips loading its CSS.
To restyle parts of the widget, use the Custom CSS classes fields of affiliate links, odds and banners (see Monetization).
Content Security Policy
If your site sends a Content Security Policy, allow these hosts:
| Directive | Hosts |
|---|---|
script-src | https://static.soccersapi.com |
style-src | https://static.soccersapi.com, https://fonts.googleapis.com |
font-src | https://static.soccersapi.com, https://fonts.gstatic.com |
img-src | https://cdn.soccersapi.com, https://ws.soccersapi.com |
connect-src | https://apid.soccersapi.com, https://ls-data.soccersapi.com, https://static.soccersapi.com, and the country lookup services https://ipapi.co, https://ipinfo.io, https://pro.ip-api.com, https://1.1.1.1 |
For the Free iframe, allow frame-src https://embed.soccersapi.com instead.
Server-side and React sites
- Server-rendered pages (PHP, WordPress, Next.js and similar): output the tag in your HTML and the script once. The widget renders in the browser.
- Single-page applications: load the script once, render the tag where the widget belongs, and update its attributes when the route changes (see above).
- A private React package exists for SoccersAPI's own sites. It is not offered publicly.
Events
The widget can tell your page what the visitor opens. See Events for developers.