Liveblog Teaser – SEO and Server-Side Rendering

Introduction

The Liveblog Teaser widget supports server-side rendering (SSR) via prefetch APIs. Since the teaser displays a static snapshot of liveblog content (it does not update after the initial load), prefetching is especially effective — the server-rendered HTML is the final output and the client only needs to hydrate it for interactivity.

This results in:

  • Faster time to first paint – users see teaser content immediately without waiting for JavaScript to load and fetch data.
  • Better SEO – search engines can index the pre-rendered teaser content.
  • Reduced Cumulative Layout Shift (CLS) – the content is already in place when the page loads.
The Server Side Fetch API is not part of the default Tickaroo Live Blog plan. Please contact our support if you want to use it.

Available Prefetch APIs

1. Fetch Teaser HTML Only

GET https://cdn.tickaroo.com/api/embed/v4/prefetch/liveblog-teaser.html

Query Parameters:

  • client_id (String, required) – Your Client ID. See Authentication section below for where to find it.
  • liveblogId (String, required) – The Liveblog ID.
  • themeId (String, optional) – The Theme ID for visual configuration.
  • includeLiveblogUrl (String, optional) – Pass the origin of your page (e.g. https://www.example.com) to resolve the liveblog URL for linking.
  • Any other Liveblog Teaser Tag Parameters.

Example Request:

GET https://cdn.tickaroo.com/api/embed/v4/prefetch/liveblog-teaser.html?client_id=YOUR_CLIENT_ID&liveblogId=YOUR_LIVEBLOG_ID&themeId=YOUR_THEME_ID

Response: Content-Type: text/html; charset=utf-8

<tickaroo-liveblog-teaser liveblogId="..." clientId="..." themeId="..." initialData="...">
  <div> ... </div>
</tickaroo-liveblog-teaser>

2. Fetch Teaser HTML as JSON

GET https://cdn.tickaroo.com/api/embed/v4/prefetch/liveblog-teaser.json

Query Parameters:

  • Same as the HTML endpoint above.

Example Request:

GET https://cdn.tickaroo.com/api/embed/v4/prefetch/liveblog-teaser.json?client_id=YOUR_CLIENT_ID&liveblogId=YOUR_LIVEBLOG_ID&themeId=YOUR_THEME_ID

Response: Content-Type: application/json; charset=utf-8

{
  "html": "<tickaroo-liveblog-teaser ...>...</tickaroo-liveblog-teaser>"
}

Example Page Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My Page with Liveblog Teaser</title>

    <!-- Tickaroo Embed Script -->
    <script async src="https://cdn.tickaroo.com/webng/embedjs/tik4.js"></script>

    <!-- Optional: Tickaroo Stylesheet to prevent flash of unstyled content -->
    <link rel="stylesheet" href="https://cdn.tickaroo.com/webng/embedjs/tik4.css">
  </head>
  <body>
    <!-- Container for prefetched teaser HTML -->
    <div id="teaser"></div>

    <script>
      var params = new URLSearchParams({
        client_id: "YOUR_CLIENT_ID",
        liveblogId: "YOUR_LIVEBLOG_ID",
        themeId: "YOUR_THEME_ID"
      });
      fetch("https://cdn.tickaroo.com/api/embed/v4/prefetch/liveblog-teaser.html?" + params.toString())
        .then(function(response) { return response.text(); })
        .then(function(html) { document.getElementById("teaser").innerHTML = html; });
    </script>
  </body>
</html>

Authentication

Important: All Prefetch API requests require authentication using the client_id query parameter. Use the client_id provided in your Tickaroo backend.

Finding Your Client ID

The client_id is required for all API requests. You can find it in two locations:

  1. Global Settings:
    • Navigate to Settings → Integration in your Tickaroo backend
    • Your Client ID is displayed in the Integration settings
  2. Liveblog Editor:
    • Open the specific liveblog in your Tickaroo backend
    • Go to the “Liveblog Integration” tab and click “Generate Widget Code”
    • The Client ID is shown in the generated widget code