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 writing room to edit a page.

Include the Prismic Toolbar javascript file

You will need to include the Prismic toolbar scripts on every page of your website. This means including it on your 404 page! 

You can find this script in your repository 'Settings' section, under the 'Previews' tab.

Settings > Previews > Script

If in the URL of the Prismic Toolbar script, that you copied from the Previews page of your repository, finishes with ?new=true like the script below. Then you are finished you don't need to read any further.

Copy
<script type="text/javascript" src="https://static.cdn.prismic.io/prismic.min.js?new=true"></script>

If your <script> has the URL below then keep reading.

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

Note: This edit button will only appear for Admins, Editors and Content Creators, to allow to easily edit your pages. It won't appear for standard website visitors or give them any access or control.

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.

A full render example

Here is an example of the render() function that you might use for a Page component that contains the edit button. This is based off the Page component shown on the In-Website Preview page.

Copy
render() {
  if (this.state.doc) {
    const document = this.state.doc;
    return (
      <div data-wio-id={document.id}>
        {/* Page Content */}
      </div>
    );
  }
  return <h1>Loading...</h1>;
}