Best Practices

When setting up PageMagic there are a few best practices to keep in mind:

Add the PageMagic javascript in the head

Adding the PageMagic JS file in the head of the document will mean your content loads faster for your customers. It's an asynchronous asset, so it won't slow down the loading of the rest of your page and assets.

Don't nest editable items

Nesting edtiable items in your HTML DOM isn't recommended. For example, we don't recommend this:

  <!-- Don't do this -->
<div class="editable">
 <div class="editable">Want to get in touch? Email us on justin@pagemagic.io</div>
 <ul class="editable">
  <li>Phone:</li>
  <li>Fax:</li>
  <li>Skype:</li>
 </ul>
</div>
Rather, make each child element editable:
  <!-- Rather try this -->
<div>
 <div class="editable">Want to get in touch? Email us on justin@pagemagic.io</div>
 <ul class="editable">
  <li>Phone:</li>
  <li>Fax:</li>
  <li>Skype:</li>
 </ul>
</div>
Or make the entire item editable and not the child elements. PageMagic's editor supports rich text and HTML editing, so this may be best:
  <!-- Or this -->
<div class="editable">
 <div>Want to get in touch? Email us on justin@pagemagic.io</div>
 <ul>
  <li>Phone:</li>
  <li>Fax:</li>
  <li>Skype:</li>
 </ul>
</div>
Add labels for best performance

We recommend giving each editable element a editable-label attribute with a unique value on that page describing what the element's contents is. This helps PageMagic tell the difference between similar items on the same page.

Example:

  <!-- Add editable-label attributes to editable elements -->
<p class="editable" editable-label="Company Phone number">
 Call us on: +1 604 828 6421
</p>

<p class="editable" editable-label="Company Cell number">
 Call us off hours on: +1 604 828 6421
</p>