AMP iFrame

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.

Using an AMP iFrame is an easy way to integrate a liveblog into your AMP Page.

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/tik3.html?client_id=YOURCLIENTID&id=YOURLIVEBLOGID">
      <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)

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

  • deepLinkLimit (Integer) The number of items to fetch over limit in case of a event deep link (default: 0, range: 0-1000)

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

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

  • 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 (‘reporter’ or ‘off’) enables reporter or ticker info in event (default: ‘reporter’)

  • coalesceRepeatedMeta (Boolean) decides wether to show or hide the reporter’s information in successive messages for a grouping effect. (default: true) (‘showEventMeta’ must be set to ‘reporter’ 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)

  • imageWidth (Number) image width (px) in events (default: 480)

  • 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’, ‘en-GB’ and ‘de’ for English (US), English (GB) 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’)

  • whitelistedScoreboardAffiliations (Array or String) Hides the scoreboard meta information above the team names and shows only the mentioned types of affiliations. E.g.: ["Tik::ApiModel::LiveRef"] will only show the sportstype of the ticker “Basketball”. (default: undefined)

  • blacklistedScoreboardAffiliations (Array or String) Same as whitelistedScoreboardAffiliations but reverse. If whitelistedScoreboardAffiliations is set, blacklistedScoreboardAffiliations option is ignored. (default: undefined)

SEO

Since the integrated iFrame is not true AMP content this will impact your SEO ranking. For a better SEO experience please use the AMP prefetch API.

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.