Cheetah Loyalty Email Templates

Cheetah Loyalty

Email Templates

Developer Guide

Version

Date

Description

Reviewed / Approved by

1.0

August 2019

Initial release

Cheetah Digital Product Management

1.1

September 2021

Added version history

Cheetah Digital Product Management

Cheetah Loyalty Email Templates - Developer Guide

Cheetah Digital, Inc., 72 W Adams St 8th floor, Chicago, IL 60603

Printed in the United States of America

No part of this publication may be stored in a retrieval system, transmitted, or reproduced in any way,

including but not limited to photocopy, photographic, magnetic, or other record, without the prior

agreement and written permission of Cheetah Digital, Inc.

Cheetah Digital, the Cheetah Digital logo, and other Cheetah names referenced herein are trademarks of

Cheetah Digital, Inc., and may be registered in certain jurisdictions.

Other product names, designations, logos, and symbols may be trademarks or registered trademarks of

their respective owners.

PRODUCT MODULES AND OPTIONS. This guide contains descriptions of modules that are optional and

for which you may not have purchased a license. As a result, your software implementation may differ

from descriptions in this guide. To find out more about the modules your organization has purchased, see

your corporate purchasing agent or your Cheetah Digital sales representative.

U.S. GOVERNMENT RESTRICTED RIGHTS. Programs, Ancillary Programs and Documentation,

delivered subject to the Department of Defense Federal Acquisition Regulation Supplement, are

“commercial computer software” as set forth in DFARS 227.7202, Commercial Computer Software and

Commercial Computer Software Documentation, and as such, any use, duplication and disclosure of the

Programs, Ancillary Programs and Documentation shall be subject to the restrictions contained in the

applicable Cheetah Digital license agreement. All other use, duplication and disclosure of the Programs,

Ancillary Programs and Documentation by the U.S. Government shall be subject to the applicable

Cheetah Digital license agreement and the restrictions contained in subsection (c) of FAR 52.227-19,

Commercial Computer Software - Restricted Rights (June 1987), or FAR 52.227-14, Rights in Data—

General, including Alternate III (June 1987), as applicable. Contractor/licensor is Cheetah Digital, Inc.,

72 W Adams St 8th floor, Chicago, IL 60603.

Cheetah Loyalty Email Templates - Developer Guide

Contents

Introduction

Sample Email Templates

Template Sets

Testing Email Templates

Creating a Template Set

Step 1 - Create an email template file

Step 2 - Add the main Layout and Template

Step 3 - Add Editable Sections

Heading

Subheading

Body

Details

Action

Primary Image

Styles

Step 4 - Color Palettes

Step 5 - Add Dynamic Content sections

Step 6 - Add Content Tokens

Special Email Tokens

Custom Tokens

Links

Sample Template Set

Advanced Topics

Configure Dynamic Section to Render a Reward Based on Member’s Preference

Cheetah Loyalty Email Templates - Developer Guide

Introduction

This is a guide to creating Cheetah Loyalty email templates. Cheetah Loyalty Email messages

are based on reusable email templates. The email template sets the email structure, such as

tables for layout, header/footer. The template defines editable sections for the marketer to enter

custom content into a specific email.

Email templates define the following:

● Header (logo, links, snippet, "view in browser" etc.)

● Footer (address, unsubscribe link, etc.)

● Structure of the email, such as tables (should be responsive)

● Default color palette

● Personalized content tokens

● View in Browser link (usually in header)

● Unsubscribe link (usually in footer)

● Content sections where the marketer can create ad-hoc content for a specific email

● Dynamic content sections where the marketer can insert Cheetah Loyalty content, such

as offers and challenges

Sample Email Templates

Cheetah Loyalty provides sample responsive HTML templates already pre-installed in the

program environment. These are great examples and you should review them prior to

attempting to create your own templates. The simplest is a "blank" email template with a single

large editable section for the marketer to enter any content they want. However, this increases

the amount of email testing the marketer must perform, since any layout might behave

differently across email clients. So, it is better to create templates which guide the marketer on

where content should be placed.

Template Sets

Cheetah Loyalty templates are grouped into Template Sets, which are named and versioned so

that marketers can easily choose the template they want to use. Each Cheetah Loyalty

Template Set is an HTML file uploaded into the Cheetah Loyalty Marketing Console (in Admin >

Content > Template Sets). Since the Template Sets are so flexible, most customers only use a

single email Template Set.

Cheetah Loyalty Email Templates - Developer Guide

Testing Email Templates

Emails need to look professional and correct across various email clients. Therefore any custom

templates need to be tested carefully. There are three parts to this:

1. Upload Template Set. When uploading a Template Set file, the file will be parsed and

some validation performed to ensure it meets the required structure/syntax. This does

not ensure that the email will look good, only that it can minimally be parsed and used by

the Cheetah Loyalty.

2. Content Editor. Cheetah Loyalty emails have a content editor which uses a Template Set

