Making Content Editable

Create reusable email templates, using our simple template language to define editable content sections.

Download this template

<multiline>
Outputs a multi-line text area for adding your email content

<repeater>
A content block that can be repeated an infinite number of times

<layout>
Include multiple separate designs inside the one repeating element

Single Line <singleline>

Outputs a single line text field that authors can modify in our custom template content editor. This is ideal for headlines, and links can be used. Text between the tags is used as the default value.

Options

label=''
If you include a label attribute, it will be shown above the text field when the author is editing it. For example, useful labels might be 'Headline' or 'Caption'.
repeatertitle='true'
If included (on a single line item inside a repeater block) this text will become a link in the table of contents to the repeater block. You can mark as many different single line items for the table of contents as you like, but only one in any specific layout (or one per repeater block if you don't use layouts).

Example Use

<h2>
                    <singleline label='Pull Quote'>Pullquote here</singleline>
            </h2>

Above: The code to include in your HTML templates

Multi Line <multiline>

Outputs a multi-line text field that authors can modify in our custom template content editor. Each paragraph is automatically wrapped in a <p> tag, so you'll want to accommodate for that in your CSS.

Options

label=''
If you include a label attribute, it will be shown above the text field when the author is editing it. For example, useful labels might be 'Article' or 'Product Details'.

Example Use

<multiline label='Main Feature Intro'>Main feature introduction</multiline>

Above: The code to include in your HTML templates

Image <img editable>

Add the "editable" attribute to <img> tags to allow content authors to remove or replace images in our custom template content editor (within editable areas only). Options are also added to the editing pane for authors to optionally add URLs and alternate text without having to edit the source code.

Required

width=''
You need to specify a width (not a % width, but a pixel width) on your <img> tag. Any images wider than the specified width that are uploaded in its place will automatically be proportionally resized to the value set. Images narrower than specified will not be resized at all (the width tag will be updated to match the narrower image size in that case). You should not specify the height, as that can result in distorted images.

Options

label='image title'
If included, this text is shown for the content author when they edit the image. Use it as a guide to the type of image needed. For example label='Hero Image'.
src='image.jpg'
The image source optionally specified in your HTML will be used as the default image and will show up in the final email unless your client removes or replaces it.

Example Use

<img editable src="image.jpg" width="200" label='Hero Image' />

Above: The code to include in your HTML templates

Repeater <repeater>

Defines a content block that can be repeated an infinite number of times in the template. Must include either a <singleline>, <multiline>, or <img editable> tag. You can have an unlimited number of repeaters in your template, and each repeater can contain any number of editable single line and multi line elements, as well as editable images. These are usually used for lists of articles or features which can repeat an unknown number of times. Keep in mind that you cannot nest repeaters.

You can use the optional layout element described below to specify as many different designs as you like for content items in this repeating block.

Example Use

<repeater>
             <h2>
              <singleline label="Title" repeatertitle='true' >Title</singleline>
             </h2>
             <multiline label="Article Body" >Enter the full text</multiline>
            </repeater>

Above: The code to include in your HTML templates

Layout

You can include multiple layout designs inside a single repeater tag, allowing authors to select a suitable layout when adding content to templates in our custom template content editor. For example, one layout could be for text only, another is text with a left-aligned image, and a third layout might be for an image gallery.

Options

label='layout name'
Each layout can optionally be named using the label='' attribute. Naming layouts makes it simple for your client to know which layout to choose for any given content item. The label will be shown as drop down options in the custom template content editor when they click the 'Add new' button.

Remember that either every layout in a repeater should have a label, or none should. If you don't use labels, then the 'Add new' button does not have a drop down menu, and simply rotates through the available layouts with each click.

Example Use

<repeater>
            <layout label='New Feature'>
              <h2>
               <singleline label="Title" repeatertitle='true' >Title of new feature</singleline>
              </h2>
              <multiline label="Description" >Description</multiline>
            </layout>

            <layout label='Article, tip or resource'>
              <h2>
               <singleline label="Title" repeatertitle='true' >Title of Article</singleline>
              </h2>
              <multiline label="Description" >Description</multiline>
            </layout>

            <layout label='Gallery Highlights'>
             <img src="gallery.png" width="140" editable label="Image 1"><br />
             <img src="gallery.png" width="140" editable label="Image 2"><br />
             <img src="gallery.png" width="140" editable label="Image 3">
            </layout>
            </repeater>

Above: The code to include in your HTML templates

Table of Contents <tableofcontents>

Creates an automated list of every single line content item that includes the repeatertitle attribute in your template. You must include a <repeatertitle> tag inside the table of contents.

Example Use

<ul>
                    <tableofcontents>
                            <li>
                                    <repeatertitle/>
                            </li>
                    </tableofcontents>
            </ul>

Above: The code to include in your HTML templates

Repeater Title <repeatertitle/>

Outputs a link to a content item, using the text from each <singleline> element which included the repeatertitle='true' parameter. Used exclusively within the <tableofcontents> tag.

Example Use

<tableofcontents>
                    <repeatertitle/>
            </tableofcontents>

Above: The code to include in your HTML templates

Disabling Link Tracking and Image Importing

Use these snippets in your link and images tags to turn off link tracking for any link in your content, or prevent us from importing a specific image and referencing it on our servers instead of your own.

Turning off image importing – cm_dontimportimage – For example:

<img src="http://www.myserver.com/filename.jpg" width="400" height="300" alt="alt text here" cm_dontimportimage>

Turning off link tracking – cm_dontconvertlink – For example:

<a href="http://www.myserver.com" cm_dontconvertlink>this is a link</a>