SmartSender supports a large subset of the Twig templating language. Below are examples for some common templating use-cases.
API Call
Template HTML
Rendered HTML
|
||
---|---|---|
Variable Replacement
Simple variable replacement can be achieved using the following syntax.
|
||
{ "variables": [{ "name": "firstName", "value": "John" }, { "name": "image", "value": "http://domain.com/image.gif" }, { "name": "link", "value": "https://smartsender.io" }] } <h1>Hello {{ firstName }},</h1> <img src="{{ image }}"> <a href="{{ link }}"> Go to SmartSender</a> |
||
Conditional Content
Conditional syntax can be used to include/exclude email content based on data passed into API calls or stored in contact list.
{"variables": [ { "name": "paidCustomer", "value": false }, { "name": "signupType", "value": "referral" }], {% if paidCustomer %} Thanks for being a customer! {% else %} Sign up today and get 30% off! {% endif %} {% if signupType == 'referral' %} <a href="https://smartsender.io">Refer your friends!</a> {% endif %} Sign up today and get 30% off! Refer your friends! |
||
HTML in Variables
Most of your HTML needs can be met in our template editor. If you are using user-generated HTML and you need to pass raw HTML as a variable, you’ll need to escape it with Twig raw filters or autoescape tags.
{"variables": [ { "name": "message", "value": "<h4>Hello</h4><p>World</p>" }], {{ message|raw }} <a href="https://smartsender.io"> </a> Hello World |
||
Formatting Numbers
{"variables": [ { "name": "price", "value": 9800.333 }] <h4>Numbers:<h4> <ul> <li>{{ price|round }}</li> <li>{{ price|round(1, 'floor') }}</li> <li>{{ price|number_format(2, '.', ',') }}</li> <li>{{ price|number_format(0, '.') }}</li> <li>{{ "$%.2f"|format(price) }}</li> </ul> Numbers:9800 9800.3 9,800.33 9 800 $9800.33 |
||
Formatting Dates
The following example illustrates how to use Twig filters to achieve date formatting of both timestamps and ISO 8601 date strings.
{"variables": [ { "name": "timestamp", "value": "1539377301" },{ "name": "isoDate", "value": "2016-04-29T15:47:28+02:00" },] <h4>Flexible date formating</h4> <p>Current date: {{ "now"|date("m/d/Y") }}</p> <p>isoDate: {{ isoDate|date("D, F y") }}</p> <p>timeStamp to custom:< {{ timestamp|date('g:ia \o\n l jS F Y') }} </p> Flexible date formatingCurrent date: 10/12/2018 isoDate: Fri, April 16 timeStamp to custom: 8:48pm 2018 Friday 12th October 2018 |