Tutorial: Create Your First Snippet

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

# Steps

# Step 1: Create a new snippet

First, create a new snippet.

Go to Content > Snippets and click New Snippet.

# Step 2: Give the snippet a name

Choose something descriptive like Email_Button.

# Step 3: (Optional) Add a variable

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

Create a variable that templates can use to change the color of the button that the snippet displays.

1. Click the Add variable button.

2. Give the variable a name, like buttonColor.

   

# 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.

# 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>

# (Optional) Adding a variable to a snippet's content

If you give a snippet a variable, make sure to reference it in the snippet's content. Otherwise, the variable has no effect.

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

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

# Styling snippet content

After adding your snippet to a template, test it to confirm styles appear as expected. Styles applied to a snippet definition affect every template that uses it, and styles applied to the snippet expression in the editor may not always override the snippet's own styles.

For detailed guidance on how to manage snippet styles—including how to override snippet styles from within the template editor—see How do I style a snippet?

# Step 6: Save the snippet

When you're finished setting up your snippet, click Save 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 Adding a Snippet to a Template.

# Want to learn more?

For more information about some of the topics in this article, check out this Iterable Academy course. Iterable Academy is open to everyone — you don't need to be an Iterable customer!

Iterable Academy

• Product Bite: Creating and Applying Snippets

Support docs

• Creating and Managing Snippets
• Adding a Snippet to a Template
• Customizing Snippets with Variables
• Snippets: Frequently Asked Questions