Content Editable

Get website content and copy from clients and team members.

Step 1

Include this JavaScript widget in your page for which you need to gather content:

<script id="contenteditablescript" src="http://contenteditable.herokuapp.com/widget/v1/contenteditable.js" type="text/javascript"></script>

In the future, this will not rely on any other JavaScript libraries, but for now it requires jQuery to be loaded in the page. Therefore, include the above after jQuery has been included in the page.

Step 2

Reload your page.

You will be prompted to register your site's domain, so that we can email you when content is submitted.

Step 3

Add HTML5 data-edit attributes to each element in the page which needs content.

The value of the data-edit attribute must be a unique identifier, or you can leave it blank if the element already has a unique id.

Examples would be:

<div data-edit="div-1">I need to be edited.</div>
<div id="div-2" data-edit>I also need to be edited.</div>

Step 4

Send the page's URL to your client or team member to edit the content.

Step 5

You will be emailed a link when your colleague submits content for the page.

When you click the link, you will be taken to the live page with the colleague's edits inline.