Examples on how to integrate our Head to head widget.

Required parameter is matchId.

Both widgets, Button and Standalone, supports two layouts, overlay (default) and inline.

Button

Button component has some additional parameters available on API Documentation.

Overlay Layout

Example

Code

<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.sir.sportradar.com/sportradar/widgetloader", "SIR", {
        language: "en"
    });
    SIR("addWidget", ".sr-widget", "headToHead.button", {matchId: match_id_here});
</script>
<div class="sr-widget"></div>

Inline Layout

Example

Code

<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.sir.sportradar.com/sportradar/widgetloader", "SIR", {
        language: "en"
    });
    SIR("addWidget", ".sr-widget", "headToHead.button", {matchId: match_id_here, layout: "inline"});
</script>
<div class="sr-widget"></div>

Standalone

Check available parameters on API Documentation.

Overlay Layout

When widget has less than 580px of space (width) it changes display from two-column to a single column layout.

Example

Code

<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.sir.sportradar.com/sportradar/widgetloader", "SIR", {
        language: "en"
    });
    SIR("addWidget", ".sr-widget", "headToHead.standalone", {matchId: match_id_here});
</script>
<div class="sr-widget"></div>

Inline Layout

When widget has less than 760px of space (width) it changes navigation from sidebar to the tabs in the header.

Example

Code

<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.sir.sportradar.com/sportradar/widgetloader", "SIR", {
        language: "en"
    });
    SIR("addWidget", ".sr-widget", "headToHead.standalone", {matchId: match_id_here, layout: "inline"});
</script>
<div class="sr-widget"></div>