In-website preview

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

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

All of our starter projects include the required code to start using the In-website previews.

Include the Prismic toolbar JS file

If you want to include previews into a custom development, include this script on every page of your website:

Copy
      <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 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 best URL for this preview
- 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);
  });
})
    
Copy
      // preview.php
$token = isset($_GET['token']) ? $_GET['token'] : null;
if (!isset($token)) {
    header('HTTP/1.1 400 Bad Request', true, 400);
    exit('Bad Request');
}
$url = $api->previewSession($token, $linkResolver, '/');
setcookie(Prismic\PREVIEW_COOKIE, $token, time() + 1800, '/', null, false, false);
header('Location: ' . $url);
    

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 API queries. So when you select the proper ref to use to make the queries, you must use this one if the cookie exists.

Copy
      // Example ref selection for NodeJS with ExpressJS
var ref = req.cookies[Prismic.previewCookie] || Api.master(),
    
Copy
      // Example ref selection for PHP
$ref = isset($_COOKIE[Prismic\PREVIEW_COOKIE])
     ? $_COOKIE[Prismic\PREVIEW_COOKIE]
     : $api->master()->getRef();