VL SportRadar Module

In this article, you'll learn how to add a SportRadar widget to a game page and easily customize it using macros.

About Sportradar Module 

The SportRadar module is a RAW HTML module to load the SportRadar Widget on a Game page. 

Create a Game Detail Stats Tab Page

To create a widget, you'll first create a modular page and then drop the VL SportsRadar Module into the page. 

When you create a Modular page, name the page, for example, Game Detail Stats Tab NHL or Game Detail Stats Tab NBA. Or assume – if you stream both NHL and NBA league games on your site, then you must create two separate pages for NHL and NBA so that the corresponding Javascript Tag for the league games can be added into the Sportradar module and you show the correct widget on the game pages.

Embed the JavaScript Tag

Add the NHL/NBA JavaScript tag to the VL SportsRadar Module in the corresponding Game Detail Stats Tab page.

For example, if you want to display a widget of an NBA match, then go to the Widget tab for NBA matches and click Headers. Then, copy the script tag and the div element into the SportRadarRaw HTML module.

The widget will now show on the game page on your website.

Customize the SportRadar widget code 

You must replace the generic values in the SportRadar code with the following ViewLift macros.

<style>
.sr-bb .sr-loader__container{
padding:10px
}
</style>
<script>
(function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f,
g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),
h.parentNode.insertBefore(g,h))})
(window,document,"script",
"https://widgets.media.sportradar.com/viewlift/widgetloader",
"USW", { language: 'en_us' });
USW('addWidget', '#sr-widget', 'us.match.nhl.teamStats', {border: false, matchId: VIEWLIFT_SRGAMEID});
</script>
<div id="sr-widget"></div>

Parameter	Description
"<your client alias>"	Our client alias is ViewLift. Replace this generic variable with "viewlift".
"matchId"	To load the SportRadar widget based on match ID, use the VIEWLIFT_SRGAMEID macro. Paste this macro after matchId: in the JavaScript code. The macro will dynamically pick the actual match ID (43065445) for the game object, as configured in the GAME INFO section of the page, and ignore the preceding sr:match: prefix.
"#sr-widget"	The widget on a game page loads data based on the Widget type.  Define the widget macro in the JavaScript code. For all Capitals Games, define the widget type as us.match.nhl.teamStats. For Wizards Game objects, define the widget as us.match.nba.statistics.
"Season ID"	VIEWLIFT_SEASON_ID macro can be used to load the stats widget based on game season. Make sure to input the season ID for the game under the GAME INFO section.
"League"	VIEWLIFT_LEAGUE macro can be used to load the stats widget based on the league. For example, you must replace the {sport: "nhl"} with {sport: "VIEWLIFT_SEASON_ID"} in the RAW HTML. Then, input the League info for the game in the League field.

Once updated, publish the game object page and the Game Detail Stats Tab Page in the Template Builder.