Snippets

Overview

Template markup can be broken down into reusable parts. We refer to these parts as "snippets"

Each snippet has an html template and may also have some field related data. When an email is saved, snippet data is combined with snippet markup to form HTML for that snippet. All snippet HTML is then combined together and this becomes the HTML for your email.

Snippet templates are powered by an open source templating framework called "handlerbars.js". See  http://handlebarsjs.com/ for more information.

General Rules

The email editor interacts with snippets via some specific data attributes. If these data attributes are not supplied then the snippets will not be properly usable.

Each snippet must have a single root element. This includes embedded style tags. Style tags must sit inside the root level element, not above or below it.

Good snippet markup

<tr data-intilery-instance-id="{{id}}">
    <style>
        /*some style stuff*/
    </style>
    <!-- some content -->
</tr>

Bad snippet markup:

<style>
    /*some style stuff*/
</style>
<tr data-intilery-instance-id="{{id}}">
    <!-- some content -->
</tr>

As you can see in the example above, data-intilery-instance-id="{{id}} is included as an attribute on the top level element.

This attribute is mandatory for all snippets. It is used by the email editor to uniquely identify each snippet instance in the email.

Snippet Types

Our master snippets fall into two categories, container snippets and content snippets.

Container snippets allow you to set up a physical structure that you then put other snippets into.

Content snippets are used to display text, images, html etc.

By separating layout structure from content, you can create smaller, more granular snippets. Less markup makes things easier to maintain and smaller snippets can be reused inside different parents.

For example, we have a single image snippet. But it can be put into different containers to give different visual feels.

One image snippet being put into different containers.

Master Snippets

We have created some snippets that are available to all accounts. These consist of some different container snippets and a few standard content snippets such as "text" and "image" snippets.

They are quite flexible. You can see how these snippets are constructed via the snippet management screen. The master snippets are read only for you.

It may be that you want to use our master snippets as a base for your own. For example, you may want to build a "4 column" container snippet. You can use our "3 column" snippet as a good place to start.

If you build your own snippets in a certain way, then you can combine them with the master snippets. For example you may be able to use the master text snippet in your own container. Or you may put your own image snippet inside one of our master containers.

Our master content snippets all have tr as their root level element. So if you design your containers so that they contain tr tags then all our master snippets can be used with your containers.

If in doubt, look at the master snippet markup and get a feel for how they work.

Still need help? Contact Us Contact Us