For the Designer

In our world, the designer is responsible for creating dynamic templates that enable the marketer to send highly personalized messages. These templates can be built using the HTML editor or the Sculpt editor.

To achieve advanced personalization, we developed a template syntax that is based on a custom version of Smarty (a php based template language). We'll just refer to as Smarty from now on. To take advantage of all the personalization possibilities, the designer should be proficient in the Smarty syntax and be able to code templates that use variables, link functions, conditional logic, and data looping.

Dig the Data

Before diving into Smarty, the designer should understand how Cordial stores all data in separate collections. Smarty references these collections when rendering data in a message using Smarty variables.

Here are some recommended articles to get you up to speed on the different data collections:

• Contact Collection - stores data specific to a contact including channels, attributes, list membership and cart items.
• Event (Contact Activities) Collection - stores event data specific to messages (opens, clicks, etc.) or any custom named event.
• Product Collection - stores data from a product catalog.
• Orders Collection - stores order data.
• Supplements Collection - stores additional data (store locations, coupon codes, message content, etc.) that doesn’t fit into one of the above collections.

In addition to the above data collections, you can also reference external data (RSS feed, Instagram feed, weather, etc.) when personalizing message content.

 Watch the Data Overview video to learn more:

Smart Personalization with Smarty

Once you understand what data is available and how it is stored in Cordial, you are able to access it and render it in a message using Smarty.

Introduction to Smarty

To get an introduction to Smarty, start with this article:

Getting Started with Smarty Syntax

The key takeaways here are:

• Smarty is wrapped in curly braces.
• CSS also uses curly braces, so be sure to escape CSS using the literal tag or you will get errors when trying to save a message.
• Smarty renders when previewing a message or at the time of message send.
• You can select a contact's email address when previewing a message to see a live preview of the personalized content for the selected contact.
• Smarty supports variables, conditional statements, data looping and other functions and modifiers.

Using Variables

Smarty can access the data using variables. Variables can access system data, account data, contact attribute data and more.  Here are some articles dedicated to what you can do with Smarty variables:

• Variables Overview - Get an overview of how variables are used in Cordial.
• System Variables - Certain variables are reserved for system values such as email address and message ID.
• Account Variables - Account variables are used for account specific values that can be used for CAN SPAM/CASL compliance in message footers.
• Contact Variables - Used to render contact attribute values for each contact such as first name, address, etc.
• Assigning Variables - Variables can be set in a message and then recalled throughout the message. This is useful for link appends or building complex Smarty logic.
• Date and Timestamp Variables - Used for rendering dates in a message.
• Variable Modifiers - Modifiers are used to change the way variables are rendered, such as date formats, numbers and capitalization.

Link Functions

Cordial's custom version of Smarty adds additional functionality to links beyond just pointing to a web page. Learn about link functions with the articles below:

• Optout Link - Modify the default optout link using Smarty
• Adding Tags to Links - Use link tags to associate links in multiple messages for segmentation and reporting.
• Naming a Tracked Link - Give links a "friendly name" for use in the UI when viewing reports.
• Link Appends - Use Smarty to set up link appends.
• Updating List Membership - Add or remove contacts to a list when they click a link.
• Updating an Attribute - Update a contact attribute when a link is clicked.

Conditionals Statements and Data Looping

In addition to rendering variables and link functions, Smarty is used for conditional if/then statements for rendering dynamic content. You are also able to loop through data arrays and render specific values using foreach statements.

• Conditional Statements Using if statements
• Looping Through Data Using foreach statements

Get Data Arrays

Using smarty, you are able to access data arrays from a collection (i.e. products), filter the results and render them in a message. These are called get data array methods. When you combine these with conditional statements and variables, you've opened the door for highly personalized dynamic content. The following articles give you explanations and examples of the different methods available:

• Get Products - Filter and render products from your product catalog.
• Get Events - Filter and render event data such as "items browsed on a site".
• Get Orders - Filter and render order data in a message.
• Get Supplements - Filter and render supplement data in a message.
• Get JSON - render data from an external source such as an Instagram feed.

HTML Content Includes

Reusable HTML snippets can be saved outside of message content in a content library, and then rendered in multiple message using Smarty:

• Reusable HTML Content Overview

Sculpt Templates and Blocks

The Sculpt message editor provides an easy way for the marketer to create complex message layouts and content without having to write any HTML using a combination of Sculpt templates and Sculpt blocks.

As the designer, you create a Sculpt template to use as a starting point for messages, as well as a variety of Sculpt blocks that can be dragged into templates during message creation by the marketer. Note that both Sculpt templates and Sculpt blocks support advanced personalization using Smarty.

Sculpt Templates

Before the Sculpt editor is available for message creation, a Sculpt Template must be created and saved in the account. A Sculpt template is the "HTML shell" that can accept Sculpt blocks. Get an overview of Sculpt here, and read more about creating Sculpt templates.

 Watch the Sculpt template video to learn more:

Sculpt Blocks

Sculpt blocks are created separately from Sculpt templates and live within the Sculpt block library. During message creation, the marketer chooses a Sculpt template as a starting point and then drags in Sculpt blocks to build layouts and customize content.

As the designer, you create the library of Sculpt blocks that the marketer can use for messages. Any element within a Sculpt block (images, colors, fonts, etc.) can be set as editable using variables and then customized using forms that you create. Learn more about Sculpt blocks.

 Watch the Sculpt block video to learn more:

Other Helpful Resources

We've put together a list of additional external resources that you may find useful...we did!

• Email boilerplate - The folks at Litmus have put together several responsive email templates to get you started building email code.
• CSS inliner tool - To make sure your HTML and CSS are email friendly, use this CSS inliner tool from Zurb.
• Character converter - If you use special characters in your messages they may need to be converted to their respective HTML entities. This HTML Character Converter will do it for you.
• Rendering tests - Both Litmus and Email on Acid provide great tools to test email rendering.
• Smarty Documentation - smarty.net/docs/en is the official guide for Smarty. Keep in mind that not all functions and modifiers are supported in Cordial.  Check out our full list of supported functions and modifiers here.
• JSON validator - JSONLint is an awesome tool for checking your JSON for errors when making API calls. Sometimes it's just a comma causing the problem!
• HTML, JS and JSON beautifier - jsbeautifier.org will beautify your code and make it easier to read.