Prismic-toolbar not visible

Developing with Prismic
1

Dear Prismic community,
I am running Prismic with Next.js v10 and using the new toolbar script:

<script
  async
  defer
  src="//static.cdn.prismic.io/prismic.js?new=true&repo=MY_REPO"
/>

The script is loaded and seems to be executed, which leads to this iframe with an empty body being appended to the page body:

<iframe src="https://MY_REPO.prismic.io/prismic-toolbar/4.0.2/iframe.html" style="display: none !important;"></iframe>

However, it does not append the visible toolbar (div with id prismic-toolbar-v2) to my page and does not add a preview cookie to the local host.

The behavior is the same in Chrome/Safari/Firefox and independent of whether I visit the dev-server, prod server or a static export. I have all ad/tracking blockers turned off or use incognito mode respectively.

I am happy for any suggestions, as this is preventing me from working with previews.

Thanks in advance!

2

Hello Korbinian, welcome to the community!

If you're using the the latests versions of Next and the toolbar, along with the proper Preview configuration, you shouldn’t be having any trouble, so it's really weird.

How have you configured the Preview in both your repository and in your project?

He're the docs for how to Handle document previews with Next:

4

Hi Paulina,
thanks for the quick reply.

I have configured the previews according to the documentation and previews themselves do work as expected.
I just can't see the toolbar. :cry:

I will test with different devices / browsers / accounts to see if I can pinpoint the issue.

5

That's really unusual, if you have the correct script there shouldn’t be a problem.

Yes, if you're able to catch any other behaviours or if you get to see it somewhere let me know

Thanks

7

Is your website being deployed statically ?

8

Yes, but as I said it's the same on a dev-server or a local node server in production mode.

However, we also have an issue with previews and static deployment. Now that you are asking, is there a known example of Next static export + Prismic deployment? So far, I only found ones that required running a node server in prod.

9

Hey @kf1, we do not have an example got a Next.js static export project yet.

Are you still experiencing issues with the Preview?
If you are, I'm thinking it may be that you're just not logged in Prismic when you open your project and therefore you're not able to see the toolbar.
Could this be the case?

11

This issue has been closed due to inactivity. Flag to reopen.

13

I'm seeing the same issue.
Locally the toolbar appears, but in any live environment it loads, despite showing no errors or warnings, and previews working correctly besides the Toolbar iframe.

15

Hey @peter.zenger, are you using the latest version of the toolbar script? It should look like this:
<script async defer src="https://static.cdn.prismic.io/prismic.js?new=true&repo=your-repository-name"></script>

16

I am using the prismicio/next preview provider

<PrismicPreview repositoryName={pageProps.prismicRepository}>
Previews work, it just doesn't load the preview iframe on deployed environments, and apps which embed links to these pages load the toolbar in it's own window.

17

Are you opening the site in a browser where you're logged in on Prismic? The edit button should only appear for your repository users.

19

I have exactly the same issue as @peter.zenger

21

Hello @arvinwilderink

Could you please share your repository and Project source code? I'll troubleshoot the issue for you. You can send these details by private message though.

Thanks,
Priyanka