Versions Compared

Version Old Version 4 New Version 5
Changes made by

Aleksander Puumets

Martin Kuks

Saved on

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

Note

  • Although it’s functional, Basketball court lacks animations. They haven’t been finished due to prioritization

  • American Football (CFL) has that feature but it needs to be tested with live matches so that we are confident offering it

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.

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:

Image Removed

...

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

fixtureId

Defines what content should be rendered.

Yes

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

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 opsGenius Sports.

fixtureId

Defines what content should be rendered.

Yes

Supports betgeniusIds and *sourceFixtureIds.*Feed to be used needs to be added to configurationGenius 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 opsGenius 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

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

Default

Collection

Available translations

Football

 

View file
namefootball-default

.json

 

 

View file
namefootball-default.json
View file
namezh-HK.json
pageMultisport GameTracker and examples
spaceGSM
View file
namezh-CN.json
pageMultisport GameTracker and examples
spaceGSM
View filenamevi-GB

.json

page

Multisport GameTracker and examplesspaceGSM
View file
nameth-GB.json
pageMultisport GameTracker and examples
spaceGSM
View file
namept-PT.json
pageMultisport GameTracker and examples
spaceGSM
View file
namepor-GB.json
pageMultisport GameTracker and examples
spaceGSM
View file
namems-MY.json
pageMultisport GameTracker and examples
spaceGSM
View file
namems-GB.json
pageMultisport GameTracker and examples
spaceGSM
View file
nameko-KR.json
pageMultisport GameTracker and examples
spaceGSM
View file
nameko-GB.json
pageMultisport GameTracker and examples
spaceGSM
View file
nameka-GE.json
pageMultisport GameTracker and examples
spaceGSM
View file
nameja-GB.json
pageMultisport GameTracker and examples
spaceGSM
View file
nameit-IT.json
pageMultisport GameTracker and examples
spaceGSM
View file
nameid-GB.json
pageMultisport GameTracker and examples
spaceGSM
View file
namehi-GB.json
pageMultisport GameTracker and examples
spaceGSM
View file
namees-ES.json
pageMultisport GameTracker and examples
spaceGSM
View file
nameen-GB.json
pageMultisport GameTracker and examples
spaceGSM
View file
namede-DE.json
pageMultisport GameTracker and examples
spaceGSM
View file
namefootball-default.json
pageMultisport GameTracker and examples
spaceGSM
View file
namebasketball-default.json
pageMultisport GameTracker and examples
spaceGSM

 

  • default (english) (en-US)

  • English-Great Britain (en-GB)

  • German-Germany (de-DE)

  • Spanish(es-ES)

  • Hindi (hi-GB)

  • Italian-Italy (it-IT)

  • Indonesian (id-GB)

  • Japanese (ja-GB)

  • Georgian (ka-GE)

  • Korean (ko-GB)

  • Korean-Korea (ko-KR)

  • Malay (ms-GB)

  • Malay-Malaysia(ms-MY)

  • Portuguese (por-GB)

  • Portuguese-Portugal (pt-PT)

  • Thai (th-GB)

  • Vietnamese (vi-GB)

  • Chinese-China(zh-CN)

  • Chinese-Hong Kong(zh-HK)

Basketball

 

View file
namebasketball-default.json

 

 

  • default (english) (en-US)

American football (CFL)

 

View file
nameAmericanFootball-CFL-default.json

 

Tennis

 

View file
name

fr

tennis-

CA

default.json

 

  • French-Canada (fr-CA)

  • default (english) (en-US)

Available Translations

...