In-website edit button for PHP

You can display an edit button on your live website only for your writers, so they can easily jump from the live website to the prismic.io writing room to edit a page.

You can display an edit button on your live website only for your writers, so they can easily jump from the live website to the writing room to edit a page.

Before configuring an edit button, make sure that your site is configured for previews. It is a requirement for the edit button functionality.

Declare the endpoint for your repository in your HTML code

  • php (sdk v4 or later)
  • php (sdk v3 or earlier)
Copy
<script>
    window.prismic = {
        endpoint: 'https://<your-repo-name>.prismic.io/api/v2'
    };
</script>

<script src="https://static.cdn.prismic.io/prismic.min.js"></script>
Copy
<script>
    window.prismic = {
        endpoint: 'https://<your-repo-name>.prismic.io/api/'
    };
</script>

<script src="https://static.cdn.prismic.io/prismic.min.js"></script>

Include your document ids

Where you want to have an edit button inserted, add a data-wio-id attribute to the DOM container corresponding to your document. You can have several edit buttons in the same page.

Copy
<article data-wio-id="{insert document id}">
  (...)
</article>

The prismic toolbar will add a link inside the tag, you're free to style it as you want to integrate it in your design.