In our world, the designer is responsible for creating dynamic templates that enable the marketer to send highly personalized messages.
To achieve highly 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 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:
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.
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.
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.
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 personalize 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:
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.