Add the widget to your site

The installation code for Free and paid plans, where to paste it, and how to place several widgets on one page.

The configurator writes the installation code for you. Open Get code, choose the domain under Install on domain and copy the whole block. The code depends on your plan: Free installs an iframe, paid plans install a script and a widget tag.

Before you copy

Your domain must be approved in Domains, and your configuration saved. Until then Get code shows why the code is not ready, or a Save and copy button.

Free plan: iframe

Plans

Free installation code

<!-- SoccersAPI widget install | Domain: example.com | Configuration: Default / current | Runtime config resolves from the approved domain assignment. -->
<!-- The iframe resizes to its content when this page allows inline scripts. Otherwise set its height manually. -->
<iframe src="https://embed.soccersapi.com/widgets/ls-soccersapi/free.html?uid=YOUR_UID&widget-id=livescore&locale=en" style="width:100%;height:1200px;border:0;display:block;" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" data-soccersapi-widget="v2-free"></iframe>
<script>(function(){var frame=document.currentScript.previousElementSibling;var origin=new URL(frame.src,document.baseURI).origin;window.addEventListener("message",function(event){if(event.source!==frame.contentWindow||event.origin!==origin||!event.data||event.data.type!=="soccersapi:height")return;var height=Number(event.data.height);if(Number.isFinite(height)&&height>=1&&height<=100000)frame.style.height=Math.ceil(height)+"px";});})();</script>

Paste both the iframe and the following script. The iframe starts at 1200 px, then adjusts its height to its content. If your site blocks inline scripts, set the iframe's height in style manually instead.
Keep referrerpolicy as it is: it lets the widget tell which site it is on.
The widget fills the width of the column it is placed in.
Your own CSS cannot reach inside an iframe, so custom CSS class names do not apply on Free.

Paid plans: script and tag

Plans

Starter, Pro and Ultra installation code

<!-- SoccersAPI widget install | Domain: example.com | Configuration: Default / current | Runtime config resolves from the approved domain assignment. -->
<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>
<ls-soccersapi uid="YOUR_UID" widget-id="livescore" locale="en"></ls-soccersapi>

The <script> line loads the widget. Put it once per page, anywhere in the page.
The <ls-soccersapi> tag is the widget itself. Put it where the widget should appear.
The widget becomes part of your page (it is not an iframe) and fills the width of its container.
Keep the data-ls-widgets attributes: they tell the script where its stylesheet is.

Match, League, Team and Player widgets

For these widgets the code also says which item to show:

<ls-soccersapi uid="YOUR_UID" widget-id="team" locale="en" entity="team" teamid="1410"></ls-soccersapi>

Replace the sample number

The number in the code is the one in the configurator preview. Until you type your own in Match ID, League ID, Team ID or Player ID, the preview uses a sample item, and so does the code. Change the number to the match, competition, team or player you want.

Widget	Attributes
Match	`entity="match"` and `matchid`
League	`entity="league"` and `leagueid`, optionally `seasonid`
Team	`entity="team"` and `teamid`
Player	`entity="player"` and `playerid`, optionally `seasonid`
Leagues	`entity="leagues"`, no number

All the attributes are listed in the embed code reference.

Where to paste it

Your site	Where the code goes
WordPress	A Custom HTML block in the page, or your theme's template.
Shopify	A Custom Liquid section, or the theme code.
Squarespace	A Code block.
Webflow	An Embed element.
Hand-written HTML	Anywhere in the `<body>`.

Some site builders run pasted code inside a frame of their own, served from another address (Wix's Embed HTML element works this way). The widget then sees that address instead of your domain and refuses to load, with a message that names the address it saw. If that happens, contact support with the address shown.

If your site builder removes <script> tags, you cannot use the paid installation code there. Add the script through the builder's site-wide custom code setting, if it has one, and place only the <ls-soccersapi> tag in the page.

Several widgets on one page

Paid plans can show several widgets on the same page: paste the <script> line once and one <ls-soccersapi> tag per widget. Each tag shows its own widget and item. Choices a visitor makes, such as dark mode or favourites, are shared by all the widgets on the site.

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. Give the extra widgets the None (no entity links) navigation mode, and check the page before you publish it.

Changing language or theme in the code

locale sets the widget's language. The code uses the language of the domain's configuration; you can change it to en, es, de, fr, it, pt, nl, pl, tk, ru, gr, vi, ar, cn or ko. A language the visitor picks in the widget's settings is remembered and wins.
Add theme="dark" or theme="light" to force a theme on that page, or theme="system" to follow the visitor's device. The widget does not follow your site's own dark mode.

After installing

Open the page on your domain and check it on a computer and on a phone.
In the admin, Check installation traffic confirms that the widget is loading on the domain.
When you change the design, save it in the configurator. You do not need to paste the code again.