Previewing draft content

This guide explains how to integrate the CMS Content Preview feature into your frontend application. This allows authors to preview draft or unpublished articles as they are being written.

How Content Preview Works

When an editor clicks “Preview” in the CMS, the system opens the final URL of the content in your frontend, appending two query string parameters:

• versionId: ID of the specific version of the content being previewed.
• key: A unique, secure key that allows temporary access to the preview version of the content. This key expires after 1 hour.

Example Preview URL:

https://www.mydomain.com/article/1234-slug?versionId=12&key=abcdef

Frontend Setup Instructions

1. Handle Query Parameters

Your frontend must:

• Detect the versionId and key query parameters in the URL.
• If present, fetch the preview content instead of the published content.

2. Fetch Preview Content from API

Use the CMS API to retrieve the preview version of the content:

GET /content/{id}/preview/{versionId}/{key}

• Replace {id}, {versionId}, and {key} with the actual values from the query parameters.
• Refer to the API documentation for full details on authentication, error handling, and response structure.

Example Request:

GET /content/1234/preview/12/abcdef

3. Render Preview Content

Render the previewed content just like published content. This allows the editor to see an accurate preview of the draft.

---

Frame Ancestor Configuration

The CMS will load your site within an iframe for previews.
Ensure your frontend allows the CMS domain as a frame ancestor via Content Security Policy (CSP) settings.

Example:

frame-ancestors 'self' managecms.domain.com;

• Whitelist your CMS domain (managecms.domain.com) to enable iframe embedding for previews.
• Avoid disclosing the CMS’s URL publicly to users. Only respond with this header for valid keys.

For further details, please refer to the CMS API Documentation.