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. Request widgets

2. Set your domain

3. Configure your widget

4. Copy and paste embed code into your application

Step 1: Request widgets

If you are interested in one or more of our widgets, you can request them at my.sportmonks.com. You will have to create an account if you don't have one already. In mySportmonks go to the My Widgets page under Football Widgets. This is the Widgets overview page where you can manage your widgets. From here you can request the widgets you are interested in!

Go to: https://my.sportmonks.com/widgets

When selecting widgets you can also choose if you want the Basic or the Advanced version of the widgets. In short, the advanced widgets have more data features and more options for customization. For example, the standings widget advanced offers Live standings and the Livescore Widget basic will not have access to the match center. Advanced widget users also have the option to configure colors used in the widget and use their own brand logo at the footer of the widgets.

Some widgets are based on the leagues you will have in your widget product. For example the Livescore Widget shows only fixtures of the leagues you have included in your widget product. If you select such a widget you will automatically go to the league selection page before you can finish your request.

Here you can search leagues based on country and/or name and (de)select the leagues you want access to in your widgets. When you are done, click on the Next button which leads to the overview page. On this page you have an overview of the selected widgets and leagues, so you can check once more your request before submitting it.

After submitting your request the sales team will contact you within 24 hours with a price proposal. After coming to an agreement about the price proposal you can subscribe at the My Widgets page to your new widget product.

You don't need an API subscription to request widgets. An only widgets subscription however doesn't give you access to the Football API.

Step 2: 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.

Make sure you have entered your domain correctly. Otherwise the widget cannot fetch and show the correct data.

Step 3: Configure your widget

After setting your domain, you can visit the Widgets Configurator page. On this page you can view a live preview of widgets and configure them to your needs. The configurations you are able to do, depend on the type of widget and if you have the basic or the advanced variant of the widgets. The following customization options are available for every widget.

• Theme - Select a default theme (light/dark)

• Theme switch - Option for showing or hiding theme switch (between dark and light mode) in widget

• Font - Select the font used in the widgets

• Colors (only advanced) - Select the colors used in the widgets

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.

General settings

On the Widget Settings page the following configurations can be saved so they will be used across all your widgets:

• Domain

• Timezone

• Colors (only advanced, also configurable per widget)

• Brand (only advanced)

Step 4: 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.

Widgets overview