Folly Quick Start Guide

STEP 1: Include Folly.js

Add our script to the very top of your page. Change your-sitekey to the site key you were emailed when you signed up.

<script src="https://plugins.folly.io/release/folly.min.js" folly-sitekey="your-sitekey"></script>

STEP 2: Add Attributes

To make text or an image editable, simply add one of the following attributes and assign it a key:

  • folly-html: The user can format the text however they like
  • folly-text: Only text input is allowed. Useful for maintaining certain styles.
  • folly-img: Used on an <img /> element.
See it in Action!
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img folly-img="/gallery/1/image" src="http://bit.ly/2dH72YI" alt="Awesome Nebula" />
      <div class="caption">
        <h3 folly-text="/gallery/1/label">Thumbnail label</h3>
        <p folly-html="/gallery/1/description">
			Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi 
			porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
		</p>
        <p>
			<a folly-text="/gallery/button-1-label" href="#" class="btn btn-primary" role="button">Button 1</a> 
			<a folly-text="/gallery/button-1-label" href="#" class="btn btn-default" role="button">Button 2</a>
		</p>
      </div>
    </div>
  </div>
</div>

STEP 3: DONE!

Yes, it really was that easy.