AMP Reference

Use the following code to embed a ticker within your amp page.

<html>
  <head>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  </head>
  <body>
    <amp-iframe 
      width="50"
      height="200"
      layout="responsive"
      sandbox="allow-scripts allow-same-origin allow-popups"
      allowfullscreen
      resizable
      src="https://cdn.tickaroo.com/embed/amp.html?client_id=YOURCLIENTID&id=YOURTICKERID&style=v2">
      <amp-img layout="fixed-height" height="100px" width="auto" 
        src="https://cdn.tickaroo.com/embed/placeholder.png" placeholder>
      </amp-img>
      <div overflow="">Show Liveblog</div>    
    </amp-iframe>
  </body>
</html>

YOU NEED TO REPLACE “YOURCLIENTID” and “YOURTICKERID” WITH YOUR ACTUAL IDS PROVIDED BY TICKAROO!

The src of the amp-iframe can be customized with the following options:

  • clientId (ObjectID) The Client ID provided by Tickaroo

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

  • 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)

  • 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.

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

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

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

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

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

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

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

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

  • 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’)

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

  • 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’)

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

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

  • 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)

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

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

Combining with prefetch

To combine prefetch and amp you need to use this amp-iframe.

Example:

<amp-iframe 
  width="50"
  height="200"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  allowfullscreen
  resizable
  src="https://cdn.tickaroo.com/embed/amp.html?client_id=YOURCLIENTID&id=YOURTICKERID&style=v2">
  <div id="ticker" placeholder>
    <!-- Insert prefetch content from 
     https://www.tickaroo.com/embed/ticker.html?id=540433f6a0b3a0c594d85420&limit=50&style=v2 -->
  </div>
  <div overflow="">Show Liveblog</div>
</amp-iframe>

Known limitations

  • showEventSharing the sharing itself works with the limitation that the automatic scrolling to the shared event does not work
  • The iframe resizes automatically. If this does not work make sure to set proper initial width and height values.