Adding a Snippet to a Template

Once you've finished creating a snippet, it's time for the fun part: adding it to a template to streamline your work.

# In this article

# About snippet expressions

A snippet expression is a Handlebars expression that references a snippet by name, so it is inserted into the template at send time. Iterable generates a basic snippet expression when you create a snippet, but you can also modify it to pass variables, include data feed fields, or add conditional logic.

Snippet expressions contain four main parts:

# Example default snippet expression

This is the default snippet expression for a snippet named mySnippet. It uses triple curly braces to render the snippet's content as HTML, and doesn't use any variables to generate dynamic output or personalization.

{{{ snippet "mySnippet" }}}

# Example snippet expression with variables

In this example, snippet tells Iterable to reference a snippet, Your_Snippet_Name is the snippet name to reference, and variable 1 and variable 2 are strings passed from the template to the variables included on this snippet's definition. These variables are then used to populate the snippet's content.

This expression uses triple curly braces to render the snippet's content as HTML.

{{{ snippet "Your_Snippet_Name" "variable 1" "variable 2" }}}

# Adding a default snippet expression to a template

Iterable provides a couple of ways to copy a default snippet expression for convenience. You can:

• Use the Snippet button, which is available when you're editing the details for an email or in-app template.
• Copy the snippet expression from the Content > Snippets page or the Snippet details page.

This is a fast way to get moving with your snippets. However, if you need to modify the snippet expression, you'll need to create a custom snippet expression. To learn more about creating a custom snippet expression, see Creating a custom snippet expression.

# Using the Snippet button in a template editor

Email and in-app templates only

The Snippet button is available in the WYSIWYG and Drag and Drop editors for email and in-app templates. It adds a snippet expression to the template at the cursor position.

Look for the Snippet button as you're editing a template to copy a snippet expression. For example, here's the Snippet button below the WYSIWYG editor, while editing an email template:

Clicking Snippet brings up a window that shows which snippets are available in your project.

In this window, select a snippet and click Copy. Then, paste the snippet in your template (or click Insert Snippet, a button available in some scenarios), and save it.

# Creating a custom snippet expression

You can create a custom snippet expression by modifying the default snippet expression using Handlebars syntax.

This is useful if you need to:

• Control whether the snippet renders at all, using Handlebars conditional logic in the template to determine when to render the snippet (and when to skip it)
• Control what the snippet renders, using conditional logic in the snippet's content and passing variables to the snippet to determine what to show
• Control whether the snippet renders as HTML or plain text
• Include data feed fields in the snippet, which are fetched from an external source at send time

# Handling HTML in snippet content

For example, consider a snippet named Bold_Hello with this content:

<strong>Hello!</strong>

This snippet can be rendered differently depending on the curly braces used:

# Providing values for snippet variables

If the snippet expression you've added to the template has any variables, you'll need to provide values for them. You can pass strings, numbers, booleans, hex colors, user profile fields, Handlebars variables, and data feed fields.

Keep the following in mind:

For the complete syntax and examples for each value type, see Customizing Snippets with Variables.

# Snippets with data feeds

Snippet expressions can also include data feed fields, which are fields that are fetched from an external source at send time. This can impact how you build the snippet expression and how you pass values for variables.

To learn more about how to use data feed fields in snippets, and how to build a snippet expression that includes data feed fields, see Using Data Feeds in Snippets.

# Using conditional logic with snippets

You can wrap a snippet expression in a Handlebars conditional to render a snippet only when certain conditions are met. This is useful when a snippet is relevant only to some users or some campaigns.

For example, to render a promotional banner only for users who have opted in to promotions:

