Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
maxLevel7
minLevel1

Multisports widgets

The multisport Game Tracker is a unique widget that has the capability to be used in different sports, so far and at the time of the creation of this document it has support for Football, American Football (CFL), Tennis and Basketball.

This is possible because using the fixtureId (match identifier) the widget can identify the sport to display.

...

Features by sport

Components

Pitch

Team Stats

Player Stats

Play By Play

Lineups

Football

YES

YES

NO

YES

YES

🏀 Basketball

YES*

YES

YES

YES

NO

🏈 American Football

NO*

YES

YES

YES

NO

🎾 Tennis

YES

YES

NO

NO

NO

Layouts

Regular

Desktop

Stand alone

Side by Side

Football

YES

YES

YES

YES

🏀 Basketball

YES

NO

YES

YES

🏈 American Football

YES

NO

YES

NO

🎾 Tennis

YES

NO

YES

YES

Warning

If the widget receives a fixtureId for an unsupported sport, it won't be able to load data and will show an error instead. For other sports please use the Multisport Scoreboard

Layouts and integration

The Multisport game tracker supports multiple layouts to give provide flexibility and changes the way how the customer wants that the customer can choose how to render the different component also is an advantage because is not required to create multiple customers on our database, with one customer is possible to set multiple components. A single configuration can be used to show the widget in several layouts.

Regular

...

The purpose of this layout is to render the game tracker with a tabs navigator, the idea is to use it on small or medium containers including mobile view.

When a tab has no data, that tab will be disabled until the data is available. When the tab is not supported on that sport, in that case, the tab will be hidden.

...

Desktop Layout

The purpose of this layout is to render all the components in a single view, the idea is to use it on a large container.

When some data is not available to render the component, this will be hidden and the layout will adapt based on the available components.

...

Stand Alone Layout

The purpose of this layout is to render different widgets on a stand-alone view. This is similar to having modular components, the customer can use the widget as a building block within their app or website. Can be used on large, medium, or small screens.

Integration details

The iframe code should be placed within the body of the webpage where you would like the widget to appear. The script below is an example that embeds a Football Game Tracker product.

Regular layout

Football

This is the default layout. Tabs can be removed and/or added on our side.

EXAMPLE LINK

Integration example

Code Block
languagehtml
<iframe id="gsm-game-tracker" scrolling="no" src="https://gsm-widgets-uat.betstream.betgenius.com/multisportgametracker?fixtureId=9830657&productName=gsmdemo" width="100%" height="320px" style="border: 0; allowtransparency"></iframe>

Basketball

Code Block
languagehtml
<iframe id="gsm-game-tracker" scrolling="no" src="https://gsm-widgets-uat.betstream.betgenius.com/multisportgametracker?fixtureId=9976439&productName=gsmdemo" width="100%" height="320px" style="border: 0; allowtransparency"></iframe>

Pitch tab for footbalImage RemovedImage Removed

Pitch tab for Basketball

...

Player Stats tab

Desktop layout

Info
  • Integration looks the same for all supported sports, the important part is to pass the right fixtureId

  • When a tab has no data, that tab will be hidden until the data is available. When the tab is not supported on that sport, the tab will remain hidden.

  • Dimensions can be modified as long as it isn’t smaller than 300x300

  • Make sure you set the right productName

Screenshots

Image Addedimage-20240202-203835.pngImage Added
Image AddedImage Added
Image AddedImage Added
image-20240202-203940.pngImage Added

Desktop

The purpose of this layout is to render all the components in a single view, the idea is to use it on a large container or the whole window.

EXAMPLE LINK

Integration example

To render the desktop view is required to pass the query parameter layout with the value desktop

Code Block
languagehtml
<iframe id="gsm-game-tracker" scrolling="no" src="https://gsm-widgets-uat.betstream.betgenius.com/multisportgametracker?fixtureId=9937582&productName=gsmdemo&layout=desktop" width="100%" height="320px" style="border: 0; allowtransparency"></iframe>

