Liveblog Tag Parameters

Required Parameters

These are the most basic parameters that must always be specified

clientId: string

ID of the API Client to use. Can be found in Pro settings.

liveblogId: string

ID of the Liveblog to Embed. Can be found in Pro.

Theme

themeId: string

ID of the theme to use. Create themes in pro (Settings -> Widgets) to preconfigure display options and colors.

Display Options

All display options are optional. If specified they override options set in the selected theme. If no theme is specified the default value is used as described.

locale: "" (default) | "de" | "en" | "en-gb"

Specify the language to use for buttons and date formats. Omitting or empty string try will to autodetect using html tag and navigator language

refresh: "notify" (default) | "auto" | "off"

Should the liveblog poll for new entries.

  • notify will poll and show a button when new entries are available
  • auto` will poll and update the liveblog directly
  • off wil not poll

This option has no effect in AMP

sort: "desc" (default) | "asc"

Order of liveblog entries. Default is newest at the top

sortControls: "off" (default) | "show"

Controls the display of sort order buttons in the liveblog widget.

  • “off”: No sort controls are displayed. The liveblog will use the sort order specified by the sort option.
  • “show”: Displays sort buttons that allow users to change the sort order dynamically between “Latest” (newest first) and “Oldest” (oldest first).

The sort option determines the initial sort order of the liveblog. When sortControls is set to “show”, users can override this initial setting by clicking the sort buttons.

limit: number (default = 15)

How many liveblog entries to display (and to load for pagination)

deepLinkLimit: number (default = 50))

If a deep link is triggered: How many liveblog entries down will be loaded via ‘more’ mechanism before deep linking logic is triggered

See Deep Linking for an explanation of this parameter

deepLinkDepth: number (default = 0))

How many liveblog entries to display above a post that is navigated to by deep link

See Deep Linking for an explanation of this parameter

webEmbedDefaultConstraint: 'consent' (default) | 'full' | 'simple' | 'hide' | 'disabled'

See Consent Handling for an explanation of this parameter

This option has no effect in AMP

webEmbedConstraints: Record<string, 'consent' (default) | 'full' | 'simple' | 'hide' | 'disabled'>`

See Consent Handling for an explanation of this parameter

This option has no effect in AMP

customerConsent: boolean (default: false)

See Consent Handling for an explanation of this parameter

This option has no effect in AMP

useSlideshow: boolean (default = true)

If true images in the liveblog will display a bigger version in an overlay if clicked.

sharing: "off" (default) | "compact" | "expanded"

Show sharing buttons on every liveblog entry

  • “compact” will display a button hiding the sharing options
  • “expanded” will always show all the sharing options
  • “off” will not display any sharing options
layout: "default" (default) | "timeline" | "masonry"`

Select the main layout for your liveblog.

layoutAuthorPosition: "top" (default) | "bottomLeft" | "bottomRight" | "off"

Specify where the author of a liveblog message should be shown

layoutEventTagPosition: "top" (default) | "bottom" | "off"

Specify where the tags of a liveblog message should be shown

colorScheme: "light" (default) | "dark" | "auto"

This controls support for dark mode.

  • “light” force light mode
  • “dark” force dark mode
  • “auto” automatically select based on the users settings
relativeLinkBaseUrl: string (default "")

The base URL that should be used to construct relative links in the liveblog content. This is useful when the same liveblog is embedded on different platforms (web, mobile) and links need to point to different domains.

styleUseCards: boolean (default = false)

Visually splits up liveblog entries into cards

styleInvertTime: boolean (default = false)

Invert the background and text colors of the liveblog entry post date and time (light <-> dark)

styleInvertHighlightEvents: boolean (default = false)

Invert the background and text colors of a highlight liveblog entry post (light <-> dark)

styleInvertStickyEvents: boolean (default = false)

Invert the background and text colors of a sticky liveblog entry post (light <-> dark)

styleInvertSummaryEvents: boolean (default = false)

Invert the background and text colors of a summary liveblog entry post (light <-> dark)

commentsMode: "default" (default) | "disabled"

This controls how comments are displayed:

  • “default”: Display highlight comments inline and everything else in an overlay
  • “disabled”: Display no comments at all
automaticSummary: "chapters" (default) | "game-summary" | "highlights" | "highlights-slider" | "none"

This controls how which type of automatic summary should be displayed above the liveblog

  • “chapters”: Displays a list of chapter headlines
  • “game-summary”: Displays a summary of sport liveblog if available (e.g. list of goals for soccer)
  • “highlights”: Displays a list of highlight posts. Only posts containing a rich text content block will be shown
  • “highlights-slider”: Displays a horizontal slideshow of highlight posts. Only posts containing a rich text content block will be shown
  • “none”: No summary will be displayed
automaticSummaryHighlightsLimit: number (min = 1, max = 25, default = 25)

This controls the number of highlight items that are shown in the automatic summary. Only has an effect if “automaticSummary” is set to “highlights” or “highlights-slider”.

useCookies: "all" (default) | "functional" |"none"

This controls what cookie purposes are used:

  • “all”: Will use cookies for functional and analytics purposes
  • “functional”: Will only use cookies fur functional purposes
  • “none”: Will not use cookies

Color Options

All color options are optional. They will set CSS variables also affecting custom CSS styles. Colors need to be specified in CSS Hex Format “#xxxxxx”. For more Information on colors and CSS variables please refer to Styling.

stylePrimaryColor: string with format #xxxxxx

Set CSS Variable --t4-primary--l

stylePrimaryColorDark: string with format #xxxxxx

Set CSS Variable --t4-primary--d

styleSecondaryColor: string with format #xxxxxx

Set CSS Variable --t4-secondary--l

styleSecondaryColorDark: string with format #xxxxxx

Set CSS Variable --t4-secondary--d

styleTextColor: string with format #xxxxxx

Set CSS Variable --t4-txt--l

styleTextColorDark: string with format #xxxxxx

Set CSS Variable --t4-txt--d

styleTextMutedColor: string with format #xxxxxx

Set CSS Variable --t4-muted--l

styleTextMutedColorDark: string with format #xxxxxx

Set CSS Variable --t4-muted--d

styleBgColor: string with format #xxxxxx

Set CSS Variable --t4-bg--l

styleBgColorDark: string with format #xxxxxx

set --t4-bg--d

styleEventHighlightBgColor: string with format #xxxxxx

Set CSS Variable --t4-ev-h-bg--l

styleEventHighlightBgColorDark: string with format #xxxxxx

Set CSS Variable --t4-ev-h-bg--d

styleEventStickyBgColor: string with format #xxxxxx

Set CSS Variable --t4-ev-p-bg--l

styleEventStickyBgColorDark: string with format #xxxxxx

Set CSS Variable --t4-ev-p-bg--d

styleEventSummaryBgColor: string with format #xxxxxx

Set CSS Variable --t4-ev-s-bg--l

styleEventSummaryBgColorDark: string with format #xxxxxx

Set CSS Variable --t4-ev-s-bg--d