{{#if promoOptIn}}
  {{{ snippet "promo_banner" }}}
{{/if}}

Or to render a different footer snippet based on the user's locale:

{{#ifMatchesRegexStr locale "es"}}
  {{{ snippet "email_footer_es" }}}
{{else}}
  {{{ snippet "email_footer_en" }}}
{{/ifMatchesRegexStr}}

For a full reference of available conditional helpers, see Handlebars Reference: Conditional Logic Helpers.

# Testing the template

After you've added a snippet to a template, test the template. To do this:

• Use the Preview page to view your template for different user profiles.
• Send proofs to yourself and other test users.

If the content of the snippet isn't styled as you expect:

• Try adjusting the styles applied to the snippet expression in the template editor.
• In the template editor, adjust the HTML associated with the snippet expression (for example, in the Source pane of the WYSIWYG editor, or the Content Properties of an HTML block of the Drag and Drop editor).

As a last resort, you can also adjust the styles applied in the definition of the snippet, but this affects all templates that use it.

# Using snippets with the Drag and Drop editor

The Drag and Drop editor adds HTML to your template to build the visual design as you'd expect. However, this boilerplate HTML can affect how your snippets render in the final version of your message. The following sections describe how to use (and troubleshoot) snippets in the Drag and Drop editor.

# Inserting a snippet with HTML content

When using the Drag and Drop editor to insert a snippet that contains custom HTML (any HTML tags at all, such as <table>, <div>, <p>), be sure to:

• Use triple curly braces to reference the snippet:

  {{{ snippet "custom_HTML_snippet" }}}
  

• Place the snippet in an HTML block, which wraps your snippet's content in <table> and <div> tags. This is less likely to cause styling difficulty than the default tags added by a Text block.

• If your snippet has complex code, include whole tables (<table>...</table>), which make it easier to stack and nest items in your template.

# Inserting a text-only snippet (less common)

If you've created a snippet that contains only text (no HTML code) and you want to insert it into a template using the Drag and Drop editor, use the Text block. This places your snippet within a <p> tag. Any formatting you apply to that <p> tag in the Drag and Drop editor applies to the snippet's text.

You can also use a Paragraph or Title content block (they also place your snippet within a <p> tag).

Once you've added a Text block to your template, you can add your snippet to it using either double or triple curly braces, like this:

{{ snippet "text_only_snippet"}}

This also works if your snippet uses Handlebars for dynamic text. For example:

{{#ifMatchesRegexStr locale "es_ES"}}
   Hola amigos,
{{else}}
   {{#ifMatchesRegexStr locale "en_US"}}
      Hello there friends,
   {{/ifMatchesRegexStr}}
{{/ifMatchesRegexStr}}

# Troubleshooting snippets in the Drag and Drop editor

Always test snippets thoroughly (preview with data, proofs, etc.) before sending, especially if they contain HTML content.

To troubleshoot a snippet that doesn't render as expected:

1. Save the template that references the snippet.

2. Export the template's HTML. With the template open, click the button labeled by three dots, and choose Export HTML.

   

3. In the exported HTML, check for boilerplate HTML and CSS inserted by the editor, since it can affect how the snippet renders. Adjust your snippet and template as necessary.

# Troubleshooting

# HTML displays as plain text

If a snippet's HTML renders as visible tags—for example, <strong>Hello</strong> appears in the message instead of displaying as Hello—the snippet expression in the template is using double curly braces. Change to triple curly braces:

{{{ snippet "My_Snippet" }}}

For more information, see Handling HTML in snippet content.

# Variables are blank or in the wrong position

If the snippet renders but variable values are missing or in the wrong place:

• Check variable order. By default, values are assigned positionally—the first value maps to the first variable defined in the snippet, the second value to the second variable, and so on. To avoid order dependency, use named parameters.
• Provide a value for every variable. If a value is missing, that variable renders as blank.
• Check the value type. Make sure the value you're passing is appropriate for the variable. For example, passing true to a color variable won't produce a valid CSS color.
• Quote string values in named parameters. When using named-parameter syntax (key=value), string values must be wrapped in double quotes. A bare identifier like login_type=sign_up is treated as a variable reference, not the literal text sign_up. Use login_type="sign_up" instead. Booleans and numbers (for example, required=true, count=3) do not need quotes. For details, see Named parameters.

# Snippet content looks different than what's in the editor

If the snippet appears to render outdated or unexpected content, confirm that your most recent changes were saved. Iterable does not auto-save snippet edits— click Save Snippet after making changes.

# 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

• Customizing Snippets with Variables
• Creating and Managing Snippets
• Using Data Feeds in Snippets
• Snippets: Frequently Asked Questions