Building an editable email template

This guide is for anyone on your team designing the HTML template that your content editors will fill in each time they send a campaign. It walks through a small set of markup tags that mark specific parts of your HTML as editable — a headline, a paragraph, an image, or a whole repeating block of articles — so that whoever builds the actual email never has to touch code.

How it works: you write ordinary HTML for the template, then wrap the parts you want editors to change in the tags below. When the template is uploaded, the platform reads those tags and generates a content-editing screen automatically — one field per tag.

Single line text

<singleline>

Use this for anything that should stay on one line — a headline, a button caption, a short link. Whatever text sits between the opening and closing tag becomes the placeholder editors see before they type their own copy.

Attributes

label="…"
A short caption shown above the field in the editor, e.g. "Headline" or "Button text".
repeatertitle="true"
Marks this field's text to appear in an automatically generated table of contents — see the section below. Only use this on one field per repeating block.
<h2>
  <singleline label='Pull Quote'>Pull quote goes here</singleline>
</h2>
Pull Quote
<h2>
  A quote your editor typed in
</h2>

Multi line text

<multiline>

Use this for longer copy — an intro paragraph, a description, an article body. Each paragraph the editor types is automatically wrapped in its own <p> tag, so build that into your stylesheet rather than styling the tag itself.

Attributes

label="…"
A caption shown above the field, e.g. "Article" or "Product details".
<multiline label='Main Feature Intro'>Main feature introduction</multiline>
Main Feature Intro
<p>Whatever the editor typed, one &lt;p&gt; per paragraph</p>

Editable images

<img editable>

Add the editable attribute to any ordinary <img> tag and editors will be able to swap it out for their own picture, without leaving the content screen.

Required

width="…"
A fixed pixel width (not a percentage). Anything editors upload that's wider gets scaled down to match; anything narrower is left alone and the width is adjusted to fit it. Leave height unset so images aren't stretched out of proportion.

Options

label="…"
Shown to the editor as a hint for what kind of image belongs there, e.g. "Hero image".
src="…"
A default image that appears until the editor replaces it.
<img editable src="image.jpg" width="200" label='Hero Image' />
Hero Image
Click to replace image
<a href="…">
  <img src="whatever-the-editor-uploaded.jpg" width="200" alt="…">
</a>

Repeating blocks

<repeater>

Wrap a block in <repeater> when an editor might need to add any number of copies of it — a list of articles, a set of featured products, testimonials, and so on. Each repeater needs at least one singleline, multiline, or editable image inside it. You can add as many repeaters as the template needs, but repeaters can't be nested inside one another. 

<repeater>
  <h2>
    <singleline label="Title" repeatertitle='true'>Title</singleline>
  </h2>
  <multiline label="Article Body">Enter the full text</multiline>
</repeater>
Title
Article Body
Editors get an "Add another" button beneath this block to create more copies.
<h2>First article title</h2>
<p>Its body copy…</p>

<h2>Second article title</h2>
<p>Its body copy…</p>

Offering multiple layouts

<layout>

Inside a single repeater, you can offer more than one design for editors to choose between each time they add an item — for example, a text-only layout, a layout with an image on the left, and a gallery layout. Every <layout> block needs its own editable content inside it.

Options

label="…"
Names the layout so editors know which to pick, shown as a dropdown when they add a new item. If you leave labels off every layout in the repeater, editors instead cycle through the layouts one click at a time rather than choosing from a list — so either label all of them, or none. 
<repeater>
  <layout label='New Feature'>
    <h2><singleline label="Title" repeatertitle='true'>Title</singleline></h2>
    <multiline label="Description">Description</multiline>
  </layout>

  <layout label='Gallery Highlights'>
    <img src="gallery.png" width="140" editable label="Image 1">
    <img src="gallery.png" width="140" editable label="Image 2">
  </layout>
</repeater>
Choose a layout for this item
New Feature Gallery Highlights
Picking one shows only that layout's fields, the same way the sections above work individually.

Table of contents

<tableofcontents>

This generates a linked list of every field you flagged with repeatertitle='true', in the order they appear in the email — handy for newsletters where editors add a variable number of stories and readers expect a jump-to-story list at the top. 

<ul>
  <tableofcontents>
    <li><repeatertitle/></li>
  </tableofcontents>
</ul>
<ul>
  <li><a href="#1">First story's title</a></li>
  <li><a href="#2">Second story's title</a></li>
</ul>

<repeatertitle/> only ever needs to be used inside <tableofcontents> — it's what actually prints each linked title.

Turning off tracking or image hosting

Two small flags let you opt individual links or images out of the platform's default behaviour, in case a specific link shouldn't be tracked, or a specific image needs to stay hosted on your own server instead of being copied over.

Skip link tracking

<a href="http://www.example.com" cm_dontconvertlink>this link stays as-is</a>

Skip re-hosting an image

<img src="http://www.example.com/file.jpg" width="400" height="300" alt="…" cm_dontimportimage>