Setting up content item previews

This article explains how to set up a preview for content items.

Introduction

Automatically generate preview links for a content item to allow editors to preview their content directly in Prepr. This way they can review content items in a front end before they are published.

Setting up preview URLs

You can allow content editors to preview a content item by setting up a preview URL. You can set up preview URLs for multiple environments like production, acceptance, test, and development. Preview URLs are defined for a specific model.

To add one or more preview URLs, follow the steps below.

  1. Go to the Schema tab and choose the model you want to update.
  2. Click the Settings button at the top of the model and click the Preview tab.
  3. Enter a name and the preview URL construct for this model. You can use {id} and {slug} variables for your construct. Example: https://example.com/{slug}.

Add preview URLs

You can add an unlimited number of preview URLs to the model. The first name you set will be shown as default in the content items of this model.

If you loaded demo data in your environment then you'll notice a Preview URL on the Article and Page models. This URL renders the content item in the Prepr Example site.

Showing or hiding the preview button

There is a model setting that allows you to hide the preview button in the content item page. This can be useful when content editors don't need to preview content items linked to this model, for example, for app configuration info.

To hide the preview button in a content item, follow the steps below:

  1. Go to the Schema tab and choose the model you want to update.
  2. Click the Settings button at the top of the model and click the Preview tab.
  3. Disable the Show preview toggle.

show preview toggle

You cannot disable this option if a preview URL is filled in.

Showing content items that are not yet published

Accessing unpublished content can be useful for previewing how a new content item will look before making it available to everybody. The GraphQL API gives you control over whether you want to access published or unpublished content items in the front end.

To show content items that are not yet published in the front end, use the GraphQL Preview access token created by Prepr during the initial environment setup. With this access token, you can retrieve content items in all available workflow stages, including To do, In progress, Review, Done, and Published. The content editor can then review them and make any necessary changes before publishing.

Alternatively, you can create a new access token yourself and define token permissions according to your specific needs. Read more about GraphQL permissions.

Vercel Content Link (Beta)

Prepr supports Vercel Content Link. This feature allows content editors to edit website content directly from the preview website.

By enabling Edit Mode via the toolbar, users can simply hover over elements to reveal links that open the corresponding item for quick updates — no developer needed.

marketing site example

Vercel Requirement
Only works with sites hosted on Vercel, requiring a Pro or Enterprise Vercel plan.

To request access to the Beta, please open a support ticket (opens in a new tab) with our team.

Was this article helpful?

We’d love to learn from your feedback