In-Website Preview

When working in the writing room editor, authors can preview their new content on their website without having to publish the document.

From the writing room settings, administrators can set up the websites that can preview the content changes. This way, you can have a production server, staging server, development server, etc.

The prismic.io Node.js starter project includes the required code to start using the In-website previews.

If you want to add previews to your existing project, simply follow the steps below.

Include the prismic.io toolbar JS file

The first step to adding the preview functionality is to include the following script on every page of your website.

  • pug
  • html
Copy
script(src='//code.jquery.com/jquery-2.1.1.min.js')
script(type='text/javascript', src='//static.cdn.prismic.io/prismic.min.js')
Copy
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//static.cdn.prismic.io/prismic.min.js"></script>

Create a preview endpoint

In your repository, head to Settings/Previews and add a site name and URL such as the following.

Copy
http://{yoursite}/preview

When requested this endpoint must:

  • Retrieve the preview token from the token parameter in the query string
  • Call the prismic.io development kit with this token and the linkResolver will retrieve the correct URL for the document being previewed
  • Store the preview token in the io.prismic.preview cookie and redirect to the given URL
Copy
// Example preview endpoint for NodeJS with ExpressJS 
exports.preview = exports.route(function(req, res, ctx) {
  var previewToken = req.query['token'];
  ctx.api.previewSession(previewToken, ctx.linkResolver, '/', function(err, redirectUrl) {
    res.cookie(Prismic.previewCookie, previewToken, { maxAge: 60 * 30 * 1000, path: '/', httpOnly: false });
    res.redirect(redirectUrl);
  });
})

Use the correct reference

The preview token you just saved into the io.prismic.preview cookie can be used as a valid ref to make prismic.io API queries. So when you select the proper ref to use to make your queries, make sure to use this preview ref if the preview cookie exists.

Copy
// Example ref selection for NodeJS with ExpressJS
var ref = req.cookies[Prismic.previewCookie] || Api.master();