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)
Hello @Pau,
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.
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 @Pau
Sorry for the late response but this topic pop up again for us
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:
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
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.
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"
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.