Embedding a live blog

A basic implementation of an individual live blog into a webpage or app can be achieved by adding the embed code below.

<cortex-live-blog id="{live-blog-ID}" client-id="{client-ID}" server="{server}" />
<script src="https://live-blog.cortextech.io/index.js"></script>

In which:

{live-blog-ID} needs to be replaced with the blog ID for the specific blog you wish to run. You can get the blog ID from three places:

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

More on each of these methods is detailed below.

{client-id} needs to be replaced with your organisation’s client ID. This will have been assigned to you as part of your initial account setup.

{server} needs to be replaced with either us if the live blog was produced in the Cortex USA environment, or standard if the live blog was produced in the Cortex standard environment. If server="{server}" is omitted, the default is standard

For example:

<cortex-live-blog id="673b6fff943c849368e4adcc" client-id="DEMO" server="standard"></cortex-live-blog>
<script src="https://live-blog.cortextech.io/index.js"></script>

If using the Cortex staging environment:

If the live blog was produced in the Cortex staging environment, stage must be included within <cortex-live-blog>, like so:

<cortex-live-blog id="{live-blog-ID}" client-id="{client-ID}" server="{server}" stage />
<script src="https://live-blog.cortextech.io/index.js"></script>

Adding an access token

To facilitate personalised promo assets in the live blog, an access token needs to be passed in to the live blog embed. This can be done by adding access-token="{token}", as shown below, with {token} being replaced by the user’s access token.

<cortex-live-blog id="{live-blog-ID}" client-id="{client-ID}" access-token="{token}" />`  
<script src="https://live-blog.cortextech.io/index.js"></script>

The system also supports access-token-cookie-name and access-token-callback-name as alternatives to directly passing in an access-token, by referencing a cookie or callback from which the token can be obtained.

For example:

<cortex-live-blog id="{live-blog-ID}" client-id="{client-ID}" access-token-cookie-name="{cookie-name}" />`  
<script src="https://live-blog.cortextech.io/index.js"></script>

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 for stage (test) or production (live).

• Stage: https://live-blogs.cortextech.io
• Production: https://live-blogs-stage.cortextech.io
• Production (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.