Cortex Live Blog

Cortex Live Blog is a web component.

Registering the custom element

Firstly, the following JavaScript needs to be loaded in order to register the custom element:

<script src="https://live-blog.cortextech.io/index.js"></script>

Once the script is loaded, the custom element <cortex-live-blog> will be available.

Attributes

The <cortex-live-blog> custom element supports the following attributes:

id

Required ID of the live blog.

client-id

Required ID of the client.

stage

Optional Boolean, if set to true, the web component will talk to the Cortex stage backend.

server

Optional string. If the live blog was produced in the Cortex USA environment, you need to set server to us.

access-token

Optional string for Cortex JWT token. It is advised to not use this attribute to pass in the token on the web as it will be observable in the DOM tree.

access-token-cookie-name

Deprecated as it is advised to not store the token in a cookie, but it is implemented for backward compatibility.

Optional, when provided, it will be used to get token from cookie.

access-token-callback-name

Optional string, when provided, it will be used to get the token from the specified callback function. It is expected that this function is a property of globalThis and will return the token when called. Supports nested properties, e.g. globalThis.myObject.myFunction.

Usage

<cortex-live-blog id="LIVE_BLOG_ID" client-id="CLIENT_ID"></cortex-live-blog>

You will be given a client ID at your initial account setup.

You can get the live blog ID from three places:

• The Cortex platform
• The data provided by the live blog block in an article
• The live blog API

Usage example:

<cortex-live-blog id="673b6fff943c849368e4adcc" client-id="DEMO"></cortex-live-blog>

If using the Cortex staging environment

If the live blog was produced in the Cortex staging environment, stage must be set:

<cortex-live-blog id="LIVE_BLOG_ID" client-id="CLIENT_ID" stage></cortex-live-blog>

Adding an access token

To enable some features, the access token needs to be passed into the live blog embed. Those features include:

• If a form or poll is included in the live blog, mapping responses to a user in the Fan Data Platform
• If a form is included, pre-filling of account detail and preference questions, and hiding of account detail questions.
• If a promo asset is included in the live blog, any targeting which relies on the access token, including audience-based rules.

While it is possible to pass in the token directly or pass in a cookie name as described in the above Attributes section. It is advised to use access-token-callback-name instead:

<script>
  globalThis.myFunctionToGetToken = (context) => {
    return 'ACCESS_TOKEN'
  }
</script>
<cortex-live-blog
  id="LIVE_BLOG_ID"
  client-id="CLIENT_ID"
  access-token-callback-name="myFunctionToGetToken"
></cortex-live-blog>

Global configuration

You can configure the web component globally by setting properties on the globalThis.cortextech object.

globalThis.cortextech = {
  clientId: 'CLIENT_ID',
  accessTokenCallbackName: 'cortextech.myFunctionToGetToken',
  myFunctionToGetToken: (context) => {
    return 'ACCESS_TOKEN'
  }
}

Values set directly on the custom element will take precedence over global configuration. The following properties are available to be set globally:

• clientId
• server
• accessTokenCookieName
• accessTokenCallbackName

Obtaining the live blog ID

Obtaining the live blog ID via the Cortex platform

The simplest way to find the live blog ID is within the Cortex platform.

1. Open Cortex and on the left-hand side, navigate to Live Blog.
2. Find the live blog you want to embed from the list of live blogs in the main panel. On the far right-hand end of that row, click the three vertical dots. A menu is displayed. Select View embed code.
3. A pop-up is displayed, containing the entire embed code for this live blog. The live blog ID is the first entry.

Note that this method returns the entire embed code, including the live blog ID and an appropriate environment declaration and client ID for this live blog.

Obtaining the live blog ID via an article

When a live blog block is added to an article in the Content section of the Cortex platform, the JSON for that article will include the live blog ID as the sourceSystemId.

For example, in the JSON for a demo article you will find a block that looks like this:

{
  id: "731dbf59-4468-470e-bd00-ff17109abd81",
  contentType: "LIVE_BLOG",
  sourceSystemId: "62a1ce0d7205e089e642051c"
}

Returning the Live Blog ID: 62a1ce0d7205e089e642051c.

The website or app can then generate the embed code using this live blog ID.

Note that this method means it is not necessary for a content author to manually add the embed code each time they want a live blog to appear in an article, they just have to add the live blog block. This is recommended where a live blog might be added to an article or page created in Cortex.

Obtaining the live blog ID via API

All live blog data, including live blog IDs, can be obtained via API from the following API call.

💻

GET {environment-id}/v1/clients/{clientId}/live-blogs?size={size}&page={page}&sort={sortField}&tags={tags}&linkedIds={linkedIds}

In which:

{environment-id} is the URL shown below, depending on environment used.

• Standard environment: https://live-blogs-stage.cortextech.io
• US environment: https://live-blogs.cortextech.us

{clientId} is your client ID, assigned during onboarding.

{page} is the index of the page to return. The default is page=0, meaning only one page - the first page - should be returned.

{size} is the number of live blogs to be included on each page. So, effectively it defines the size of the result set for paginated requests.

{sortField} is a string representing the sort options. Putting a '-' in front of the parameter will sort in descending order. In practical terms, the most commonly used is -publishDate.

{tags} is a comma-delimited list of tags. Adding this returns only the live blogs with those tags.

{linkedIds} is a delimited list of data providers and their internal data IDs. The semicolon is the delimiter. The format is SOURCE:ID,ID,ID;SOURCE:ID. For example OPTA_FOOTBALL_PLAYER:3992,3492;OPTA_FOOTBALL_TEAM:t43

This solution is recommended for use cases such as match centres, where the live blog should appear automatically based on the addition of a linked ID for the corresponding fixture.

Live indicator

The live blog embed will include a ‘live’ indicator if the time is after the go-live time, and before the closing time (both of which are parameters set in Cortex).

There may also be a need to show a live indicator outside of the live blog product, such as in the page heading, or within a list of articles; for example, where there is a list of articles and one of them includes a live blog that is currently live, you might want to show a live indicator alongside that one article.

To support this, Cortex will automatically add a tag: live to any article that includes a live blog block, and the corresponding live blog is currently live.

Using this, a front-end website or app could display a live indicator anywhere on an article, outside of the live blog product.