Articles in this section

Tutorial: Create Your First Snippet

In this tutorial, we'll build a simple snippet that displays a sign-up button in a message:

Full snippet

Steps

Step 1: Create a new snippet

First, let's create a new snippet.

  1. Navigate to Content > Snippets.

  2. Click the New Snippet button.

    The New Snippet button

Step 2: Give the snippet a name

Choose something descriptive like Email_Button.

TIP

It's a good idea to choose one naming convention and stick with it for all of your future snippets. (For example: Capitalize each word and separate words with underscores.)

Naming the snippet

Step 3: Add a variable

Variables make it possible for each template that references a snippet to customize it as needed.

Let's create a variable that templates can use to change the color of the button that our snippet displays.

  1. Click the Add variable button.

  2. Give the variable a name, like buttonColor.

    Adding a variable

Step 4: Set the snippet description

The snippet description is a great way to let your teammates know what a snippet is for and when they should use it in a template.

Enter some text that describes what this snippet does. For example, Adds a sign-up button to an email.

Adding a description

Step 5: Define the snippet's content

In the Editor section, add your snippet content. You can use HTML, CSS, and Handlebars. For example, to render a button, you might use code similar to this:

<table role="presentation" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td align="center" bgcolor="{{buttonColor}}" style="border:1px solid ##2489A9; padding:18px 50px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; display:block !important">
        <a target="_blank" href="https://example.com">
          <span class="button-text" style="font-size: 20px; color: #FFFFFF; text-decoration: none; display: inline-block; line-height: 100%">
            <strong>Click me!</strong>
          </span>
        </a>
      </td>
    </tr>
  </tbody>
</table>

The buttonColor variable

If you give a snippet a variable, you should use it (somehow or other!) in the snippet's content. Otherwise, why have the variable at all?

Above, we gave our example snippet a buttonColor variable. In the snippet's content, a Handlebars expression—{{buttonColor}}—puts the value of that variable in the HTML output of the snippet (here, it's used to set a bgColor style).

Templates that use this snippet should always provide a buttonColor value. For example, here's how a template might use this snippet to display a green button:

{{{ snippet "Email_Button" "#00FF00" }}}

(#00FF00 is a hexadecimal color code for green.)

The buttonColor variable makes it possible to reuse this snippet in various templates, even if they require different colors.

Styling snippet content

As you build a snippet, test it with different templates to make sure that its styles appear as you'd like.

Some things to consider:

  1. In cases where a template needs complete control over the styles of the content rendered by a snippet, it's probably best not to use the snippet, and to instead add the snippet's content directly into the template. You could potentially modify the styles of the snippet itself, but that would affect all templates that rely on the snippet, which may not be preferable.

  2. Even if you add styles to a snippet expression that you've placed in a template editor, the styles contained in the snippet definition itself can still win out. Don't assume that applying a style to a snippet expression (in any editor) will necessarily get you the output that you expect.

  3. It is sometimes possible to use HTML code to override the styles contained in a snippet definition:

    • In the Drag and Drop editor, if you place a snippet expression in an HTML block (rather than a Text block), you can add additional HTML to the HTML block's Content Properties pane.
    • In the WYSIWYG editor, you can add HTML to the Source pane.
    • In the Side by Side editor, you can edit the HTML directly.

In all cases, testing is the name of the game. Use Preview with Data and send proofs of your templates, with various user profiles, before sending or activating a campaign.

Step 6: Save the snippet

When you're finished setting up your snippet, click Save snippet.

Saving the snippet

Step 7: Start using the snippet

Now that you've created your first snippet, you can start using it in your templates! To learn how, see Add a Snippet to a Template.

Related articles