Using Custom CSS or Dynamic programmable Content in the Email Editor

Custom CSS

In the drag and drop builder you can use custom HTML blocks to input your own HTML, details in docs here:

https://support.xtremepush.com/hc/en-us/articles/360000220358-Working-with-custom-HTML

Programmatic Syntax

Programmatic content can also be added to the drag and drop builder directly without the need to enable anything. You can see some an example of programmatic content between curly braces below (i.e. {{ programmatic syntax }} ) in the image below:

Details and examples of some of the most commonly used programmatic functions and capability are given in the following sections.

Utility Functions

Date

If you need to generate the current day, date etc. programmatically in your content then you can add it to your template in the following way:

• {{ "now" | date() }} will give:
  • Month day, year time e.g. January 18th, 2049 14:34
• {{ "now" | date("l, F jS") }} will give:
  • Day, Month Date e.g. Friday, January 18th
• {{ "now"|date("l") }}
  • Day, e.g. Friday
• {{ "now"|date("F") }}
  • Month e.g. January

The syntax can be used in the subject or the body for example - xtremepush newsletter for {{ "now" | date("l, F jS") }}.More detail on how the date format function works can be found here: http://php.net/manual/en/function.date.php

Capitalise

If you have dynamic content such as names {{name}} that are a mix of lowercase bob and uppercase BOB but should be capitalised Bob you can clean it up using the capitalise function:

{{name | capitalize}}

Slice

If you have dynamic content that you want to cut short or take a sub string from you can use the slice function. A common use case is truncating dynamic text, for example if you want to  cut short some text at 200 characters and add trailing dots you can use:

{{text|slice(0,200)}}...

If Dynamic text was:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

it would become:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut a ..."

If your text contains html tags you should use striptags first to remove them so they don't get cut off and result in broken html.

{{text|striptags|slice(0,20)}}

If your dynamic text is likely to very a lot in length you can also use length to dynamically concatenate the text to a fraction of the list to avoid over/under conatenating.

{{text|striptags|slice(0,text|length/3)}}

Loops

For Loop for dynamic content e.g. recommendations 

For loops can be useful for generating a section of content that has a number of similar element repeated where the number of elements and content will vary for users. One example of this is a daily/weekly recommendation email linked to a recommender system for products, articles or some other form personalised content. These types of email will typically have a varying number of recommendations per user per day with many different variations in content. In this case a for loop can be used to build the personalised  recommendation portion of the email for each user. Below is an example where a table of recommendations is built using a for loop:

<p><!-- {% for entry in jobs %} --></p>
<hr noshade="noshade" color="#686868" width="100%" size="1" style="padding:0; margin:8px 0 8px 0; border:none; width:100%; height: 1px; color:#686868; background-color: #686868">
<table border="0" cellspacing="5" cellpadding="0" align="center" bgcolor="#ffffff"><tbody><tr><td width="45" rowspan="2" align="left" valign="centre"> <a href="{{entry.job.job_page_url}}" style="display:block; text-decoration:none;" data-pos="IC4AP9-t"> <img src="{{entry.brand.logo}}" alt="{{entry.brand.name}} logo" width="70" style="border-radius: 50%;"></a> </td> <td height="30" valign="bottom"><a href="{{entry.job.job_page_url}}" style="display:block; text-decoration:none;" data-pos="IDhr4HnC"><span style="color: #63c3d1; font-size: 18px; font-weight: bold; line-height: 1; vertical-align:middle;">{{entry.job.post_name }}</span></a></td></tr><tr><td valign="top" height="30"><a href="{{entry.job.job_page_url}}" style="display:block; text-decoration:none;" data-pos="eSPO0o6O"><span style="color: #686868; font-size:13px; font-weight: lighter;"><span style="color: #686868; font-size:13px; font-weight: lighter;">{{entry.brand.name}}{% if entry.brand.location %}, {{entry.brand.location}} {% endif %}</span></span></a></td> </tr></tbody></table>
<p><!-- {% endfor %} --></p>

The above example is from an API triggered template campaign and content like below is posted via API to target individual users with personalised recommendations. The job array can vary in size and content and is dynamically unpacked by template for loop.

 {"apptoken":"blah","id":blah,"target_by":"email","target":["blah@blah"],
  "params":{"user.first_name":"BOB","jobs":[{"job.post_name":"Job1","job.job_page_url":"https://example.com/jobs/view?1",
  "brand.name":"Brand1","brand.logo":"https://example.com/logo1.jpg","brand.location":null},
  {"job.post_name":"Job2","job.job_page_url":"https://example.com/jobs/view?2","brand.name":"Brand2",
   "brand.logo":"https://example.com/logo2.jpg""brand.location":null},
  {"job.post_name":"Job3","job.job_page_url":"https://example.com/jobs/view?3",
   "brand.name":"Brand3","brand.logo":"https://example.com/logo3.jpg""brand.location":"Dublin, County Dublin, Ireland"},
  {"job.post_name":"Job4","job.job_page_url":"https://example.com/jobs/view?4","brand.name":"Brand4",
   "brand.logo":"https://example.com/logo4.jpg""brand.location":"Dublin, Ireland"},{"job.post_name":"Job5",
   "job.job_page_url":"https://example.com/jobs/view?5","brand.name":"Brand5",
   "brand.logo":"https://example.com/logo5.jpg""brand.location": "Dublin,Ireland"}]}}

In the drag and drop builder for a for loop or conditional statement, beginning and end statements can be added in custom HTML blocks to keep them separate from other content. You can see this in the example shown in docs here:

https://support.xtremepush.com/hc/en-us/articles/360000220358-Working-with-custom-HTML

Conditional Statements

if/else for alternate content 

If else statements can be used to handle different scenarios related to dynamic content for example in the for loop in the previous example the dynamically added location information is not always present so an if statement is used to handle this. If the location is present it is added with a preceding comma if not neither the location or the comma is added:

{% if entry.brand.location %}, {{entry.brand.location}} {% endif %}

If else statements can be used to do regional variations in a single email if you have an appropriate region or geo attribute for your users for example:

{% if region == 'US' %} 
NY Address 
{% elseif region == 'UK' %} 
London Address 
{% else %} 
Dublin Address
{% endif %}

There are many other ways you can use this syntax to respond conditionally to dynamic content below is another example where links are being dynamically added and some end in a ? and some do not but we want to be able to add utm tracking to all the links. The inconsistency in link format is handled using if statements on the template side:

{% if '?' in entry.some.page_url %}<a href="{{entry.some.page_url}}&utm_source=xp&utm_medium=email&utm_campaign=blah" style="display:block; text-decoration:none;" data-pos="IC4AP9-t">{% else %}</a><a href="{{entry.some.page_url}}?utm_source=xp&utm_medium=email&utm_campaign=blah" style="display:block; text-decoration:none;" data-pos="IC4AP9-t">{% endif %}

Required Values

Required values is a way of preventing a message from being sent in case an important value is missing. It's great for transactional messages which include a unique URL or Code.

{{ verification_url | required }}

When a required value is missing the message will not be sent. It will also be displayed in the notifications log with a 'Not Personalized' status. In case the message was triggered via the API, the error will be included to the errors list in the response.