Customizing Snippets with Variables

Variables are dynamic fields added to a snippet's definition. They allow individual templates to customize the snippet's output as needed, while still taking advantage of the content reuse that snippets provide.

For example, imagine a snippet whose content includes a Sign Up Now button. You might use this button in any campaign that's attempting to drive sign-ups. But, what if you could change the button's label, and then reuse it in other scenarios, too? For example, maybe you need the same button, but with a Show Me! label. Snippet variables make this possible.

You can use variables to dynamically affect things like text, URLs, CSS style attributes, conditional logic, and more.

# Table of contents

# An example

To demonstrate how to use variables in a snippet, let's build a snippet that can be used to show one of three links:

• Sign up now!
• Take me to my account!
• Check out the website!

Additionally, we'll set things up so that it's possible to customize the color of the link.

Both options—the link we display, and the color—will be determined by the values passed to the snippet's variables by our template.

# Step 1: Create a snippet

First, let's build the snippet. Here's what it will look like when we're done:

To get started building a snippet, go to the Content > Snippets page and click New Snippet.

# Step 2: Add variables to the snippet

While building this snippet, we've added a couple of variables to its definition: one that it will use to determine which link to display, and another that determines the link color.

To add variables, use the Add variable button. In the example above, we added two variables: login_type and color.

When you're making snippets, you can add as many variables as you need. Remember, though, that when a template uses a snippet, it has to provide values for all variables that the snippet requires. If the snippet requires too many variables, it may too hard to use.

# Step 3: Use the variables in the snippet's content

Whenever you add a variable to a snippet's definition, be sure that your snippet actually uses the variable in its content. Otherwise, there's no reason for the variable to exist in the first place.

Here's our snippet's content:

{{#if (eq login_type "sign_up")}}
  <a style="color: {{color}}" href="https://www.example.com/signup">Sign up now!</a> 
{{else}}
  {{#if (eq login_type "sign_in")}}
    <a style="color: {{color}}" href="https://www.example.com/login">Take me to my account!</a>
  {{else}}
    <a style="color: {{color}}" href="https://www.example.com">Check out our website!</a>
  {{/if}} 
{{/if}}

(Since this snippet contains HTML, we've placed it in the Source pane of our editor.)

This content examines the snippet's login_type variable, using it to determine which link to display.

• If the value stored in login_type is "sign_up", the snippet displays the Sign up now! up link.
• If the value stored in login_type is "sign_in", the snippet displays the Take me to my account! link.
• In all other cases, the snippet displays a generic Check out our website! link.

# Step 4: In your template, provide values for the variables

After creating and saving your snippet, you can include it in a template. When you do this, you'll need to provide values for any of the variables it requires.

There are various ways to pass values to variables. For example, for a snippet that requires a single variable, you can:

• 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}}}
  

Let's pass different values to the variables in our example snippet, to see the different links and colors that it will render:

{{{ snippet "login_switcher" "sign_up" "#FF0000" }}}
{{{ snippet "login_switcher" "sign_in" "orange" }}}
{{{ snippet "login_switcher" "other" "purple" }}}

Using Preview with Data, we can see how these different snippet expressions all render:

Each snippet expression results in a different link/color combination, based on values included in the snippet expression.