Javascript Reference

The Tickaroo Object

embedTicker

Signature:

Tickaroo.embedTicker(options)

Values for the options object:

  • options.clientId (ObjectID) The Client ID provided by Tickaroo

  • options.container (String or Element) The element to use as a container (css selector or element) (required)

  • options.id (ObjectId) ID of the ticker to load (required)

  • options.eventId (String) if you want to focus on an important event in this ticker, add the event id here and the ticker will navigate to this event on load. (optional)

  • options.style (‘v1’, ‘v2’, ‘prerelease’, ‘imagegrid’) Load a predefined ticker style. Prerelease will show new Features which will become default in the future. We will increase version for breaking changes.

  • options.showHighlights (Boolean) Will display a list of game highlights underneath the scoreboard, (eg.: a goal scorer list in a soccer game) (default: true)

  • options.reverseEvents (Boolean) Will reverse the order of the events (oldest on the top of the livecast) (default: false)

  • options.limit (Integer) The number of items to fetch on initial load (default: 15, range: 2-1000)

  • options.loadMoreLimit (Integer) The number of items to fetch on load more (default: value of limit, range: 2-1000)

  • options.handleScoreboard (‘auto’ or ‘off’) determines if the display of a scoreboard should be handled automatically (default: ‘auto’)

  • options.handleMedia (‘auto’, ‘rooverlay’, ‘inline’, ‘shadowbox’ or ‘off’) determines how media objects should be handled. If set to ‘rooverlay’ Tickaroo’s own slideshow gallery will be used. If set to inline, will not open a slideshow and play videos inline. If set to shadowbox, assumes shadowbox slideshow library has been loaded and initialized. If set to ‘auto’, ‘rooverlay’ will be used, but might change non-breaking in the future. (default: ‘auto’)

  • options.handleTimestamps (Boolean) should Tickaroo handle timestamp display (default: true)

  • options.refreshInterval (Number) the time (in milliseconds) interval to refresh and update the ticker (default: 20000)

  • options.handleWebEmbeds (Boolean) should Tickaroo handle web embeds like twitter (default: true)

  • options.handleRefresh (‘auto’, ‘notify’ or ‘off’) automatically refresh the content of the ticker. If set to “notify”, updates are fetched and sent to the trackingCallback but are not rendered automatically. You have to call “updateWithPendingItems” to apply the updates. (default: ‘auto’)

  • options.showEventMeta (‘ticker’, ‘reporter’, ‘all’ or ‘off’) enables reporter or ticker info in event (default: ‘off’)

  • options.coalesceRepeatedMeta (Boolean) decides wether to show or hide the reporter’s information in successive messages for a grouping effect. (default: false) (‘showEventMeta’ must be set to either ‘reporter’ or ‘all’ for this setting to have any effect) (hidden elements take this css class ‘ticker-event-item-meta-reporter-hidden’)

  • options.showEventSharing (Boolean) enables ticker events to have sharing buttons that will be visible on mouseover (default:false)

  • options.showLineup (Boolean) will display line up below the event rows (default: false)

  • options.trackingCallback (function(id, reason, type, foundContent)) will be triggered whenever the ticker made a request for content.

  • options.customAdCallback (function(id, callback(html, usePostscribe))) will be called to fill custom ad spots (default: undefined) This feature must be Enabled by Tickaroo
  • options.itemDOMPostProcessor (function(domItem)) will be triggered once for every feed item. Can be used to manipulate the HTML before it is inserted.

  • options.locale (String or undefined) force-set the embed language and skip language detection. Unless a value is set, a language will be detected from the browser settings. Currently, we support ‘en’ and ‘de’ for English and German. (default: undefined)

  • options.rooverlay (Object) Will provide the options object to the Rooverlay slideshow library, read more about the library options here.

  • options.showTeamIcons (Boolean) Will display team icons in the scoreboard if provided (team-image) (default: false)

  • options.showNavigation (‘off’ or ‘event_tag_filter’) Will display the specified navigation (default: ‘off’)

Return Value: EmbeddedTicker Object

The Tracking Callback

The tracking callback will be triggered whenever the ticker made a request for content. It has the following signature:

function trackingCallback(id, reason, type, foundContent)
  • id String The ID of the ticker
  • reason (one of [‘init’, ‘auto’, ‘user’]): Indicates why the request was made.
  • type (one of [‘init’, ‘refresh’, ‘more’, ‘update-pending’, ‘slideshow’]): Indicates what kind of content the request was for
  • foundContent (Integer): Number of items loaded

You can use this information to do analytics tracking or update the user interface if you decide to manage things yourself. Both reason and type will be set to init on startup as the ticker will load initial entries.

The Custom Ad Callback

This feature must be Enabled by Tickaroo

The custom ad callback will be triggered whenever the ticker wants to render an Ad that can be filled by the customer. It has the following signature:

function customAdCallback(id, callback);
  • id (String): The ID of the ticker
  • callback (function): A callback to call with the ad information

Tickaroo recognizes, that some ad frameworks need asynchronous processing to fill an add, therefore the function gets a callback that can be called asynchronously. It’s signature is:

