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.

Configure your site 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.

Include your document ID(s)

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

Copy
<div data-wio-id={insert document id}>
  {/* ... */}
</div>

The prismic.io 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>;
}