Setting up Content Previews

As previously described, LexasCMS provides a visual in-app preview environment where content teams can easily preview past/present/upcoming content changes in the context of specific audiences.

How does it work?

Content previews work by loading one of your configured preview environments into a frame within the LexasCMS application.

When loading your preview environment, LexasCMS passes a pre-encoded request context to your application via the lexascmsRequestContext query parameter.

Your application should accept this parameter and pass its value along with any requests to the Content Delivery API.

Getting started

Before you can begin using content previews, you must first create an API key with permission to retrieve preview content, and then complete the following steps:

1. Configure one or more preview environments
2. Install the LexasCMS code snippet
3. Using the preview context

1. Configure a preview environment

To configure a new preview environment, please follow the below steps:

1. Navigate to the Settings > Previews section of your spaces control panel
2. Click the Create Preview button
3. Enter a name for your new preview environment
4. Enter the URL for your preview environment
5. Click Create Preview

2. Install LexasCMS code snippet

In order for content previews to work correctly, you must install the below code snippet on every page of your application, including 404 pages.

<script type="text/javascript" defer>(function(e,t){void 0!==e.addEventListener&&e.addEventListener("load",function(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script")
n.type="text/javascript",n.async=!0,n.src="https://static.lexascms.com/lexascms.js",e.parentNode.insertBefore(n,e)},!1)})(window,document)</script>

3. Use the preview context when provided

After creating your preview environment, you’ll need to update your application to accept and use the lexascmsRequestContext query parameter when provided.

As described earlier, this parameter contains a pre-encoded request context which you should pass to any requests to the Content Delivery API as described in either the request context documentation, or the documentation for your chosen integration method.

Navigating your application

If you would like to retain the configured preview context while also navigating around your application, you should capture the value of the lexascmsRequestContext parameter and then store it somewhere that it can be later accessed (e.g. localStorage or your application store).

Request context updates

When the preview context is updated, LexasCMS will automatically reload the current page, updating the value of the lexascmsRequestContext parameter with the new request context. Your application should accept and begin using this new value.