Skip to main content

Custom Data Panels

Android logoiOS logoResponsive Web logo

DIVA supports the addition of custom content via Custom Data Panels. No DIVA player code is required, simply design your content in a responsive HTML5 page and configure it in the Settings file. Custom content displays within a new menu tab in the data panel menu, situated after the Commentary and Synchronized Data Panel overlays.

Using the path resolver, utilize the contextual information (video, device, user info, etc.) to provide precise information to the user based on the current content.

See below the example of possible Custom Data Panel scenarios:

  • Gamification: Show the user statistics in an overlay during an event
  • Display other data panels related to the match like the weather conditions or venue information
  • Basic chat
  • Live blog integration

DIVA requirements

DIVA supports the creation of responsive HTML5 pages with custom content. With this page set up, it must then be linked to DIVA.

DIVA Settings and videoMetadata


Advice on the 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">
  • Mobile guidelines must be taken into consideration
  • Do not use complex js libraries
  • Do not create the overlay with an infinite scroll
  • Do not embed video content inside the overlay :::

Tech external integration

DIVA translations

The localization of the text in Custom Data Panels is defined in your customized HTML page.


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

Product documentation

For Custom Data Panels visuals and behaviors, visit the DIVA help centre.