How-to create your widget in three steps
Hey there, and welcome to this handy guide on how to gain access to Sportmonks’ widgets and use them in your web application. Throughout this guide, we'll go over the necessary steps to make use of our widgets, which are:
Requesting your widget subscription
Configuring your widget(s)
Embedding your widget(s)
So, let's dive in and get started!
Step 1: Requesting Widgets
To get started, if you're interested in any of our widgets, you can easily request them by heading to My.Sportmonks. If you haven't created an account yet, you'll need to do so first. Once you're signed up, navigate to the My Widgets page under Football Widgets in mySportmonks. This page provides an overview of all available widgets; you can manage them from here.
Here, you can easily request the widgets you're interested in.
When selecting widgets, you'll also have the option to choose between the Basic or the Advanced version of each widget. In a nutshell, the advanced widgets come with more data features and offer more customisation options.
Advanced widget users have the option to configure the colours used in the widget and even use their own brand logo at the footer of the widget.
It's worth noting that all widgets are based on the leagues that you have included in your widget product. For instance, the Livescore Widget will only show fixtures from the leagues you've added to your widget product. So, you'll be taken to the league selection page before you can complete your request. This way, you can choose which leagues you want to include and ensure that the widget fits your specific needs.
On the league selection page, you'll be able to search for leagues based on country and/or name and select or deselect the ones you want to include in your widgets. Once you're finished, simply click the Next button to go to the overview page. Here, you'll see an overview of all the selected widgets and leagues, giving you the opportunity to double-check your request before submitting it.
Once you've submitted your request, our sales team will reach out to you within 24 hours with a price proposal. Once you've come to an agreement on the pricing, you can easily subscribe to your new widget product on the My Widgets page.
You don't need an API subscription to request widgets. However, a widget-only subscription doesn't give you access to the Football API.
Step 2: Configure your widget
Once you've created your Widget product, you'll need to set your domain in either the Widgets Settings page or the My Widgets page. It's important to note that the domain you enter here will be the only one from which you'll be authorized to host our widgets.
So, for instance, if you enter sportmonks-widgets.com as your domain, the widgets will only be authorized for use on that domain. This ensures that the widgets are used only on authorized domains and prevents unauthorized usage.
Once you've set up your domain, you can visit the Widgets Configurator page. Here, you'll be able to view a live preview of your widgets and configure them to your specific needs. It's worth noting that the customisation options available to you will depend on the type of widget you've selected, as well as whether you have the basic or advanced variant of the widget.
As you configure your widget, you'll be able to see a live preview of each update in real time. This allows you to see how your customisations will look before you embed the widget on your website. Additionally, you can view the live preview in various screen sizes, including mobile, tablet, desktop, and responsive.
When customizing your widgets, you'll have access to a range of options, including the ability to:
Choose a theme: You can select a default theme for your widget, choosing between light and dark modes.
Show or hide theme switch: You can choose whether to include a theme switch option in your widget, allowing users to toggle between dark and light modes.
Choose a font: You can select the font used in your widgets, helping to ensure that your widget matches the overall style of your website.
Customise colours (advanced only): If you have access to the advanced version of a widget, you can choose the colours used in the widget to match your branding.
General settings
The Widget Settings page also allows you to save some general configurations that will be applied to all of your widgets:
Domain: Here, you can set the domain from which your widgets will be hosted.
Timezone: You can select your timezone to ensure your widgets display the correct time information.
Colours (advanced only): If you have the advanced version of a widget, you can set the colours that will be used across all of your widgets from this page.
Brand (advanced only): additionally, you can set your brand information, such as your logo, to be displayed in the footer of your widgets (advanced version only).
Step 3: Embedding your widget
After configuring your widget to your desired settings, you can obtain the generated embed code by clicking on the "Get embed code" button located on the Configurator page. This will display an overlay containing the code that you can simply copy and paste into your web application.
To properly embed the widget into your web application, you need to copy three code fragments. The first fragment is the link to the widget's CSS, which should be placed in the head section of your web application page. The second fragment is the container that will hold the widget and should be placed in the body section of your page where you want the widget to be displayed. Lastly, the third fragment is the JavaScript code for the widget, which should be placed at the end of the body section of your page, right before the closing </body> tag.
Ensure 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.
Last updated
