The Globalmouth feedwidget is a widget showing sports events from the Kambi Sportsbook API. The events shown are requested from a CMS to determine which events to show. The widget alternates views between live and pre-match events on a sliding animation.
A script tag needs to be included in the page that is going to show the feed-widget:
<script src="https://d3tt3wt50tdn9c.cloudfront.net/widedesign/bundle.js"></script>This script defines a global function called gmFeedWidget that can be used to instantiate the widget
The feed-widget Javascript file when included in a page will set the value window.gmFeedWidget. You can instantiate the feed widget into any page by calling window.gmFeedWidget({ /* parameters */})
| Parameter key | Type | Default | Description |
|---|---|---|---|
| container | string or HTMLElement | 'gmFeedWidget-container' | Element ID in the DOM or the HTMLElement. The widget will be rendered inside this container at 100% width and height |
| numberOfLiveEvents | number | 4 | The number of 'Live Events' to show in the widget. The widget is styled with overflow-y: auto in the css |
| numberOfPrematchEvents | number | 3 | The number of 'Prematch Events' to show in the widget. The widget is styled with overflow-y: auto in the css |
| liveHeaderLabel | string | null | Header for 'live' widget view for localization |
| preMatchHeaderLabel | string | null | Header for 'pre-match' widget view for localization |
| liveLabel | string | null | Label for 'LIVE' keyword used for localization |
| cmsDataUrl | string | null | Absolute URL to CMS endpoints for fetching data. Currently this is https://d1i6rvicdtllxe.cloudfront.net/ for production |
| sportsbookBaseUrl | string | null | Relative URL to the sportsbook for placing bet and navigating |
| lang | string | en_GB | Language to use when fetching data from the Kambi API. This should be in the format: language_Locale, for example en_GB for English Global, or de_DE for German Germany or pt_BR for Portuguese Brazilian |
| refreshTimeout | number | 60000 | The timeout required for updating the data and performing new data fetches. The timeout is in miliseconds |
| switchViewTimeout | number | 10000 | The timeout required for switching between 'pre-match' and 'live' feeds for the widget. The timeout is in milliseconds |
| onError | function | callback for when an error happens when running the widget | |
| onSuccess | function | callback for when the widget successfully loads and fetches data | |
| redirectCallback | function | callback for the widget to open the sportsbook using the parameter path | |
| tennisSetLabel | string | Set | Provide a string to be used for the score in tennis events e.g. "Set 1", "Set 2" the string passed should be translated for different locales |
| platformName | string | null | Name of platform, current acceptable values: "admiral" for Admiral Romenia, "starvegas" for Starvegas Italy, "starvegas-es" for Starvegas Spain, "fenikss-lv" for Fenikss Latvia, "admiral-beta" for Admiral Romania Beta environment, "starvegas-test" for Starvegas Test environment, "admiral-test" for Admiral Test environment |
| styling | object | varies by design | Object where you can customize the apparence of the feed widget. See below |
Parameters that can be passed in the styling object. All values here are strings and any valid CSS attribute is accepted. Be careful to use only CSS rules available in all the supported browsers.
| Parameter key | Default Value | Description |
|---|---|---|
| mainTextColor | '#fff' | Main text color of the widget (team names, scoreboard) |
| secondaryTextColor | '#ccc' | Secondary text color of the widget (match clock, match sport name/country/tournament) |
| headerBackgroundColor | '#d9b310' | Background color of the header |
| headerTextColor | '#000' | Color used in the text inside the header |
| liveIconTextColor | '#fff' | The text color of the liveLabel |
| liveIconBackgroundColor | '#e40d15' | The background color of the liveLabel |
| liveArrowColor | '#d9b310' | The color of the arrow on the right side of the Live tab |
| outcomeButtonTextColor | '#fff' | The text color of the outcome button in the Prematch tab |
| outcomeButtonBorder | 'none' | The outcome button border |
| outcomeButtonHoverBorder | 'none' | The outcome button border when the cursor is hovering the button |
| outcomeButtonBackgroundColor | 'linear-gradient(to bottom, #e3bb1d 0%, #af910b 100%)' | The outcome button background color |
| outcomeButtonHoverBackgroundColor | 'linear-gradient(to bottom, #af910b 0%, #e3bb1d 100%)' | The outcome button background color when the cursor is hovering the button |
| backgroundImage | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/widedesignbackground.jpeg' | The background image URL |
| headerLogo | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/headerlogo.svg' | The URL for the image in the top right corner of the widget, pass empty string if this icon is not necessary |
| iconUrlAmericanFootball | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/americanfootball-white.svg' | Icon for sport |
| iconUrlF1 | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/f1-white.svg' | Icon for sport |
| iconUrlMotorsport | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/motorsport-white.svg' | Icon for sport |
| iconUrlIceHockey | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/icehockey-white.svg' | Icon for sport |
| iconUrlOlympicsWinter | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/olympicswinter-white.svg' | Icon for sport |
| iconUrlBasketball | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/basketball-white.svg' | Icon for sport |
| iconUrlFootball | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/football-white.svg' | Icon for sport |
| iconUrlMotorcycle | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/motorcycle-white.svg' | Icon for sport |
| iconUrlTennis | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/tennis-white.svg' | Icon for sport |
| iconUrlDarts | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/darts-white.svg' | Icon for sport |
| iconUrlHandball | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/handball-white.svg' | Icon for sport |
| iconUrlOlympicsSummer | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/olympicssummer-white.svg' | Icon for sport |
| iconUrlVolleyball | 'https://d3tt3wt50tdn9c.cloudfront.net/widedesign/assets/sporticons/volleyball-white.svg' | Icon for sport |
The window.gmFeedWidget({ /* parameters */}) returns an object that can be used to control the feed-widget. This object contains the follwing values:
| Name | Type | Description |
|---|---|---|
| updateNow | function | Perform a force refresh of the widget. Fetching data and re-rendering updates |
| destroy | function | Destroys the widget removing it from the DOM and along with all event listeners |
| switchView | function | Forces the widget show one view. Takes the parameter 'view' that is either "preMatch" or "live" |
const supportedSports = [
'FOOTBALL',
'TENNIS',
'BASKETBALL',
'ICE_HOCKEY',
'HANDBALL',
'VOLLEYBALL',
'MOTORSPORT',
'AMERICAN_FOOTBALL',
'DARTS',
]- bg_BG: Bulgarian
- cs_CZ: Czech
- da_DK: Danish
- de_AT: German in Austria
- de_CH: German in Switzerland
- de_DE: German
- el_GR: Greek
- en_AU: Australian English
- en_GB: English
- es_ES: Spanish
- et_EE: Estonian
- fi_FI: Finnish
- fr_BE: Belgian French
- fr_CA: French in Canada
- fr_CH: French Switzerland
- fr_FR: French
- hr_HR: Croatian
- hu_HU: Hungarian
- it_IT: Italian
- lt_LT: Lithuanian
- lv_LV: Latvian
- nl_BE: Belgian Dutch
- nl_NL: Dutch
- no_NO: Norwegian
- pl_PL: Polish
- pt_BR: Portuguese in Brazil
- pt_PT: Portuguese in Portugal
- ro_RO: Romanian
- ru_RU: Russian
- sv_SE: Swedish
- tr_TR: Turkish
The following example implementation of the Admiral widget
<body>
<div id="gmFeedWidget-container">
<!-- Widget rendered inside here -->
</div>
<!-- Script tag pointing to hosted bundle on CDN -->
<script src="https://d3tt3wt50tdn9c.cloudfront.net/widedesign/bundle.js"></script>
<!-- Example of calling the function -->
<script>
var widget = window.gmFeedWidget({
container: document.getElementById('gmFeedWidget-container')
liveHeaderLabel: 'Live Matches',
preMatchHeaderLabel: 'Pre-Match Events',
liveLabel: 'LIVE',
tennisSetLabel: 'Set',
sportsbookBaseUrl: 'SPORTSBOOK-URL', // replace with the sportsbook base URL (check Parameters Section)
lang: 'en_GB',
cmsDataUrl: 'https://d1i6rvicdtllxe.cloudfront.net/',
platformName: 'PLATFORM_NAME', // replace with the platform name (check Parameters section)
styling: {
/* See Styling Parameters section */
}
});
</script>
</body>