How to build MailBuild templates
MailBuild allows you to create a range of different email templates for your clients, depending on the type of email they're trying to send. We've provided simple but flexible template tags that you insert into your client's HTML email template that allow your client to add their own content when creating a campaign.
Here's a quick list of all the tags available for your email templates:
<$title link='true' default=''$>
<$description default=''$>
<$imagesrc link='true'$>
<repeater toc='true'>
<$title link='true' default=''$>
<$description default=''$>
<$imagesrc link='true'$>
</repeater>
<tableofcontents>
<$repeatertitle$>
</tableofcontents>
<webversion>
</webversion>
<forwardtoafriend>
</forwardtoafriend>
<unsubscribe>
</unsubscribe>
<$currentday$>
<$currentdayname$>
<$currentmonth$>
<$currentmonthname$>
<$currentyear$>
[firstname,fallback=your content here]
[lastname,fallback=your content here]
[fullname,fallback=your content here]
[email]
Quick Example
To illustrate what you can do with the different template tags, let's take a look at an example. You've just designed an email newsletter concept for your client "ABC Widgets" and now you want to import it into your client's account.
Download the sample template (including Photoshop files - 2.5mb .zip)
We've divided the newsletter up into 8 specific areas and we'll look at each of these areas separately.
Repeating items
If your email's going to have an unknown number of repeating items, such as individual stories or features, then the <repeater> tag is the way to go. This will allow your client to add an unlimited number of items to their email, each of which can include a title, description and image.
You can add as many repeaters to your template as you like. In the example above, we have a sidebar repeater for secondary announcements under the title "In Short". In the main column, we have a second repeater for our major stories. This repeater also populates the table of contents in the sidebar under "In this Issue". You can set which repeater populates the table of contents by setting the toc='true' value in your repeater tag.
Here's the syntax for a repeating item that populates your table of contents and includes a title, description and image.
<repeater toc='true'>
<$title link='true' default=''$>
<$description default=''$>
<img src="<$imagesrc link='true'$>" width="200">
</repeater>
As you can see, the entire repeating area is wrapped in an opening and closing <repeater> tag. Inside this we have the <$title$>, <$description$> and <$imagesrc$> tag. Your client will have full WYSIWYG editing capabilities for the <$description$> content.
If you want to include an image in the repeater, place the <$imagesrc$> tag in place of the normal image URL. You'll notice we also specify a width for this image. This means that every image your client adds to their repeating items will automatically be resized to a width of 200 pixels.
You can include any HTML and CSS formatting within the <repeater> tags to style your repeating elements. For our example email above, the main <repeater> item in the right column looks like this:
<repeater toc='true'>
<h2><$title link="true" default='Enter title here'$></h2>
<img src="<$imagesrc link='false'$>" width="160" height="151"
align="right" hspace="10">
<$description default='<p>Enter body content here</p>'$>
<p class="top"><a href="#top">Back to top</a></p>
</repeater>
Connect a repeater with the table of contents (optional)
By adding the optional toc='true' attribute to your repeater tag, the titles from the repeater will automatically be added to the table of contents as your client adds their content (read more).
Make your title or image a link (optional)
By adding the optional link='true' attribute to your title or imagesrc tags, your client can easily add an associated link to that element via the editor.
Set default values for title and description (optional)
By adding the optional default='Your text here' attribute to your title or description tags, we'll display that text instead of the standard "title" or "description" placeholder text. This can be great to add reminders or guidelines to your templates that give your client a better indication of what content to add where. Your default values can be simple plain text or even full HTML.
Table of contents
If you've got a repeating item in your email, we can automatically create a table of contents for your client based on the title the client adds (which will be inserted where you have the <$title$> tag). Here's the syntax:
<tableofcontents>
<$repeatertitle$>
</tableofcontents>
Just like the repeating item, we wrap a <tableofcontents> and </tableofcontents> tag around the area that will repeat. You also need to include the <$repeatertitle$> tag, which is where the title itself will be displayed.
Here's a sample of how the table of contents would be formatted for our example email:
<ul>
<tableofcontents>
<li><$repeatertitle$></li>
</tableofcontents>
</ul>
Handling table of contents with multiple repeaters
Your table of contents can only reference a single repeater in your template. If you have one repeater item in your template, that will be used for your table of contents by default. If you have more that one repeater, add the toc='true' attribute to the repeater you want to be used. If you have multiple repeaters and no toc='true' attribute is present, we'll use the first repeater found in your code.
Individual items
For all those one-off bits of text or images that don't need to repeat, you can use the individual item tags. These include:
<$title link='true' default=''$>
<$description default=''$>
<img src="<$imagesrc link='true'$>" width="200">
Your client will have full WYSIWYG editing capabilities for the <$description$> content. Just like inside a repeater, place the <$imagesrc$> tag in place of the normal image URL you want your client to be able to update. Make sure you specify a width for the image, as any image your client adds in its place will automatically be resized to that width.
Make your title or image a link (optional)
By adding the optional link='true' attribute to your title or imagesrc tags, your client can easily add an associated link to that element via the editor.
Set default values for title and description (optional)
By adding the optional default='Your text here' attribute to your title or description tags, we'll display that text instead of the standard "title" or "description" placeholder text. This can be great to add reminders or guidelines to your templates that give your client a better indication of what content to add where. Your default values can be simple plain text or even full HTML.
Link to a web based version
It's considered best practice to link to a web based version of your email for those recipients that prefer to read your email in their browser, or are using an outdated email environment that does not support your email formatting. The syntax for this is:
<webversion>link text or image</webversion>Anything in between these 2 tags will become a link to the web-based version of your template, which will reside at your client's personalized sub-domain.
Forward to a friend
By adding a forward to a friend link to your client's template, their recipients can easily pass the email on to up to 5 friends at a time. You can even customize how this Forward to a Friend page looks for each of your clients. To include a Forward to a Friend link, use the following tags:
<forwardtoafriend>link text or image</forwardtoafriend>Anything in between these 2 tags will become a link to this client's customizable Forward to a Friend page, which will reside at the generic forwarding domain forward-email.com.
The all important unsubscribe link
Every template you design must include a single-click unsubscribe link. You can customize what happens when this link is clicked on a per-list basis. The syntax for the unsubscribe link is:
<unsubscribe>link text or image</unsubscribe>Anything in between these 2 tags will become a single-click unsubscribe link for each of your client's recipients.
Date tags
The date tags make it easy to add date related text to a template that updates based on when your client sends their email campaigns. Instead of relying on your client to add the text "November Newsletter", you could automate this by using the current month name tag, such as "<$currentmonthname$> Newsletter". We'll populate the tag with the month the campaign is being sent automatically when they send the campaign.
The following date tags can be used anywhere in your templates:
<$currentday$>
<$currentdayname$>
<$currentmonth$>
<$currentmonthname$>
<$currentyear$>
Let's say your client sends a campaign on Wednesday, 18th October 2006. Each tag will be converted as follows:
<$currentday$> = 18
<$currentdayname$> = Wednesday
<$currentmonth$> = 10
<$currentmonthname$> = October
<$currentyear$> = 2006
Personalization tags
By adding any of the following tags to your subject or campaign content, we will dynamically change these values for every recipient when sending the campaign.
[firstname,fallback=customer] = First name
[lastname,fallback=customer] = Last name
[fullname,fallback=customer] = Full name
[email] = Email address
When personalizing a recipients name, you can provide a fallback value which is displayed if that field is empty for that recipient. If you would like nothing displayed when a recipient's name field is empty, simply leave the fallback value blank (e.g. [firstname,fallback=]).
Template Heaven
To get you started, we've put together dozens of ready-to-go MailBuild templates that look great in all the major email clients.
Customer Gallery
Check out some of the amazing designs our customers have produced using our simple tagging system.
