Edit button is not always loaded

Hello!
I am trying to integrate the edit button on my page but it is not appearing for some of the document types.
It looks like it’s appearing basing on /predict API response (executed by prismic script) but for some of the documents, it is always an empty array.
Are there any additional preconditions to enable this feature that are not described in documentation?

/predict is executed with following params:

url: /preview
ref: {{preview token}}
tracker: {{hash - if exists)

Regards :slight_smile:

@hello @olga.giza.ext, welcome to the community forum!

In order to make the in-Website Edit button functionality work, it is necessary to add the Prismic Toolbar to each of the pages of the site. This step is required to have every Custom Type appear in it when needed.

Could you tell me where are you setting the params that you’re sharing and how has this been helpful to understand how the Edit button works?

Also, is this the first time you encounter this issue?

Thanks

Hello @paulina.gavilan,
Yes, I have added a prismic toolbar to the website.
Params are set by prismic toolbar basing on prismic session cookie and preview endpoint set in prismic preview settings.
For different document types on different pages, the edit button works as expected.

Hey @olga.giza.ext !

You need to make sure that you are adding the toolbar on every page of your application so that it shows in each and every one of the views.

So, if you have, let’s say, two custom types: ‘Home’ and ‘Post’ and only add the script in ‘Homepage’; the edit button for 'Post is not going to appear.

Dear @paulina.gavilan :slight_smile:
Sorry for the late response but this topic pop up again for us :slight_smile:
Yes, the Prismic toolbar is added to all of the pages.
There are the following views in our app:

  • Page with the data from one of the Prismic documents
  • Page preview for this specific document type
  • 404 error page
  • 500 error page.
    All of those pages have attached the Prismic toolbar.
    We have defined a specific endpoint for prismic preview in app settings
    {{app-domain}}/prismicpreviewendpoint?token={xxx}&documentId={xxx}
    Prismic toolbar which is added to every page:
<script>
  window.prismic = {
    endpoint: '{{ourprismicdomain}}/api/v2'
  };
</script>
<script type="text/javascript" src="https://static.cdn.prismic.io/prismic.min.js?new=true"></script>

When the user tries to preview the document from the Prismic app, we are retrieving token from the URL and we are updating the Prismic cookie.
Then using token and document ID we are calling our internal API which requests the preview data for the page. Preview is rendered correctly, the Prismic toolbar appears, auto preview reload on the Prismic document save works as expected only missing feature is the edit button :slight_smile:

Hi Olga,

Can you try replacing your preview script with the following?

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

Thanks.

Hello @Phil,
I just updated the Prismic toolbar script. Now it looks like that:

<script async defer src="https://static.cdn.prismic.io/prismic.js?repo={{repo_name}}&new=true"></script>

where repo name is not containing page protocol or .cdn.prismic.io/api/v2 part.
The Prismic toolbar is correctly loaded to the page, the edit button is still not appearing.
Also, I noticed that in my app console there is a warning and an error that comes from an iframe loaded by the Prismic toolbar. Maybe it is connected with the issue?

Uncaught Error: Unexpected message received by the iframe: [object MessageEvent].
 Expected setup_port
    at Object.initialisationMessageHandler (iframe.html:16)
    at iframe.html:16
initialisationMessageHandler @ iframe.html:16
(anonymous) @ iframe.html:16
postMessage (async)
A cookie associated with a cross-site resource at http://prismic.io/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

Hi Olga,

I think you might be right we’ve experienced some issues since chromes update on same-site cookies, we are currently investigating this to find a solution.

Can you for the moment try turning off this feature so we can be sure that’s the issue?

You can retain the legacy behaviour for cookies in the browser by setting both of these flags to “Disabled”

  • chrome://flags/#same-site-by-default-cookies
  • chrome://flags/#cookies-without-same-site-must-be-secure

Hello Phil :wink:

Unfortunately, it is not the issue here. (For different applications that are using the Prismic Toolbar + edit button it is not needed for the button to appear). I switched flags - no difference in this case.

The only thing that I was able to find what is different between apps where it works and where not, are the Prismic preview endpoints:

  • Preview endpoint in an application where the edit button doesn’t work
    /preview/{application_view}?documentId={prismic_document_id} (where application_view has nothing common with prismic document - it is our internal view name)
    • For example: /preview/app_view?documentId=Xp346RESSCUAY137
  • Preview endpoint in a different application where the edit button appears: /layout/{{prismic_document_type}}/uid/{{prismic_document_uid_field}}/locale/{{prismic_locale}}/?preview=true:
    • For example/layout/article/uid/first_article/locale/en-us?preview=true

Unfortunately in an application where the edit button doesn’t work, we have no possibility to support this kind of route which allows us to display the button like in other apps.
Just for testing purposes, locally, I created a static route that matches the following pattern - for this test case, the edit button appears.

Hey Olga, I’m not sure how or why this is happening.

Which technologies are you using in each of this projects and which version of prismic-javascript is installed?

If you could send a zip file with your code or the github repo URL of your project in a private message we can try and reproduce it on our end.

Hey @paulina.gavilan :slight_smile: I send you the private message :slight_smile:

1 Like