...

Stand-Alone Component

In case that requires a component, stand-alone needs to add the query param widget and define the component that will be rendered

...

Info
  • At the moment this only works for Football

  • When some data is not available to render the component, it will be hidden and the layout will adapt based on elements that can be displayed properly

  • Dimensions can be modified, iframeheight should be at least 580px in order to have a properly functioning widget and its container should be at least 900px wide

  • Make sure you set the right productName

Screenshots

Image AddedImage Added

Side by Side

This layout renders a pitch/court component alongside other tabs such as team stats and lineups.

When the available space in terms of width reaches a certain breakpoint, it will behave just like regular layout does.

EXAMPLE LINK

Integration example

To render the desktop view is required to pass the query parameter layout with the value sideBySide

Code Block
languagehtml
<iframe id="gsm-game-tracker" scrolling="no" src="https://gsm-widgets-uat.betstream.betgenius.com/multisportgametracker

...

?fixtureId=

...

9937582&productName=gsmdemo&

...

layout=

...

sideBySide" width="100%" height="320px" style="border: 0; allowtransparency"></iframe>
Info
  • This should be used only with sports that support pitch/court

  • Dimensions can be modified, iframeheight should be at least 300px in order to have a properly functioning widget and its container should be at least 700px wide (if the viewport is smaller it will render the regular layout instead)

  • Make sure you set the right productName

Screenshots

image-20240402-222117.pngImage Added

Stand Alone

The components that can be used stand-alone are the followingpurpose of this layout is to render different widgets on a stand-alone view. This is similar to having modular components, the customer can use the widget as a building block within their app or website. Can be used on large, medium, or small screens.

Integration example

In order to use the stand-alone version, the query param widget is passed with the component that will be rendered as value.

ScoreBoard

To use the scoreboard stand-alone, the widget query parameter should be equal to the scoreboard

Code Block
languagehtml
<iframe id="gsm-game-tracker" scrolling="no" src="https://gsm-widgets-uat.betstream.betgenius.com/multisportgametracker/?fixtureId=9830657&productName=gsmdemo&widget=scoreboard" width="100%" height="320px" style="border: 0; allowtransparency"></iframe>

...

Image Removed

...

Pitch/Court/Field

To use the Pitch stand-alone , the widget query parameter should be equal to the court

Code Block
languagehtml
<iframe id="gsm-game-tracker" scrolling="no" src="https://gsm-widgets-uat.betstream.betgenius.com/multisportgametracker/?fixtureId=9830657&productName=gsmdemo&widget=court" width="100%" height="320px" style="border: 0; allowtransparency"></iframe>

Example URL:

Image Removed

...

Lineups

To use the lineup lineups stand-alone , the widget query parameter should be equal to the lineups

Code Block
languagehtml
<iframe id="gsm-game-tracker" scrolling="no" src="https://gsm-widgets-uat.betstream.betgenius.com/multisportgametracker/?fixtureId=9937582&productName=gsmdemo&widget=lineups" width="100%" height="320px" style="border: 0; allowtransparency"></iframe>

Example URL:

...

Play By Play

To use the play-by-play stand-alone, the widget query parameter should be equal to the playByPlay

Code Block
languagehtml
<iframe id="gsm-game-tracker" scrolling="no" src="https://gsm-widgets-uat.betstream.betgenius.com/multisportgametracker/?fixtureId=9937582&productName=gsmdemo&widget=playByPlay" width="100%" height="320px" style="border: 0; allowtransparency"></iframe>

Example URL:

...

Team Stats

To use the team stats stand-alone , the widget query parameter should be equal to the teamStats

Code Block
languagehtml
<iframe id="gsm-game-tracker" scrolling="no" src="https://gsm-widgets-uat.betstream.betgenius.com/multisportgametracker/?fixtureId=9937582&productName=gsmdemo&widget=teamStats" width="100%" height="320px" style="border: 0; allowtransparency"></iframe>

