Getting Started

Embedding a Sportscast requires two steps: Including the script and calling the embedTicker API Method.

The simplest possible example looks like this:

<div id="ticker"></div>
<script>
  (function(e,t,n,r,i,s,o){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},
  e[i].l=1*new Date;s=t.createElement(n),o=t.getElementsByTagName(n)[0];s.async=1;
  s.src=r;o.parentNode.insertBefore(s,o)})(window,document,"script",
  '//cdn.tickaroo.com/embedjs/v1.js',"_tik");
   _tik("embedTicker", {container: "#ticker", clientId: YOURCLIENTID, id: "540433f6a0b3a0c594d85420", style: "v2"});
</script>

Now lets break that down.

Including the script

The best way to include the script is to use the following snippet:

<script>
  (function(e,t,n,r,i,s,o){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},
  e[i].l=1*new Date;s=t.createElement(n),o=t.getElementsByTagName(n)[0];s.async=1;
  s.src=r;o.parentNode.insertBefore(s,o)})(window,document,"script",
  '//cdn.tickaroo.com/embedjs/v1.js',"_tik");
</script>

YOU NEED TO REPLACE “YOURCLIENTID” WITH YOUR ACTUAL CLIENT ID PROVIDED BY TICKAROO!

The snippet has been optimized to provide the best possible speed and stability for your site rendering. It is non-blocking during DOM rendering and provides an asynchronous API which allows to make calls even before the script has been loaded.

This has to be done only once on the page, no matter how many widgets or embeds you are including on the page.

Calling an API Method

The API provides a wrapper to ensure the library is completely loaded before it makes a call. Every call should go through the wrapper. You can either make an indirect call if you don’t care about return values of the call or you can provide a function which is executed in the context of the API. Although it is possible to make directly call the Tickaroo object, it is discouraged to do so.

Example:

// 1: Make an indirect call.
//    The method will be called as soon as the library is fully loaded.
//    There is no return value.

 _tik("embedTicker", {container: "#ticker", id: "540433f6a0b3a0c594d85420", style: "v1"});

// 2: Provide a function to call as soon as the library is fully loaded.

_tik(function() {
  var theSportscast = Tickaroo.embedTicker({
    container: "#ticker",
    clientId: YOURCLIENTID,
    id: "540433f6a0b3a0c594d85420",
    style: "v2"
  });
});

Embedding a Sportscast

To embed a ticker, you need to call the embedTicker method. At a minimum you need to provide the ID of the ticker and a container DOM Node in which the ticker should be embedded.

Example:

<div id="ticker"></div>
<script>
  _tik(function() {
    window.theSportscast = Tickaroo.embedTicker({
      container: "#ticker",
      clientId: YOURCLIENTID,
      id: "540433f6a0b3a0c594d85420",
      style: "v2"
    });
  })
</script>

Note:

  • You can do both the script include and the ticker embed from within one script tag. This improves rendering time by a few ms.
  • It is not necessary to store the return value of embedTicker if you don’t intend to use it. Using the window object is also not necessary.
  • There are a lot of options for embedTicker. By default, the script handles everything from auto-reload to timestamps. This behavior can be changed. See below for details.
  • The content of the container will be replaced with the ticker once it has been loaded. If you like, you can provide some kind of loading spinner or other content in the container tag.

Using an iFrame

Example:

<div id="iframe"></div>
<script>
  _tik(function() {
    window.theSportscast = Tickaroo.embedIframeUrl({
      container: "#iframe",
      url: "//webwidget.tickaroo.com"
    });
  })
</script>