to allow marketers configure their email contents before reaching their target audience.

The content editor loads and parses the Template Set, so any syntax or structural

errors/bugs in the Template Set can result in problems in the content editor. Therefore, it

is important to test that a custom template appears and behaves correctly in an email

content editor before turning it over to the marketers for use.

3. Email Clients. Test emails using the template in common email clients. Note that email

templates built by Cheetah Loyalty (standard or as a service) will have been tested using

Litmus before being delivered to the customer.

Creating a Template Set

Template Sets are HTML files which will be uploaded into the Cheetah Loyalty Marketing

Console. Template Sets are required to follow certain rules for structure and syntax, so that the

file can be parsed and used in Cheetah Loyalty. This section will guide you in building your own

template set.

Step 1 - Create an email template file

This is an HTML document; the only mime type supported is .html extension, e.g.

"email_template_set.html". You can use whatever text editor and source code repository you

prefer, but word processors (e.g. MS Word) should never be used for writing code.

Step 2 - Add the main Layout and Template

Wrap your template in Cheetah Loyalty layout and template markup as shown below. Whatever

is inside this wrapper will appear in

your email. All of the following code is required for every email template.

<div layoutId="email_body" layoutWidth="660" layoutMinHeight="1000"

layoutEmailSafe="true" layoutFixedTools="true" class="stl_layout">

<h1><i class="fa fa-envelope-o"></i> Email Body</h1>

Cheetah Loyalty Email Templates - Developer Guide

<h2>Email Template 1</h2>

<div class="stl_content" style="width: 100%; min-width: 600px

!important;">

</div>

Note that you can optionally have more than one template, which would be an additional HTML

element like this:

Step 3 - Add Editable Sections

You may define configurable sections in the editor by using the ff. sections. These must be

placed inside the <div class=”stl_content”></div> wrapper, and only one of each is

allowed.

Editable Sections are defined by a CSS class on an HTML element. Adding the CSS class

"stl_heading" to a DIV instructs the content editor to let the marketer edit the contents of that

DIV. Thus, the template developer can choose where the marketer should write copy and add

images.

Heading

Subheading

Body

The body is the main content area.

To enable more advanced editing controls in the content editor use mainbody instead of body.

This is often appropriate if the email has a single, large editable section such as for a newsletter

or "blank" template.

Cheetah Loyalty Email Templates - Developer Guide

Details

Details are used for the fine print at the bottom of the message such as offer details.

Action

The "action" is the the Call to Action (CTA).

Primary Image

Put the class "stl_image1" on an IMG element or the containing element.

Styles

Templates support custom CSS styling. However, note that you may still need to add inline CSS

styles for older email clients that do not support the <style> tag.

Step 4 - Color Palettes

Hardcoding colors into templates can prevent them from being reused, so Template Sets

support Color Palettes.

A Color Palettes is a set of colors that work together. Each palette has foreground and

background colors for the heading, subheading, body, details, and action.

Add colors to your template by using CSS classes as shown below, for the foreground and

background color. Note that frequently the background color should be placed on an HTML

element wrapping the content element.

<div class="stl_heading_bgcolor"><span class=”stl_heading

stl_heading_color”></span></div>

In addition, we can also set a default palette to the whole layout by adding the palettedId=”id”

attribute on top of the layout html element. e.g.

Cheetah Loyalty Email Templates - Developer Guide

Step 5 - Add Dynamic Content sections

<div sectionId="email_section1" layoutId="medium_email_section"

class="stl_section stl_dynamic_content" contentType="" contentFilter=""></div>

Legends:

layoutId

Instructs the editor to get the contents from a set value. Default is set to medium_email_section

contents

contentType

Identifies the type of object you want to add. This is a dropdown option, but you can specify the

default value. Values can be offers, rewards, challenges, content blocks and placements.

contentFilter

This can either be the internal name of the object or a specific tag.

Step 6 - Add Content Tokens

Content tokens are variables used for personalization as well as some special links such as

"View Web Version" and "Unsubscribe".

Special Email Tokens

These tokens are standard and always available. Most emails should include all of them.

<a href="#" class="stl_snippet">My awesome preheader has value</a>

<a href="#" class="stl_web_version">View Web Version</a>

<a href="#" class="stl_unsubscribe">Unsubscribe</a>

Custom Tokens

You can create your own tokens in the Cheetah Loyalty Marketing Console. This allows you to

define these variables in a single place and reuse them everywhere, such as the user's first

name, point balance, or tier.

Cheetah Loyalty Email Templates - Developer Guide

Content Tokens support merge expressions, including handlebars syntax, so they can build up

strings using business logic. For example, you can build a salutation such as "Hello Bob!" as a

content token.

<span class="stl_token_welcome_email_salutation">Hello Bob!</span>

As a point of style, always build strings within Content Tokens, and avoid building strings within

the template. This allows the marketers to easily change and translate the content token, and

avoids unnecessarily ugly or fragile syntax in the template.

