Lesson 1: Zephyr Basics

Zephyr is Engage by Sailthru's powerful template language, which enables the automation and creation of dynamic templates that intelligently display content. It is used to personalize emails, pull relevant content or merchandise from your data feeds, set up email triggers, and more!

This lesson focuses on the fundamentals of Zephyr. A foundation is important, so let's get started!

Select Result to see the answer for each exercise.

1.1 Zephyr Fundamentals

Zephyr consists of written code surrounded by curly brackets. { } These brackets let the system know you are writing in Zephyr.

Text Strings

Read the following two lines, then check the dropdown. They are both lines of text, but one is processed by Zephyr. Notice the subtle difference that makes.
"This is not Zephyr, just text. In code, text is called a string." {"This is Zephyr because there are curly brackets. Submit and notice the quotes."}

The brackets in the examples above are telling the system to do something with the code you provided inside them. Yes, even plain text can be code. The first line, without brackets, was left alone, and included in the resulting HTML code as-is. On the second line, you used Zephyr to 'render' that plain text, which is a coder's way of saying you had the result of the Zephyr code inserted into the HTML.

Math

You will use Zephyr to perform lots of actions for you, from rendering user information, URLs, or content to calculating a discount price or deciding a user's price point. Let's try a bit of basic math with Zephyr.
This renders as: 7

Why not make that look better?
renders as: 4 + 3 = 7

Commenting

You may also want to leave a comment to yourself but not want others to see it in the rendered result. Like HTML, Zephyr offers commenting. Just surround the text inside your brackets with asterisks.

