Odds widget
Description
The odds widget shows specific coefficients, for a specific game and market, from a specific bookmaker.
It’s a contextual widget used by companies because it creates additional advertising space they can use to reach their audience and complement their banner advertising.
The widget displays 1X2, Double Chance, and additional markets.
Note that odds dynamically change when the bookmaker updates them.
Also, we have the ability to deep link. This means that if we work with a provider, we can make it so that when a user clicks on a particular coefficient, we can prefill the bookmaker’s betslip.
Bind the widget to HTML DOM
Make sure that you have the loader already set up on your website.
If not, follow our guide:
You can bind the widget to the HTML DOM by two ways:
- Bind the widget without initial options. The required attribute here is "data-widgetId"
<div data-widgetId="odds-listing"></div>
- Bind the widget with initial options. All available options can be seen below
<div data-widgetId="odds-listing" data-options='{...}'></div>
- The "data-options" attribute:
{
int eventId, -> // Unique identifier of the resource.
string lang -> // The language which the widget with work with. Currently, the widget works with the following
// languages: "bg", "ro", "en", "tr", "de", "it", "pt", "ro", "hu", "sr", "el".
// The language property is also passed to the API with the "Accept-Language" header
string oddClient -> // Identifies the client for which to return filtered bookmakers with affiliate URLs.
// Without the parameter, can not sort odd_providers or provide affiliate links.
// Instead, it will sometimes give a 'coupon' key with the odds fo building URLs. header
// NB! This option is mandatory; otherwise, the odds won\'t be displayed
int[] oddProviders -> // A list of indexes for the oddProviders list received from the back-end
// Only the providers with the given index in the array will be displayed in the widget.
// Example: oddProviders: [0, 2]
// Back-end response: oddProviders: [ {name: Bwin, ...}, {name: betwin, ...}, {name: bet365, ...}]
// Only the given odd providers will be displayed: Bwin and bet365
int[] oddProviderIds -> // A list of ids, these ids are odd provider ids. This option is responsible
// for displaying only odd providers with the ids that are added in the given array.
// If oddProviders and oddProviderIds options are both provided, the oddProviderIds option will be used only, as it is with a higher priority.
string apiURL -> // The URL of the API for football information
string apiKey -> // The key for the authorization header, which will be base64 encoded
boolean displayMatchHeader -> // Displays/Hides the Match Header
string watchLiveUrl -> // URL for the live streaming of the match (opens in a new tab when clicked)
// If this option is not passed to the widget, the live URL element will be hidden.
// This option is only valid if the 'displayMatchHeader' option is activated (e.g., displayMatchHeader: true)
obj market -> The default market and value (value is used only for over/under market) to display. If the market is not set, the default market
will be '1x2'.
Available market names: "1x2", "overUnder", "both_score", "double_chance"
Available market values: This depends on the response received for the overUnder market.
Example: "market": {"name": "1x2"},
Example: "market": {"name": "both_score"},
Example: "market": {"name": "double_chance"},
Example: "market": {"name": "overUnder", "value": "0.5"}
boolean enableBetslip -> When this option is enabled, the market links will be disabled, and the market click will lead
to populating the betslip widget.
boolean canSelectMarkets (true/false) -> // Displays a dropdown with a filter for the different kinds of markets
// Currently supported markets: '1x2', 'over/under', 'both teams score', 'double chance'
// If this option is not provided to, or not set to true, the widget options,
// the market dropdown won\'t be displayed
int oddsUpdateInterval (milliseconds) -> // This option gives control over the frequency of requests to the API for the given event
displayTeamShortNamesOnDesktop: (true/false) -> // This option replaces the team name with its short name on all resolutions if "displayTeamCustomNamesOnDesktop" is not added
displayTeamShortNamesOnMobile: (true/false) -> // This option replaces the team name with its short name on mobile resolutions if "displayTeamCustomNamesOnMobile" is not added
displayTeamCustomNamesOnDesktop: (true/false) -> // This option replaces the team name with its custom name on all resolutions
displayTeamCustomNamesOnMobile: (true/false) -> // This option replaces the team name with its custom name on mobile resolutions
}
Odds listing in the CMS
Currently, the Sportal365 CMS offers a variety of football widgets to enable creators to add sports-specific statistics and context to their articles, videos, or galleries.
Adding the Odds widget in Blocky
You can add the Odds widget by selecting the +button in the Blocky and Football widgets.
To use the Odds widget, follow the steps:
- In the Team field, fill in the team you want to show odds for.
- Then, select Match and choose from the drop-down menu the match you want to display odds for.
- As a next step, select a bookmaker from the Select bookmaker field. Remember that you can only choose one bookmaker.
- Select the Display header field to visually enrich your widget and show more information about the match (e.g. match time, team names and logos).
Note that you can choose whether to display the header on all resolutions or mobile only.
- Lastly, select Display market selection if you want to display market options:1X2, OVER / UNDER / BOTH TEAMS TO SCORE / DOUBLE CHANCE.
Video example
Updated almost 2 years ago