How to Set Up Composer Preview for PageBuilder or Headlessly

A resolver must capture the preview URL, so it’s best to choose something easy to catch. Additionally, we recommend you include the Story ID and the website.

published=false: allows you to view unpublished stories.

For this step, you can either:

We’re going to go with option #1 and create a new content source.

In PageBuilder Engine, you create this in code. For this example the content source would have to call this API endpoint: /content/v4/?_id=${id}&_website=${arc-site}&published=false

Notice in the following example that the content source intends to call the Content API unpublished endpoint if it receives a story ID:

_ignoreCache=true: tells PageBuilder to ignore the cache for the current URI, which renders the latest revision for the story.

This documentation uses this as an example: /pf/preview/{_id}/?_website={canonical_website}&published=false&_ignoreCache=true

Enter your preview URL in Composer > Settings.

const pattern = key => {
  const { website_url, id } = key;
  
  if(website_url)
    return `/content/v4/?website=${website}&website_url=${website_url}`;

  if(!website_url && id)
    return `/content/v4/?website=${website}&_id=${id}&published=false`;
};

const resolve = key => pattern(key);

const params = {
  website_url: "text",
  website: 'site',
  id: "text"
};

const source = {
  resolve,
  params,
};

export default source;

You must have a page resolver to map the incoming URL so that it matches the setting value from Composer. This is not an automated integration; it is manually configured.

Using the previous example, the resolver would look like this. Your “Default Template” and “Content Source” are specific to your setup. We recommend you use the same article template that you use for published stories.

Within Composer Settings, use the section for “PageBuilder”, including preview URL and preview domain.

Use the preview URL field to set your own custom URL.

Here, instead of setting up a relative URL for PageBuilder, you can create your own URL pattern to direct to an external site, for example:

http://content.yoursite.com/preview/{_id}/?published=false&ignoreCache=true

To support live preview of recently edited content, your headless backend must make non-cached requests to Content API using the ID passed in. For example, if you received the ID ABCDEFGHIKLMNOPQRSTUVWXYZ, you would make a request to:

https://api.{orgname}.arcpublishing.com/content/v4/_id=ABCDEFGHIKLMNOPQRSTUVWXYZ&published=false&website=mywebsite

The Preview button within the story then opens this URL in a new tab when users click the Preview icon, fetching the story by story ID from Content API.

Your organization must create a page at this endpoint to show the given content within your site’s experience. As long as you are able to fetch the content from Content API and turn that ANS document into a rendered article, you can do this outside of PageBuilder. The page you create should have the following attributes:

If you cannot support preview, you could instead consider creating a custom message on the preview URL endpoint to explain to your authors how to handle the workflow for reviewing stories prior to publication.