Shareable preview link not showing draft content

andrew.joll · March 16, 2021, 8:28am

We have a site using the Prismic toolbar, and are able to preview content so long as we are logged into the CMS. According to this documentation it should be possible to share this preview with non-Prismic users.

Initially what we found is that https://prismic.link/xxyyzz links are a little malformed, encoding the ampersand in the query string as an html entity &amp. This meant that nothing worked as the token & document id can't be parsed properly.

Example from the link redirect page;

<html>
  <head>
    <title>prismic.io Preview</title>
    <link rel="icon" type="image/png" href="/...2eb5115/images/favicon.png">
    <meta property="og:title" content="prismic.io Preview"/>
    <meta property="og:description" content="The times, they’re a-changing"/>
    <meta property="og:image" content="https://prismic-io.s3.amazonaws.com/prismic-io/previews/my-repo-name/YE_RlBIAAGA21qdB~YEk7shIAACEAum9t/previewYE_RlBIAAGA21qdB~YEk7shIAACEAum9t.jpg"/>
  </head>
  <body>
    <script type="text/javascript">
        function setCookie(name, value, days) {
            var d = new Date;
            d.setTime(d.getTime() + 24*60*60*1000*days);
            document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString() + ";SameSite=None" + ";Secure";
        }
        setCookie("io.prismic.previewSession", "YE_RlBIAAGA21qdB~YEk7shIAACEAum9t", 1);
        window.location = "https://localhost:8000/preview?token=https%3A%2F%2Fmy-repo-name.prismic.io%2Fpreviews%2FYE_CqxIAACEA1mUO%3AYFBBghMAACYAbv5M%3FwebsitePreviewId%3DYEk7shIAACEAum9t&amp;documentId=XXXXXXXYYYYYY";

                                                                                                                                                                                             ^ This
    </script>
  </body>
</html>

We implemented a workaround where we first replaced the &amp character with a regular & and then parsed it. What we're getting now is just the published content displaying instead of the draft content.

Here's how we're accessing the preview;

let search = location.search || '';
search = search.replace(/&amp;/, '&');

const params = new URLSearchParams(search);

console.log({
    token: params.get('token'),
    documentId: params.get('documentId')
});

/*
Outputs: 
{
    token: "https://my-repo-name.prismic.io/previews/XXXXX?websitePreviewId=YYYYYY",
    documentId: "XXXXYYYYYZZZZ"
}
*/

const preview = Client.getPreviewResolver(
    params.get('token'),
    params.get('documentId')
);

const path = await preview.resolve(linkResolver);

console.log(path); // e.g. my-article-title

return Client.getByUID('news', path);

Everything renders correctly, but we are seeing the published content.

In the above documentation there is a section about preview cookies, however all of the links in it are 404s, so it's possible there is something I'm missing here.

Any help appreciated!

Priyanka · March 16, 2021, 1:41pm

Hello @andrew.joll

Welcome to Prismic Forum.

Are you including the Primic preview toolbar on every page? You need to make sure to add it on your 404 pages if you want to be able to use the shareable preview. This is mandatory to share content that has not yet been published.

Can you please try to follow the Preview troubleshooting guide?

Let me know if it still doesn't solve the issue. I'd love to dig into more.

Thanks,

Priyanka

andrew.joll · March 16, 2021, 8:54pm

Thanks @Priyanka, we are including the toolbar script on every page;

<script async defer src="https://static.cdn.prismic.io/prismic.js?new=true&repo=[REPO-NAME]"></script>

Regarding the troubleshooting guide, what is the 'preview script' mentioned in the first step?

Can you see the preview cookie in the browser?
io.prismic.previewSession cookie is present, but the this doc says it should be io.prismic.preview?

Token content looks fine.

How to test in the Rest API
It seems to be returning draft data when I take the preview token and call the document search api with that ref, so it would appear the problem lies somewhere in javascript.

Are you using a kit?
No, just @prismicio/client and prismic-reactjs, although I've been able to reproduce the same issue with the reactjs-starter project.

Did you configure a route to handle redirection? Is this route using the link resolver?
Our app is React-only, this looks like a server-side Node implementation?

Priyanka · March 18, 2021, 10:12am

Hello @andrew.joll

Preview script: It's a toolbar script that you already included on every page, as you mentioned.
preview cookie: You can see two cookies but in different hosts under the browser's cookies section. Ideally, you will see io.prismic.preview cookie on the localhost. And io.prismic.previewSession on your repo URL.
You are using the correct Kit.
You won't need to configure a route to handle rejection like the example given. It's in Node. But you need to include the Link Resolver route to your application like given here.. are you implementing this?

Priyanka

andrew.joll · March 19, 2021, 5:02am

Thanks @Priyanka, I'm not seeing the io.prismic.preview cookie on localhost when opening a sharable preview link (but I do see it in browsers which are logged in to Prismic CMS).

I'm not using routing (e.g. react-router), but instead just checking if the browser's location.pathname is '/preview' in the top level component, e.g;

const App = () => {
    const history = useHistory();

    useEffect(() => {
        const getPreview = async () => {
            if (location.pathname !== '/preview') {
                return;
            }

            let search = location.search || '';
            search = search.replace(/&amp;/, '&');

            const params = new URLSearchParams(search);

            const preview = Client.getPreviewResolver(
                params.get('token'),
                params.get('documentId')
            );

            const path = await preview.resolve(linkResolver);

            if (path) {
                history.push(path);
            }
        };

        getPreview();
    }, []);

It redirects to the correct page, but getPreviewResolver does not appear to be setting any cookie, so only the published content is displayed. Is there something else missing?

Priyanka · March 19, 2021, 2:24pm

I am not sure what might be the issue. It would be great if you can share these:

The URL of your repository?
The Github repo?

You can send these through a private message.

Thanks,

Priyanka

system · April 19, 2021, 11:57am

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

konrad.gardocki · April 20, 2022, 1:34pm

hi there? I was wondering if there's any update regarding this issue, as i think we may have similar problem. We're unable to share a link to preview with draft content. TIA

andrew.joll · April 21, 2022, 4:21am

We never got a workable solution for this, so fell back on a workaround of publishing pages on an alternate url/path, them moving them once ready

Priyanka · April 22, 2022, 6:07am

Hello @konrad.gardocki

As I mentioned before to @andrew.joll, I am not sure why the preview link is not working. I need to debug it more. Please share these:

The URL of your repository?
The Github repo?

You can send these through a private message.

Thanks,
Priyanka

Topic		Replies	Views
Shareable link for prismic preview not working Developing with Prismic nuxtjs	10	1046	December 9, 2021
Previews Require Sign In Developing with Prismic nextjs	15	602	October 3, 2023
Previews - unpublished document previews not working Developing with Prismic graphql	5	1183	December 9, 2021
Share link stoped working with Nuxt.js Developing with Prismic nuxtjs	6	457	December 9, 2021
Prismic preview and toolbar not working Developing with Prismic javascript	2	15	March 28, 2025

Shareable preview link not showing draft content

Related topics