The Prismic preview allows editors to preview updates without having to publish their changes. Preview works for changes on individual documents as well as for releases.

The preview also allows editors to share those non-public changes with non-Prismic users. This is useful if you want to share early access to content or if you're looking for a stakeholder's validation.

In this article we will show you how to configure and share a preview.

1 - Configure your preview domain

From your repository's settings, you can set up one or more websites where content can be previewed. This allows you to preview on a production server, staging server, development server, etc. 

To set up a new preview for your repository, navigate to Settings / Previews. 

Here you can add a new preview site by entering the preview Site Name, Domain, and optional Link Resolver route. 

Once it's done, when an editor clicks on the preview button he will be redirected to the page domain that you entered in the settings. 

2 - Include the Prismic toolbar in the website

Next you will need to include the following scripts on every page of your website. This means including it on your 404 page! Make sure to update <your-repo-name> with the name of the endpoint for your repository.

<script>
  window.prismic = {
    endpoint: 'https://<your-repo-name>.prismic.io/api/v2'
  };
</script>
<script type="text/javascript" src="//static.cdn.prismic.io/prismic.min.js"></script>

This toolbar will add a preview cookie when a user hits the preview button. 

This cookie contains the preview ref needed to call the API and receive the proper content.

It's important to add the toolbar on every page. You need to make sure to add it on your 404 page if you want to be able to use the shareable preview. This is mandatory to share content that has not yet been published.  

3 - Make sure to pass the preview cookie in your queries

This step is only required if you are not using the one of our SDKs to retrieve the content from your API. If you are using an SDK, then the correct reference will automatically be used and this last step is not necessary. If you are not using this method, then do the following:

When you preview your website, a preview cookie is generated that contains the preview token. This token can be used as a valid ref to make Prismic API queries. For any query you make on your website, make sure to check for the Preview cookie and use this preview ref in the query options if the preview cookie exists.

You can find details on how to do that for your favorite language in our developer manuals: 

Node | React | Vue.js | Laravel | Javascript | PHP | Ruby | Java | Rest API

4 - Preview a document or a release

From the document edit page or on a release page, click on the preview button (the eye icon in the top-right) and a new tab will open taking you to the preview session.

5 - Get a preview link

Once you're on a preview session, you can click on the bottom left button Share link to this preview with your team  and copy the shareable link.

That's it, Share it through Slack or email

Once it's done you will be able to share it on slack, email, or any other platform in order to invite a non-Prismic user to preview the content on the web or mobile.

Did this answer your question?