YES <span class="stl_token_email_salutation">Hello Bob!</span>

NO <span>Hello <span class="stl_token_first_name">Bob</span>!</span>

Links

Create each link URL as a Content Token in the Cheetah Loyalty Marketing Console, and set

Apply To = Link. Then apply the token class to the link A REF or to the parent DOM element

inside the template. The link token always applies to the entire HREF attribute. There is not a

way to insert content tokens inside the HREF; this is by design for the aforementioned reasons

for all custom tokens.

<a href="#" class="stl_token_profile_link">Manage Your Profile</a>

-OR-

<div class="stl_token_profile_link"><a href="#">Manage Your Profile</a></div>

You can optionally give each link a friendly link name by giving the link an HTML attribute of

“stl_link_name”, such as stl_link_name=“profile”. Links will otherwise be automatically assigned

names in the format “link1”, “link2”, etc..

<a href="#" class="stl_token_profile_link" stl_link_name="profile">Manage Your

Profile</a>

Sample Template Set

<div layoutId="email_body" layoutWidth="660" layoutMinHeight="1000"

layoutEmailSafe="true" layoutFixedTools="true" class="stl_layout">

<h1>Email Body</h1>

<h2>Email</h2>

Cheetah Loyalty Email Templates - Developer Guide

div, p {

font-family: 'Open Sans', arial, sans-serif;

font-size: 14px;

font-weight: 400;

font-variant: normal;

color: #000;

line-height: 24px;

}

a:link {

color: #97130F;

}

a:visited {

color: #C51C16;

}

a:hover {

color: #666;

}

a:active {

color: #666;

}

.signature {

font-size: 13px;

}

.header *, .footer * {

font-size: 12px;

font-family: 'Open Sans', arial, sans-serif;

font-weight: 400;

}

</style>

<div style="margin-top: 10px; font-family: 'Open Sans'; font-size: 14px;

font-weight: 400; font-variant: normal; color: #000; line-height: 24px">

<table width="600" border="0" align="center" cellpadding="0"

cellspacing="0">

<tr>

<td colspan="3" class="header" style="text-align: right;

padding: 0 10px 5px 0;">

<div><a href="#" class="stl_web_version

stl_token_webversion">View web version</a></div>

</td>

</tr>

<tr>

<td colspan="3"><span class="stl_image1"><img

src="http://berkleyfishing-s3.runstellar.com/static/images/Banner_Welcome.png"

alt="Berkley High School Fishing Club" width="600" /></span></td>

</tr>

<tr>

<td>

Cheetah Loyalty Email Templates - Developer Guide

<div sectionId="email_section1" style="width:600px;"

layoutId="medium_email_section" class="stl_section">

<div class="stl_heading stl_heading_bgcolor

stl_heading_color" style="font-size: 26px; letter-spacing: 2px; padding:

10px;"></div>

<div class="stl_subheading stl_subheading_bgcolor

stl_subheading_color" style="font-size: 20px; padding: 10px;"></div>

<div class="stl_mainbody stl_body_color"

style="width:640px; min-height: 40px; padding: 10px;"></div>

</div>

</td>

</tr>

<tr>

<div sectionId="email_section2" style="width:600px;"

layoutId="medium_email_section" class="stl_section stl_dynamic_content"

contentType="blank" contentFilter="" style="margin: 20px 0 20px 0;"></div>

</td>

</tr>

<tr>

<div sectionId="email_section3" style="width:600px;"

layoutId="medium_email_section" class="stl_section stl_dynamic_content"

contentType="blank" contentFilter="" style="margin: 20px 0 20px 0;"></div>

</td>

</tr>

<tr>

<td colspan="3"><img

src="http://berkleyfishing-s3.runstellar.com/static/images/Footer_Social.png"

alt="Berkley High School Fishing Club" width="600" height="82" usemap="#Map"

border="0" /></td>

</tr>

<tr>

</tr>

<tr>

This email was sent to <span

class="stl_token_email">you</span> based on your preferences.<br />

<a href="#" class="stl_unsubscribe

stl_token_update_subscription">update communication preferences</a> /

<a href="#" class="stl_unsubscribe

stl_token_unsubscribe">unsubscribe</a>

</p>

Cheetah Loyalty Email Templates - Developer Guide

<p>Pure Fishing, Inc. 7 Science Court, Columbia, SC 29203<br

</p>

</td>

</tr>

<tr>

</tr>

</table>

</div>

</div>

Advanced Topics

Configure Dynamic Section to Render a Reward Based on

Member’s Preference

To personalize dynamic content sections, we can apply a content token to the content filter

option of the section to apply different filters based on the user’s preference.

<div sectionId="email_section1" layoutId="medium_email_section"

class="stl_section stl_dynamic_content stl_token_favorite_reward"

contentType="rewards" contentFilter=""></div>

Take note that you have to set the “Apply To” setting of the content token to contentfilter. It’s a

special setting that instructs the system to replace the contentfilter attribute at runtime.