Overview

As a designer, you're 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 in Cordial.

To achieve advanced personalization, we developed a template syntax based on a custom version of Smarty (a php-based template language). We'll just refer to it as Smarty from now on. To take advantage of all of Cordial's personalization possibilities, you should be proficient with Smarty syntax and know how to code templates that use variables, link functions, conditional logic, and data looping.

How Cordial stores data

Before diving into Smarty, you should understand how Cordial stores 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.

Personalization with Smarty

Once you understand what data is available and how it's stored in Cordial, you can access and render it in a message using Smarty.

Introduction to Smarty

For an introduction to Smarty, start with this article: Get started with Smarty syntax.

Here are the basic fundamentals:

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

Variables

Smarty can access data using variables. Variables can access system data, account data, contact attribute data, and more. Here are some articles to show you 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 simply pointing to a web page. Learn about link functions with the articles below:

• Opt-out link: Modify the default opt-out link using Smarty.
• Add tags to links: Use link tags to associate links in multiple messages for segmentation and reporting.
• Name 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.
• Update list membership: Add or remove contacts to a list when they click a link.
• Update an attribute: Update a contact attribute when a link is clicked.

Conditional 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 can also loop through data arrays and render specific values using foreach statements.

• Conditional statements using {if} statements
• Loop through data using {foreach} statements

Get data arrays

Using Smarty, you can access data arrays from a collection (such as 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 pave the way for highly personalized, dynamic content.

The following articles give you explanations and examples of the different array 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. Check out the Reusable HTML content overview article to learn more.

Sculpt templates and blocks

The Sculpt message editor provides an easy way for marketers to create complex message layouts 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.

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.

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

Helpful resources

We've put together a list of additional external resources that you might find useful.

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