function callback(html, usePostscribe)
  • html (String): The HTML to render in the ad spot
  • usePostscribe (Boolean): Wheather to use postscribe to insert the HTML (set to true if you use a legacy framework that needs document.write)

The EmbeddedTicker Object

This object allows you can manually control some behavior of the ticker. It provides the following methods:

  • refresh(): Checks for new content and updates the ticker. Will only check and not update if handleRefresh=’notify’. The tracking callback will be called with reason=user, type=refresh.
  • pendingItemsCount: Number of items loaded but not shown in the ticker right now. (Only valid with handleRefresh=’notify’)
  • updateWithPendingItems(): Updates the ticker with all pending items. (Only valid with handleRefresh=’notify’). Will call the tracking callback with reason=user, type=update-pending, foundContent=Number of updated items
  • destroy(): Removes the content from the DOM and does some cleanup. The ticker is unusable afterwards.
  • overrideOptions(options): will destroy the current ticker (or conference), then immediately create a similar one with the same options plus any passed options in the options param. returns the new ticker object
_tik(function() {
  window.myticker = Tickaroo.embedTicker({
    container: "#ticker",
    id: '58171cb9af5f1e8cb50a693a',
    reverseEvents: false,
    style: "v2"
  });
});
    
/*
somewhere else in your code (like a button click event)
IMPORTANT: please make sure to override any global variables 
containing the old ticker to avoid having 2 or more tickers in memory!
*/
window.myticker = window.myticker.overrideOptions({
  refreshInterval: 1000, // make the ticker updates faster
  reverseEvents: true    // and reverse it
});

The HTML Structure

When you embed a ticker, the following HTML structure is generated within your container to hold a ticker:

<div class="tickaroo-ticker">
  <div class="tickaroo-scoreboard-container">
  </div>

  <ul class="tickaroo-event-list">
  </ul>

  <span class="tickaroo-powered-by">powered by <a href="https://www.tickaroo.com" target="_blank">Tickaroo</a></span>
</div>

Notes:

  • tickaroo-scoreboard-container will only be generated on a sportscast with a scoreboard and handleScoreboard: “auto”
  • The tickaroo-powered-by element must remain visible as long as the ticker is visible

embedConference

Signature:

Tickaroo.embedConference(options)

Values for the options object are the same as embedTicker with exception of the id option which is not necessary.

Return Value: EmbeddedTicker Object

The Tracking Callback

Same as embedTicker Tracking Callback

The EmbeddedTicker Object

Same as embedTicker EmbeddedTicker Object

The HTML Structure

When you embed a ticker, the following HTML structure is generated within your container to hold a ticker:

<div class="tickaroo-ticker tickaroo-conference-ticker">
  <div class="tickaroo-scoreboard-container">
    <ul class="tickaroo-scoreboard-list">
      <li class="tickaroo-scoreboard-list-item"></li>
    </ul>
  </div>

  <ul class="tickaroo-event-list">
  </ul>

  <span class="tickaroo-powered-by">powered by <a href="https://www.tickaroo.com" target="_blank">Tickaroo</a></span>
</div>

embedIframeUrl

Embeds a Tickaroo iFrame Widget with variable size.

Signature

Tickaroo.embedIframeUrl(options)

Options are:

  • options.url (String, required): The URL to display within the frame.
  • options.autosize (Boolean, default: true) Automatically resize the iframe if the content supports it
  • options.width (String, default: Set to allow 100% in responsive manner) The CSS width to set for the frame
  • options.minWidth (String, default: Set to allow 100% in responsive manner) The CSS min-width to set for the frame
  • options.height (String, default: ‘320px’) The initial CSS height to set for the frame
  • options.skipInitialTracking (Boolean, default: false) Skip first tracking call if tracking is enabled

Example:

<div id="tickaroo-microlive">
</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?client_id=<client_id>',"_tik");

_tik(function() {
  window.microliveIframe = Tickaroo.embedIframeUrl({
    container: "#tickaroo-microlive",
    url: "//56332cf3e4b070c2dabdbc88.microlive.tickaroo.com/widgets/micro_live/gameday?tournament_id=565ec285e4b0ee00d29fa032&date=2015-12-16"
  });
});

</script>

handleWebEmbeds

Handles web embeds.

Signature:

Tickaroo.handleWebEmbeds(options)

Values for the options object:

  • options.container (String or Element) The element to use as a container (id or element) (required)
  • options.selector (String) The css selector to match elements that will be handled (required)
  • options.locale (String or undefined) force-set the embed language and skip language detection. Unless a value is set, a language will be detected from the browser settings. Currently, we support ‘en’ and ‘de’ for English and German. (default: undefined)

Example:

<div id="ticker">
  <div class="js_embed embed tickaroo-web-embed-twitter" data-tickaroo-web-embed-url="https://twitter.com/bikesport_mag/status/905706199919861760" data-tickaroo-web-embed-handeled="false">
  </div>
</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?client_id=<client_id>',"_tik");

_tik(function() {
  Tickaroo.handleWebEmbeds({container: document.getElementById('ticker'), selector: '.js_embed'});
});
</script>