Synchronized Data Panels

Mobile		Web	TV Platforms

Synchronized Data Panels, a core feature of DIVA, supports synchronized sports information and statistics inline with the video. Users can consume the video with access to further details about the current moment, e.g., a goal scored, or a historical moment if seeking backward in time.

DIVA's Data Panel content is agnostic, supporting all sport types. The content and the layout of every Data Panel is defined by on a per-project basis.

PushEngine component

Configure the Synchronized Data Panel via the PushEngine component.

DIVA requirements

DIVA provides a set of configurations to enable the Synchronized Data Panel functionality. A data integration layer using a sport data provider (that gets information from sport feeds like Matrix or Opta), or an editorial content using DIVA's back office Video Editor console is required. The data collection must be provided by the project and configured in pushEngine component.

DIVA Settings and videoMetadata

• PushEngine
• dataPanels
• SyncDataPanels

Web and Web mobile

info

Advice on the Synchronized Data Panel implementation:

• The width of the overlay must be responsive
• The HTML must contain this tag to be compatible with iOS: <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
• To enable navigation, define a Single Page Application navigation without a redirect

Every HTML Data Panel receives a query string parameter named templateName with these possible values:

• fullPage: Used for Data Panel display on Tablets, where the background of the overlay in DIVA is dark with a blurred video
• fullVideo: Used for Data Panel display on Tablets, where the background of the overlay in DIVA is the video
• sideBySide: Used for Data Panel display on Tablets, where the background of the overlay in DIVA is dark
• leftSideVideo: Used for Data Panel display on Tablets, where the background of the overlay in DIVA is the video
• rightSideVideo: Used for Data Panel display on Tablets, where the background of the overlay in DIVA is the video

Mobile

Every HTML Data Panel receives a query string parameter named templateName with these possible values:

• mobileContextual: Used for the SnapStats overlay on Smartphones and Tablets, where the background of the overlay in DIVA is dark
• mobileLandscape: Used for the Data Panel display on Tablets, where the background of the overlay in DIVA is dark
• mobilePortrait: Used for the Data Panel display on Smartphones, where the background in DIVA is white

Tech external integration

• New HTML Overlay Workflow
• New HTML Overlay Example Template
• New HTML Overlay Visual Behavior
• New HTML Overlay Utilities

DIVA translations

The localization of the text in Synchronized Data Panels is defined in the pushEngine.

Analytics

For the Synchronized Data Panels feature, DIVA raises external Analytics events.

Product documentation

For Synchronized Data Panel visuals and behaviors, visit the DIVA help centre.