Example URL:

Image Removed

Supported components by Sport

...

Pitch

...

Team Stats

...

Player Stats

...

Play By Play

...

Lineups

...

Football

...

YES

...

YES

...

NO

...

YES

...

YES

...

Basketball

...

YES

...

YES

...

YES

...

YES

...

NO

Supported layouts by Sport

...

Regular

...

Desktop

...

Stand alone

...

Football

...

YES

...

YES

...

YES

...

Basketball

...

YES

...

*YES (Needs additional support to show players stats instead of lineups while the lineups supports arrives)

...

Info
  • Dimensions can be modified, iframeheight should be at least 300px in order to have a properly functioning widget and its container should be at least 300px wide

  • If a particular fixture does not have enough data for the desired component, it will show the empty state

  • Make sure you set the right productName

Query parameters

Game Tracker

Name

Purpose

Mandatory

Notes

productName

Dictates which configuration should be used to render the Game Tracker(customer)

Yes

It’s a string that would be provided by

ops

Genius Sports.

fixtureId

Defines what content should be rendered.

Yes

Supports

betgeniusIds and *sourceFixtureIds.*Feed to be used needs to be added to configuration

Genius Sports fixture IDs and customer fixture IDs.

To use the customer fixture IDs, the IDs need to be sent to Genius Sports for mapping.

layout

Defines the layout that will be displayed

No

The layout name would be provided by

ops

Genius Sports, the default layouts are default(tabs), sideBySide or desktop

culture

Chooses which locale should

Should not be used

to load translations

No

Options are described in the translations section

Game Tracker Stand-Alone View

Name

Purpose

Mandatory

Notes

productName

Dictates which configuration should be used to render the Game Tracker(customer)

Yes

It’s a string that would be provided by ops

fixtureId

Defines what content should be rendered.

Yes

Supports betgeniusIds and *sourceFixtureIds.
*Feed to be used needs to be added to configuration

alongside widget

widget

Define the stand-alone component that will be used

No

Allows usage of stand alone component. Should not be used alongside layout

culture

Chooses which locale should be used to load translations

No

Options are described in the translations section

widget

Define the stand-alone component that will be used

Yes

Only work when need stand-alone components

Configuration

In order to have a working widget a configuration must be created, this is handled by the operations team.

Here you can take a deep dive and understand how the configuration model works. This is mostly for developers since operations should interact with this through UI Multisport GameTracker Configuration

Translations

In order to use any other than the default language, it needs to be translated.

...

Sport

...

Translations

  • To utilize this feature, append the parameter &culture={language-code} to the URL. The {language-code} should adhere to this ISO format. If translation files for the specified language are available, they will be used; otherwise, the default language will be en-GB. To utilize a language other than the default, it must first be translated.

  • Each supported language in the system has a dedicated file containing translations for all available sports. Note that the coverage for a specific sport may vary depending on the language.

  • This applies to nearly all text within the widget, with the exception of team names, competition names, and play descriptions for American football fixtures.

  • Language management is global across all customers, meaning that no customer-specific translations are permitted; all customers will experience the same language settings.

  • Each supported sport in the multisport game tracker has its own unique structure or set of strings that require translation.

  • Every translatable string follows this format, where customers should only modify the text within the translation key. Descriptions are often provided to clarify which label each string corresponds to.

Code Block
"AboutToStart": {
    "translation": "試合はまもなく開始されます",
    "description": "Label for AboutToStart"
},
  • Given the global nature of languages, we already provide support for a wide range of them. If you have inquiries regarding the current status of a specific language, please feel free to ask. Additionally, if there are any files missing that need to be completed, or if you require the most recent starting file for a particular language, do not hesitate to request that information.

...

Sport

Default

Football

View file
name

en

football-

us

default.json

Available Translations

Basketball

View file
namebasketball-default.json

American football (CFL)

View file
nameAmericanFootball-default.json

Tennis

View file
nametennis-default.json