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

# Instructions

To use a snippet in a templates, follow these steps:

# Step 1: Insert the snippet expression into a template

To add a snippet to a template, paste its snippet expression, in any field that accepts Handlebars. For example:

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

(In this example, variable 1 and variable 2 are strings passed from the template to the variables included on this snippet's definition.)

Iterable provides a couple of ways to copy a snippet's expression, so you don't have to enter it manually. You can:

• Use the Insert Snippet button, which is available when you're editing template details.
• Copy the snippet from the Snippets page or a snippet definition.

Be sure to read about using Snippets with the Drag and Drop editor.

# Using the Snippet button

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.

# Handling HTML found in a snippet

When placing a snippet in the template, you can use double curly braces or triple curly braces, depending on how you want your template to render HTML tags found in the snippet. For example, consider a snippet with this content:

<strong>Hello!</strong>

# Step 2: Provide values for variables (if there are any)

If the snippet expression you've added to the template has any variables, you'll need to provide values for them. There are various ways to do this.

For example, consider a snippet called mySnippet that requires a single variable:

{{{ snippet "mySnippet" myVariable }}}

Here are some ways you might pass a value to this snippet's variable:

• Pass in a string:

  {{{ snippet "mySnippet" "Fall Sale" }}}
  

• Pass in a hex color (which is also really a string):

  {{{ snippet "mySnippet" "#FF0000" }}}
  

• Pass in a number:

  {{{ snippet "mySnippet" 3.14 }}}
  

• Pass in a boolean:

  {{{ snippet "mySnippet" true }}}
  

• Pass in a user profile field:

  {{{ snippet "mySnippet" favoriteColor}}}
  

• Pass in a Handlebars variable:

  {{#assign "numberOfChildren"}}3{{/assign}}
  {{{ snippet "mySnippet" numberOfChildren}}}
  

# Step 3: Test your template and adjust its styles

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

• Use the Preview with Data 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 will affect all templates that use it.

# Using snippets with the Drag and Drop editor

The Drag and Drop editor adds HTML to your template, to make sure it renders as you'd expect. However, this boilerplate HTML can affect how your snippets render in the final version of your message. The follow descriptions describe how to use (and troubleshoot) snippets in the Drag and Drop editor.

# Inserting a snippet with custom HTML

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 will wrap your snippet's content in <table> and <div> tags (less likely to cause styling difficulty than the default tags added by a Text block).

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

# 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, we recommend using the Text block. This will place your snippet within a <p> tag. Any formatting that you apply to that <p> tag in the Drag and Drop editor will be applied to the 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}}
{{/ifMatchesRegesStr}}

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