{*Using asterisks turns a line into a comment so it doesn't appear in the html.*} Only this text {"and this uncommented Zephyr"} will appear. {*You can leave comments to let others know (or to remind yourself) what your code does.*}

Rendered ZephyrOnly this text and this uncommented Zephyr will appear.

Exercises:

Complete the following with Zephyr

"Turn this into a Zephyr comment."
Try uncommenting this one too: {*If you can see this, it's no longer a Zephyr comment. Don't forget to add quotes if you want the text to be rendered in the HTML output.*}
We see price as a number and a currency/denomination, but to computers they are just numbers until you assign a currency/denomination. You can start with the math, and add the rest later.
- What does 5 dollars times 5 dollars equal? (5 * 5)
- What does 10 percent of 30 dollars equal? (30 * .10)

Check Your Zephyr

Your Zephyr should resemble the following:


{*Turn this into a Zephyr comment*}
{"If you can see this, it's no longer a Zephyr comment. Don't forget to add quotes if you want the text to be rendered in the HTML output."}
{5*5}
{30*.10}

Automation and Personalization

If you had to input all the information yourself, that wouldn't save you any time and certainly wouldn't allow personalization. The next two sections will introduce some of Zephyr's key features for automation and personalization.

1.2 Control Statements

A core functionality is personalizing the content displayed to your users. This section gives you the single best tool to extend user-specific differentiation into every aspect of your templates, from a segment-specific greeting (and default fallback welcome) to showing or hiding full HTML sections. Control statements allow the code to make those decisions. There are many different forms of control statements but we are starting with the most ubiquitous and useful: The "if condition" statement.

Relational Operators

You will use the if statement to show content or assign variables only IF a certain condition is true. Lets see how you create a condition that is true. A common case is a comparison. Is 'a' equal to 'b'? Is 'a' greater than 'b'? We can translate that comparison into the Zephyr langauge with the greater than symbol.

Is 4 greater than 2? {4 > 2}

Try changing the greater than sign to a less than sign. Then change the 4 to a 2.

{4 < 2}

Conditional Statements

Notice how the previous result is always "true" or "false". The true/false values are called booleans, which are key to using "if" statements. If statements always need a value of true or false to decide what to do. Let's look at the simplest if statement.

{if true} First Option! {*Will show when the first if is true*} {else if true} Fallback Criteria! {*Will show when the first if is false, but this if is true*} {else} Plan Z, the default case when all else fails! {*Shows when every other check is false*} {/if}

If you change "true" to "false", nothing will show. That is the essence of the if statement. The code between the first "if" and the second "if" will run and show (render) only if the comparison after the first "if" is true. It will skip the whole "if" section when the value is false. This example was simple to make the concept clearer, but in the next section we will start using vars and the information stored in the platform to make powerful "if" conditionals. First we need to introduce the other comparisons like "equals", to create other boolean true/false values as well as learning the "if else" variation for doing related comparisons.

Additional Relational Operators

"Equals" can be used on text as well as numbers and is done in Zephyr with two equals signs ==, you will learn why it has to be two equals signs in the next section. Play around with the following. Try to get the following two words equal to each other.

Strings (text) will normally use the equals sign, but for number comparisons you can also use "greater than or equal to" >= and its opposite <=. Lastly, you can reverse any comparison by using the exclamation mark in front of the comparison.

preceding true with ! makes it 'not true' : {!true} != becomes a test for 'not equal to' : {5 != 5}

If-Else Statements

One last thing before we move on to the other good stuff. You can stack on other "if" statements that will only run when the first if statement is false. Not only that, you can have a default section that will render only when all other "if" statements were false.

{if true} First Option! {*Will show when the first if is true*} {else if true} Fallback Criteria! {*Will show when the first if is false, but this if is true*} {else} Plan Z, the default case when all else fails! {*Shows when every other check is false*} {/if}

In the Zephyr example above, initially you'd only see the first Option. First Option! If you switch the first true value to "false" and try again, then only the second option will render. Fallback Criteria! Do the same with the second. When the first two blocks are false, the third option will render. Plan Z, the default case when all else fails! Of course, in your Zephyr code, you won't be hard-coding the words 'true' or 'false', but instead using formulas that will evaluate to true or false. Imagine how powerful all this will be when you want to conditionally show different aspects of your products or content to a user based on each item's attributes. Let's go learn about variables so we can start building them into your "if" structures.

1.3 Variables

Variables are containers to hold and give you access to your information. It's how you access and render user names, optout links, content and more in your templates. All of the information you import on your user's will be held in variables -or vars as we like to shorten them. We have created a lot of useful vars that you will be able to use in your templates. You can and will create your own vars too. Let's learn how to use them by creating some vars of our own.

Assign Variables

You fill in, or assign, the var with the information through an assignment statement. Here is the basic format.

var_name = information

It's the name you want to give the var followed by an equals sign, which is immediately followed by the information you want the var to hold. Remember, that information can be pretty much anything you want. The following example assigns a var.

{I_am_a_var = "I am text."}

Render Variables

To actually use the var, we need to 'call' it in curly brackets { } so Zephyr will 'render' it. Lets call I_am_a_var by placing its variable name inside inside Zephyr brackets.

{I_am_a_var = "I am text. Submit but read ahead."} {I_am_a_var}

To recap, a var that you create needs to be assigned data. Then, you can 'call' the var, and the var's data value will be 'rendered' (used/presented). In addition to rendering the vars that you have created, you can render default vars that are created by the system. Lets try calling the information you uploaded about your users. Hopefully you uploaded a var like first_name but everyone uploaded their user's email, so we will access their email address in a welcome greeting.

Hello {email}

But you don't want to use their email, you want to use their first name! When I onboarded, I uploaded Ms Zephyr Trainer with her name in a var called first_name so lets use that!

Hello {first_name}

But what if it doesn't exist? It turns out that if a var doesn't exist it will return false, so we can use "if" statements from the last section. Let's try using a var called first, this time.

{if first} Hello {first}, {else} Hello Valued user, {/if}

So far we have only included text in our vars, but they can contain many different kinds of information, including numbers and even other variables.

{discount_percent = .30} {*You can now use that var inside a math statement. Lets use it to apply a discount.*} Discounted price: ${discount_percent * 90.00}

Arrays

A var doesn't even need to be limited to a single piece of information like a number or phrase. In fact, it can hold a collection of information in what is called an array. Think of arrays like a list. An analogy may help. When you go grocery shopping you need peas, carrots, celery, and lentils so you write a shopping list: -Peas -Carrots -Celery -Lentils Then in the store, when you need something you consult your "grocery list". That grocery list is an array! To convert it into a Zephyr array you start with a name and an equal sign like before. To indicate this is an array, use a square bracket and include each item separated by a comma.

{grocery_array = ["Peas","Carrots","Celery","Lentils"]}

Each one of those items is called a member of the array, so Lentils is the last member of grocery_array. You can call the variable's name by itself to see all the values inside of it. To use/see a specific member (item) in the array you will use its position to call it. Although, unlike how you or I would count positions, arrays index the position by counting up from 0, not 1. The position (index) number needs to be in square brackets [ ] after the array variable's name.

{grocery_array = ["Peas","Carrots","Celery","Lentils"]} The full array: {grocery_array}<br />{*<-- HTML line break*} The third member, i.e. index 2, in the array: {grocery_array[2]}

Congratulations! You've completed Lesson 1: Zephyr Basics! When you're ready, continue to Lesson 2: Data Basics.