Content Preview

Content Preview lets you see how a draft page will look on your actual storefront before making it live.

How it works

Your storefront is configured with a preview token (_pt_) that grants access to draft content
When preview mode is active, the storefront uses the preview token instead of the delivery token
The delivery API returns the latest draft version of the page, regardless of publish status

Delivery vs Preview tokens

Token type	Content returned	Use case
Delivery (`_dt_`)	Published version only	Production
Preview (`_pt_`)	Latest draft (including unpublished)	Preview / staging

Both tokens are created when you create an API key in Settings → API Keys. See API Keys for details.

Storefront configuration

Set both tokens as environment variables in your storefront middleware:

ALOKAI_CMS_DELIVERY_TOKEN=myorg_dt_abc123...   # production content
ALOKAI_CMS_PREVIEW_TOKEN=myorg_pt_def456...    # draft content

The storefront SDK automatically selects the correct token based on whether preview mode is active.

Setting up a preview URL

Go to Settings → Preview URLs and click New Preview URL. Enter:

Name — Label for this preview URL
URL — Your storefront’s preview endpoint, e.g. https://storefront.example.com/preview
Default — Whether this is the default preview URL for the space

Using preview in the editor

Click the Preview button in the page editor toolbar. The editor panel collapses and the page renders in a full-width iframe using the configured preview URL.

The preview reflects your current draft — unsaved changes are not included. Save first to see the latest edits.

Storefront iframe integration

When editing in the CMS, the editor pushes live changes to the storefront iframe via postMessage:

window.addEventListener("message", (event) => {
  if (event.data.type === "alokon:preview") {
    const zones = event.data.page;
    // zones is an object like:
    // { componentsAboveFold: [...], componentsBelowFold: [...] }
  }
});