Prismic-toolbar not visible on previews in Next.js

I am developing a website with Prismic and Next.js. Everything is done except previews.

I followed the Prismic preview guide for Next.js, created preview.js and exit-preview.js api routes and everything as mentioned in the docs.

When I click on preview button, I am able to see preview but preview-toolbar is not visible.
On inspection I noticed there is an empty iframe with display:none property.

Can anyone help?

Hello @paragkatoch5,

Welcome to Prismic community and thanks for reaching out to us.

Can you please provide your codebase either as a zip file or a git repository so I can debug and provide assistance?

Thanks,
Racheal.

Hello @paragkatoch5,

After testing on my end the preview toolbar is visible on chrome but not on firefox and the difference is the io.prismic.preview cookie isn’t set on firefox and the iframe is set to display: none;.

Can you share more details from your end like your browser settings and have you also tried testing on other browsers?

Best regards,
Racheal.

Hey @racheal.orukele,
Thanks for help,
I noticed it was actually not working only on Brave Browser. After disabling its shield it start working as expected.

1 Like