In this example, you'll see how to add editable content to any web page.

1. Create a blank mod

Start with an empty mod, with nothing added. You can clone this blank mod if desired.

2. Add a field named content

In the Fields tab of the mod's settings, add a field named content with type Rich text (HTML)

3. Add the content field to your HTML panel

Use Handlebars HTML insertion syntax ({{{ }}}) to automatically insert your field into the mod. For non-HTML fields (e.g. Plain Text), you can use a double mustache ({{ }}) instead of a triple mustache. See Using Handlebars for more info.

4. Set a value for the content field

Click the Content button and add some text to your content field. Click Publish.

5. Now your content is being inserted into your mod

It is visible in the preview panel below all the code panels.

6. Add the mod to any website or web app

Click the Add to website button and follow the instructions. If you have not done so already, paste the anymod script into your page's <head> element:

<head>
  <!-- Anymod -->
  <script id="Anymod-script">
    (function (m,o,d,u,l,a,r,i,z,e) {
      u[m]={Project:o,rq:[],Opts:r,ready:function(j){u[m].rq.push(j)}};function j(s){return encodeURIComponent(btoa(s))};z=l.getElementById(m+'-'+a);r=u.location;
      e=[d+'/page/'+o+'/'+j(r.pathname)+'/'+j(r.host)+'?t='+Date.now(),d];e.map(function(w){i=l.createElement(a);i.defer=1;i.src=w;z.parentNode.insertBefore(i,z);});
    })('Anymod','XXXXXX','https://cdn.anymod.com/v2',window,document,'script',{});
  </script>
  <!-- /Anymod -->
</head>
1
2
3
4
5
6
7
8
9
10

This enables Anymod on the page. Now paste the mod's tag in your page's HTML wherever you want your mod to appear:

<!-- Lorem ipsum text -->
<div id="anymod-nmnmo"></div>
1
2

TIP

Make sure you add your own project ID in the Anymod script above (where it says XXXXXX), and make sure you use your own mod (not nmnmo).

7. Reload your page

You content should show on your page. If you are logged into Anymod, you will also see a pencil icon appear on the right side of the page. Clicking this icon enables you to make edits to your content.

Last Updated: 10/3/2018, 5:32:27 AM