Introduction

There are many factors that influence the look and feel of app or web content when it is displayed. For example, if an image size or aspect ratio is not appropriate for the space it is intended to occupy, the published article may not look as it should or may not display at all. Cortex provides content creators with the ability to preview content externally, in advance of publication, in order to be sure that, when published, the content will display as intended.

This document explains how to implement the preview feature.

How to preview an article or page

Note the preview feature explained here requires the availability of a dedicated webpage on which the preview can be displayed. You need to inform your Cortex administrator of the location of the dedicated webpage in order for the required configuration to take place for previews to display.

Once the dedicated preview feature is configured by the Cortex team, a single-click Preview button will appear on the article edit page, as highlighted in the screenshot, below.

Implementing the preview feature

When the Cortex user clicks the Preview button, they will open a URL in the following format.

{your-PreviewPage-URL}?articleId={articleId}&secret={previewSecret}

In which:
{your-PreviewPage-URL} is the dedicated webpage, set up by you or your developers, on which previews can be rendered.

{articleId} is the identifier of the individual article, and used in the preview API call.

{previewSecret} is the secret currently associated to the individual article. It, too, is used in the preview API call.

The API request to view the article uses the secret in its construction, along with the article ID, in order to make previews difficult to find without administrator access to Cortex. Additionally, if there are any concerns that access has been compromised, the secret can be regenerated from within the content editor interface.

The API request structure is like this:

💻

GET {environment-id}/v2/articles/{articleId}/preview?clientId={clientId}&secret={previewSecret}

In which:

{environment-id} is the URL for stage (test) or production (live).

• Stage: https://stage-article-cms.cortextech.io
• Production: https://article-cms.cortextech.io
• Production (US environment): https://article-cms.cortextech.us

{articleId} is the article’s unique ID, which can be found in the preview URL opened by the Cortex user after clicking the Preview button.

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

{previewSecret} is the secret which can be found in the preview URL opened by the Cortex user after clicking the Preview button.

For example:

💻

GET https://article-cms.cortextech.io/v2/articles/ca0e730e-b99a-4eb5-bf95-9ecca4077b4a/preview?clientId=DEMO&secret=2ec536c9-6c0e-4073-9e10-4a2a5cd76ada