How-to set up football widgets in your web application
Hello and welcome to this how-to guide on how to get access to Sportmonks widgets and how to use them in your web application.
In this how-to guide we will look at the required steps for making use of our widgets. The steps are as followed:
    1.
    Add widgets to your subscription
    2.
    Create API Token
    3.
    Set your domain
    4.
    Configure your widget
    5.
    Copy and paste embed code into your application

Step 1: Add widgets to your subscription

If you want to use our widgets, you will have to add widgets to your subscription. You can do this in my.sportmonks.com by either editing your current subscription or creating a new subscription. Make sure to select the 'Widgets' add-on while editing or creating a subscription.
Select the widget (Free or Paid) add-on on the edit/new subscription page
You can choose between a free widget add-on or a paid one. The difference between the two are configuration possibilities. With the paid widget you have for example more branding options.
Once you have added the widgets add-on to your subscription you can verify this by going to the My Widgets page. If you succeeded, you will see here that completed step 1 of using Sportmonks widgets!
Go to https://my.sportmonks.com/subscriptions for adding widgets to your subscription

Step 2: Create API Token

The second step is to make sure you have created an API token. Without it your widget can not make a request to our API. If you have already created an API token before, this step will be skipped automatically. But if you haven't made an API token, create it in the My Widgets page or at the API tokens page

Step 3: Set your domain

After adding the widgets add-on to your subscription you will have to set your domain in the Widgets Settings page or in the My Widgets page. The domain you enter here is the only domain from where you will be able to host our widgets. For example if you enter sportmonks-widgets.com as domain, the widget will only be authorized on that domain.
If you added the paid version of our widgets add-on to your subscription, you can set more configurations on the Widgets Settings page, for example colors and brand logo.

Step 4: Configure your widget

After setting you domain, you can visit the Widgets Configurator page. On this page you can view a live preview of widgets (currently only livescore-widget) and configure them to your needs. The configurations you are able to do, depend on what widgets add-on you added to your subscription. The following configurations are currently available for free:
    Theme - Select a default theme (light/dark)
    Theme switch - Option for showing or hiding theme switch (between dark and light mode) in widget
    Show team/league logos - Option for showing or hiding team and league logos
    Show player images - Option for showing or hiding player images
If you have the paid version of the widgets add-on, you will also be able to add branding configurations like colors and your own logo. You also have options to select the leagues to display in the widget.
While you are configuring your widget, its live preview will be updated. You can also view the live preview in different screen sizes, such as mobile, tablet, desktop and responsive.
Make sure you have generated an API-Token! Without it you can't view data in your widget.

Step 5: Copy and paste embed code into your application

Once you configured your widget to your needs, you can get your generated embed code by clicking on the 'Get embed code' button on the Configurator page. The following overlay will be shown.
There are three code fragments you have to copy. The first fragment is the link to the widget's CSS. You will have to copy and paste this in the head of your web application page. The second fragment is the container in which the widget will be loaded. Place this in the body of a page where you want the widget to be shown. The third one is the JavaScript of the widget. Place this in at the end of of your body. So before the closing </body> tag.
Make sure you paste your widget into an application that runs on the domain you have set in the settings.
And that is it!
💯
You have successfully added a widget into your web application.
🥇
If you want to know which widgets we provide, check our widget overview by following the link below.
Last modified 1mo ago