# Shareable preview link not showing draft content

**URL:** <https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552>\
**Category:** Developing with Prismic\
**Tags:** javascript\
**Created:** [March 16, 2021, 8:28am UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552 "2021-03-16T08:28:11Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrew.joll](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@andrew.joll](https://community.prismic.io/u/andrew.joll)\
**Post date:** [March 16, 2021, 8:28am UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/1 "2021-03-16T08:28:11Z")

</div>

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](https://user-guides.prismic.io/en/articles/1709140-how-to-share-a-preview-link) it should be possible to share this preview with non-Prismic users.

Initially what we found is that [https://prismic.link/xxyyzz](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!

---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [March 16, 2021, 1:41pm UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/3 "2021-03-16T13:41:18Z")

</div>

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](https://user-guides.prismic.io/en/articles/3403530-troubleshooting-previews)?

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

Thanks,

Priyanka

---

<div class="post-metadata">

**Author:** ![andrew.joll](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@andrew.joll](https://community.prismic.io/u/andrew.joll)\
**Post date:** [March 16, 2021, 8:54pm UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/4 "2021-03-16T20:54:09Z")

</div>

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](https://github.com/prismicio/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?

---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [March 18, 2021, 10:12am UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/5 "2021-03-18T10:12:03Z")

</div>

Hello @andrew.joll

1. **Preview script:** It's a toolbar script that you already included on every page, as you mentioned.

2. **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.

3. You are using the correct Kit.

4. 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.](https://prismic.io/docs/technologies/previews-and-the-prismic-toolbar-reactjs#add-the-link-resolver-route-to-your-application). are you implementing this?

Priyanka

---

<div class="post-metadata">

**Author:** ![andrew.joll](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@andrew.joll](https://community.prismic.io/u/andrew.joll)\
**Post date:** [March 19, 2021, 5:02am UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/6 "2021-03-19T05:02:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [March 19, 2021, 2:24pm UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/7 "2021-03-19T14:24:21Z")

</div>

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

1. The URL of your repository?
2. The Github repo?

You can send these through a private message.

Thanks,

Priyanka

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [April 19, 2021, 11:57am UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/8 "2021-04-19T11:57:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Simon](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/simon/32/192_2.png) [@Simon](https://community.prismic.io/u/Simon)\
**Post date:** [June 9, 2021, 9:40am UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/9 "2021-06-09T09:40:07Z")

</div>



---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [June 10, 2021, 2:32pm UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/10 "2021-06-10T14:32:19Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 4:16pm UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/11 "2021-12-09T16:16:28Z")

</div>



---

<div class="post-metadata">

**Author:** ![konrad.gardocki](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@konrad.gardocki](https://community.prismic.io/u/konrad.gardocki)\
**Post date:** [April 20, 2022, 1:34pm UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/12 "2022-04-20T13:34:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andrew.joll](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@andrew.joll](https://community.prismic.io/u/andrew.joll)\
**Post date:** [April 21, 2022, 4:21am UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/14 "2022-04-21T04:21:14Z")

</div>

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 ☹

---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [April 22, 2022, 6:07am UTC](https://community.prismic.io/t/shareable-preview-link-not-showing-draft-content/4552/15 "2022-04-22T06:07:39Z")

</div>

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:

1. The URL of your repository?
2. The Github repo?

You can send these through a private message.

Thanks,  
Priyanka