Navigation Portal

The Navigation Portal feature allows you to take navigation parts out of the liveblog and place them elsewhere on your page. This is useful when you want to create a custom layout where navigation elements appear in different locations than the main liveblog content.

Getting Started

To use the Navigation Portal feature, you need to:

  1. Include the Tickaroo script in your page head (as with any Liveblog embed) 
    <script async src="https://cdn.tickaroo.com/webng/embedjs/tik4.js"></script>
  2. Add the main liveblog embed to your page 
    <tickaroo-liveblog liveblogId="YOUR_LIVEBLOG_ID" clientId="YOUR_CLIENT_ID"></tickaroo-liveblog>
  3. Add one or more portal components where you want the navigation elements to appear 
    <tickaroo-liveblog-portal liveblogId="YOUR_LIVEBLOG_ID" type="automaticSummary"></tickaroo-liveblog-portal>

Portal Types

The Navigation Portal supports different types of navigation elements:

type: "automaticSummary" | "eventTagNavigation"
  • automaticSummary: Displays the automatic summary navigation that is normally shown at the top of the liveblog
  • eventTagNavigation: Displays the event tag navigation that is normally shown at the top of the liveblog

Parameters

liveblogId: string (required)

ID of the Liveblog to connect to. Must match the ID used in the main liveblog embed.

type: string (required)

Type of navigation element to display. See “Portal Types” section above.

media: string (optional)

CSS media query that determines when the portal should be active. If the media query doesn’t match, the navigation will be shown in its default location within the liveblog.

Examples

Basic Example

<!-- Main liveblog embed -->
<tickaroo-liveblog liveblogId="672de81ace5e28f0ee4cecb1" clientId="YOUR_CLIENT_ID"></tickaroo-liveblog>

<!-- Automatic summary portal -->
<tickaroo-liveblog-portal liveblogId="672de81ace5e28f0ee4cecb1" type="automaticSummary"></tickaroo-liveblog-portal>

With Media Query

<!-- Main liveblog embed -->
<tickaroo-liveblog liveblogId="672de81ace5e28f0ee4cecb1" clientId="YOUR_CLIENT_ID"></tickaroo-liveblog>

<!-- Event tag navigation portal that only appears on desktop -->
<tickaroo-liveblog-portal liveblogId="672de81ace5e28f0ee4cecb1" type="eventTagNavigation" media="(min-width: 768px)"></tickaroo-liveblog-portal>

Multiple Portals

You can use multiple portals of the same type with different media queries to create responsive layouts:

<!-- Main liveblog embed -->
<tickaroo-liveblog liveblogId="672de81ace5e28f0ee4cecb1" clientId="YOUR_CLIENT_ID"></tickaroo-liveblog>

<!-- Automatic summary portal for desktop -->
<tickaroo-liveblog-portal liveblogId="672de81ace5e28f0ee4cecb1" type="automaticSummary" media="(min-width: 768px)"></tickaroo-liveblog-portal>

<!-- Event tag navigation portal for desktop -->
<tickaroo-liveblog-portal liveblogId="672de81ace5e28f0ee4cecb1" type="eventTagNavigation" media="(min-width: 768px)"></tickaroo-liveblog-portal>

Fallback Behavior

If no matching portal exists (either because there’s no portal of that type or because none of the media queries match), the navigation element will be rendered in its default location within the liveblog.