This article is designed to help you troubleshoot and resolve the issue you may be having with your previews. If you don't know how to resolve this yourself, then reach out to us through the chat support.

Have you loaded the preview script in your application?

Check in the head of all your pages to make sure the script is present, make sure that the Prismic preview toolbar script is included in your 404 file.

Can you see the preview cookie in the browser?

Click the preview button which should take you to your website, right click inspect, go to application tab. Check on the left in the cookies tab for your repo name, click this tab. In the tab you will see a field with the name: io.prismic.preview

This token should look something like this:

https%3A%2F%2Freponame.prismic.io%2Fpreviews%2FXbr_VhAAACMAEdNJ%3AXbr-nBAAACMAEc-_%3FwebsitePreviewId%3DXanozRIAABXZ-ihY&documentId=XbApbxAAACYAP1DJ

How to test in the Rest API:

Take the value from this field and add it in there

https://my-repo-name.prismic.io/api/v1/documents/search?ref=the-value-in-your-cookie

Open the page, if it works then the problem is in the code.

How to test in the Graphql API:

Download ModHeader or a similar extension for your browser. 

Take the cookie data and when you run the query for the document in your graphql browser, https://my-repo-name.prismic.io/graphql

Open the extension and pass the cookie data as the Prismic-ref field, then run the query again and you should see the correct information that you are trying to preview. 


If you see the correct info then the problem is in the code.

Are you using a kit?

If you're using Prismic JS in a client side app then it should work without doing any work as it passes the req automatically to get the right content.

With server side technologies i.e Nuxt.js / Next.js / Gatsby make sure your getting and passing the req when doing your queries.

Example in Nuxt.js

async asyncData({ params, error, req }) {

  try{

I'm landing on the wrong page - I'm landing on the homepage all the time

Make sure that in your repo Settings > Previews that the link resolver route is set up correctly to redirect to the correct page.

Did you configure a route to handle redirection? Is this route using the link resolver?

In the preview route or page that you have created for your project, make sure you are correctly passing the preview token through the link resolver so that you project redirects to the correct page. Here's an example in node.js of how this should look:

app.get('/preview', (req, res) => {
  const token = req.query.token;
  if (token) {
    req.prismic.api.previewSession(token, PrismicConfig.linkResolver, '/').then((url) => {
      res.redirect(302, url);
    }).catch((err) => {
      res.status(500).send(`Error 500 in preview: ${err.message}`);
    });
  } else {
    res.send(400, 'Missing token from querystring');
  }
});

Notice the token is passed with the link resolver PrismicConfig.linkResolver .

If using the link resolver but it's still not working, make sure your link resolver is properly done

If you would like to learn more about what the link resolver is and what is does you can read our full documentation. Below is an example of what a working link resolver might look like:

export default function (doc) {
  if (doc.isBroken) {
    return '/not-found'
  }
  if (doc.type === 'homepage') {
    return /
  }
  if (doc.type === 'page') {
    return /${doc.uid}
  }
  return '/not-found'
}

Are you trying to preview an unpublished document?

If the document that you are trying to preview is from a custom type that has no published documents, then you will need to make sure that the Prismic preview toolbar script is included in your 404 file.


Still not working?

If you still can't find the issue or don't know what step to take next, then reach out to us the the chat pop up and we'll be happy to help work through any issues with you. 

Did this answer your question?