Examples and FAQ

The Tickaroo Embed Version 3 is deprecated for all use cases, except for some sport templates. We strongly encourage using V4. V3 will not receive any new features of the News Editor V2! If you do not see the new sport templates in your account or require a specific sports type, kindly reach out to us for assistance.

Doing IVW Conform Counting Using the Tracking Callback

All action that a user started with a click will pass the string “user” in the reason parameter.

<script>
  _tik(function() {
    var ticker = Tickaroo.embedLiveblog({
      container: "#tickaroo-liveblog",
      clientId: YOURCLIENTID,
      id: "540433f6a0b3a0c594d85420",
      handleRefresh: 'notify',
      trackingCallback: function(id, reason, type, foundContent) {
        if(reason === 'user') {
          // TODO: Count IVW
        }
      }
    });
  });
</script>

This example shows how to handle refresh in a way that first shows the number of new items to the user and loads the updates on click. Example assumes jQuery.

<div id="ticker-container">
  <a id="update-link" href="#" style="display: none"></a>
  <div id="tickaroo-liveblog"></div>
</div>

<script>
  _tik(function() {
    var ticker = Tickaroo.embedLiveblog({
      container: "#tickaroo-liveblog",
      clientId: YOURCLIENTID,
      id: "540433f6a0b3a0c594d85420",
      handleRefresh: 'notify',
      trackingCallback: function(id, reason, type, foundContent) {
        console.log('trackingCallback', id, reason, type, foundContent)
        if(type == 'refresh' && foundContent > 0) {
          var text;
          if(foundContent == 1) {
            text = "There is one new item. Click to update.";
          } else {
            text = "There are " + foundContent + " new items. Click to update."
          }
          $('#update-link').show().html(text);
        } else if(type == 'update-pending') {
          $('#update-link').hide();
        }
      }
    });

    $('#update-link').click(function(event) {
      event.preventDefault();
      ticker.updateWithPendingItems();
    });
  });
</script>
  • Web embeds are rendered with a preview if webEmbedConsentCallback returns false. No toggler is rendered.
<div id="ticker-container">
  <div id="tickaroo-liveblog"></div>
</div>

<script>
  _tik(function() {
    var storedConsent = { "Facebook": false, "Twitter": false, "Instagram": false, "Polldozer": false, "Gfycat": false, "Opta": false };
    var ticker = Tickaroo.embedLiveblog({
      container: "#tickaroo-liveblog",
      id: "540433f6a0b3a0c594d85420",
      showWebEmbeds: "custom_consent_handling",
      webEmbedConsentCallback: function(platform) {
        return storedConsent[platform];
      }
    });
  });
</script>
  • Web embeds are rendered with a preview if webEmbedConsentCallback returns false. Additionally a toggler is rendered to give consent for displaying this specific web embeds.
<div id="ticker-container">
  <div id="tickaroo-liveblog"></div>
</div>

<script>
  _tik(function() {
    var storedConsent = { "Facebook": false, "Twitter": false, "Instagram": false, "Polldozer": false, "Gfycat": false, "Opta": false };
    var ticker = Tickaroo.embedLiveblog({
      container: "#tickaroo-liveblog",
      id: "540433f6a0b3a0c594d85420",
      showWebEmbeds: "custom_consent_handling",
      webEmbedConsentCallback: function(platform) {
        return storedConsent[platform];
      },
      webEmbedConsentUpdateCallback: function(platform, consent) {
        storedConsent[platform] = consent;
      }
    });
  });
</script>

Inserting Custom Ads

Note: This feature must be activated by Tickaroo!

<div id="ticker-container">
  <div id="tickaroo-liveblog"></div>
</div>

<script>
  _tik(function() {
    var ticker = Tickaroo.embedLiveblog({
      container: "#tickaroo-liveblog",
      id: "540433f6a0b3a0c594d85420",
      customAdCallback: function(id, callback) {
        console.log('Creating Ad for Ticker ID', id)
        
        // If you want to Render simple HTML
        callback("<div>I am simple HTML</div>");
        
        // If you want to Render simple HTML and then initialize it with custom JS
        callback('<div id="myadcontainer"></div>');
        MyAdFramework.createAd('#myadcontainer')
        
        // If you need legacy support for document.write based ad framworks
        callback('<script>document.write("Hello World!")</script>', true);
      }
    });
  });
</script>

Hide date and time for pin (sticky) events

If you want to hide the date and time on pinned (sticky) events, you can add the following CSS to your stylesheet or set it as Custom CSS in the EmbedJS Client (Settings -> Integration -> EmbedJS Clients):

.tik3-event-item-sticky .tik3-flex-event-meta-state__time {
  display: none;
}

You can use the itemDOMPostProcessor option to add custom HTML to specific items. The function defined in itemDOMPostProcessor will be called for every ticker row before it is displayed and receives the DOM element as first and only parameter. You can make changes to this DOM element at your own discretion and risk. We encourage you to select elements only based on the Tickaroo CSS classes. The following Example adds HTML to mark Videos.

itemDOMPostProcessor: function(domItem) {
 var videos = domItem.querySelectorAll(".tik3-media-item-video");
 for(var i = 0; i < videos.length; ++i) {
   var video = videos[i];
   var customNode = document.createElement('SPAN');
   customNode.innerText = "this is a video";
   video.parentElement.insertBefore(customNode, video);
 }
},

Compatibility

Supported Browsers

The Tickaroo embed API supports all current versions of Edge, Firefox, Chrome and Safari. Backwards compatibility is provided down to IE Version 10. While the Script should work in other modern Browsers such as Opera, we only test and support the browsers listed here.

POLYFILLS

The script includes the following polyfills which will leak into global namespace when applied when native functions are missing:

Known Incompatibilities

Known incompatibilities exist with the following Javascript Frameworks:

  • Mootools versions before 1.5 (Overrides function.bind() in an incompatible way)