In-Website Edit Button

You can display an edit button on your live website only for your writers. This will allow them to easily jump from the live website to the prismic.io writing room to edit a page.

Is your site configured for previews?

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 repository endpoint

First you need to make sure to declare the endpoint of your repository in your HTML code.

Add the following code to every page of your website. Make sure to replace <your-repo-name> with your repository url name.

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

Include your document IDs

Wherever 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 on 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.