Target group: Email template builders
In Ternair Marketing Cloud several edit-functions can be defined in the HTML-code. These functions guide the user in how email content can be edited in an ‘Email’ output block.
Use function keys Ctrl-F to search the HTML-code.
Texts
Add the following CSS class to the HTML tags:
ternair-text
Only the text can be edited, not the styling.
| Example |
<div class="ternair-text"> This text can be edited. </div> |
ternair-html
The text and the styling can be edited.
| Example |
<div class="ternair-html"> This text can be edited. </div> |
Both classes can only be applied to text elements, for example div, p, span or small.
It cannot be applied on a table or td.
Layout
When copying and pasting a text all default layout settings are adopted.
For example font, font size, color etc.
Via the context menu text can be pasted as plain text (= without formatting).
Hyperlinks
ternair-hyperlink
The url can be edited by the user.
The <a> tag can be placed around a word, text or image.
| Example |
<a href="url" class="ternair-hyperlink">More information</a> |
N.B.: An <a> tag directly surrounding an image will automaticly become a ternair hyperlink. The class “ternair-hyperlink” will be removed from the html.
ternair-hyperlink-group
With this element you can changes all links in one operation.
| Example |
<table class="ternair-hyperlink-group"><a class="ternair-hyperlink" href="#"> |
Images
Add this CSS class to IMG tags:
ternair-img
Images can be replaced, image settings remain the same.
ternair-img-expert
Image and image settings can be edited. These settings include: size, crop, position, link behind the image, alt text and layout.
— Restrictions can be applied to images via attributes:
data-ternair-width
Automatically scale the image up to this width.
data-ternair-height
Automatically scale the image up to this height.
data-ternair-height-min / data-ternair-height-max and data-ternair-width-min / data-ternair-width-max
If data-ternair-width and data-ternair-height are not set then we resize within these values.
For a minimum height of 100px and a maximum height of 300px use:
data-ternair-height-min=”100″ data-ternair-height-max=”300″.
| Example |
<img src="https://services.crmservice.eu/images/template/images/header600_200.jpg" alt="" class="ternair-img" data-ternair-width="600" data-ternair-height-max="300" data-ternair- height-min="100" data-ternair-data-ternair-alignment="top,left" data-ternair-color="ffffff" border="0" style="display:block;" /> |
data-ternair-alignment
Determine the postition for the new image when the image is replaced.
Alignment contains two values: vertical alignment, horizontal alignment.
Available options for vertical alignment: top, center, bottom.
Available options for horizontal alignment: left, center, right.
data-ternair-color
If an image contains white space as a result of the scaling, default this space will be made transparant. If you use this atribute this space will be filled with this color.
| Example |
<img class="ternair-img" width="300" height="300" data-ternair-width="300" data-ternair-height="300" data-ternair-alignment="top,center" data-ternair-color="FF0000" data-ternair- color="FF0000" /> |
or
| Example |
<img class="ternair-img-advanced" width="300" height="300" /> |
Video
Add this CSS class to VIDEO tags:
ternair-video
Videos can be replaced, video settings remain the same.
ternair-video-link
Place this class on a fallback anchor.
ternair-video-image
Place this class on the poster image tag.
| Example |
<video class="ternair-video" poster="http://www.example.com/previewImage.jpeg" width="640" height="480" controls="controls"src="http://www.example.com/intro.webm" type="video/webm"><a class="ternair-video-link" href="http://www.example.com/intro.webm">src="http://www.example.com/previewImage.jpeg" width="640" height="480"></video> |
Style
With ternair-style you can set a menu styling.
ternair-allow-border-styling
1 or 0. Whether or not border style option is used, configurable with ternair-style.
ternair-allow-background-styling
1 or 0. Whether or not background style option is used, configurable in ternair-style.
Description
With data-ternair-description you can make user-friendly descriptions on ternair elements.
| Example |
<p class="ternair-html" data-ternair-description="Welcome Header">Welcome welcome welcome</p> |
Optimizing mobile images
On a mobile device images are displayed in a different format than on a desktop, for example, over the entire width of the device. Use the following two settings in an email template to indicate the dimensions for which an image must be optimized on a mobile device.
data-ternair-crop-width
The width for which an image is optimized on a mobile device.
data-ternair-crop-height
The height for which an image is optimized on a mobile device.
| Example |
<img class="ternair-img" data-ternair-width="100" data-ternair-height="50" data-ternair-crop-width="300" data-ternair-crop-height="150" /> |
Based on the example above the image is optimized for display on a desktop for the dimensions 100 pixels by 50 pixels. For display on a mobile device the image is optimized for the dimensions 300 pixels by 150 pixels.
Blocks
Add this CSS class to HTML tags to indicate they are blocks:
ternair-block
— Attributes can be used to indicate whether blocks can be copied or deleted:
data-ternair-copy
This block can be copied. Default: On.
data-ternair-delete
This block can be deleted. Default: On.
| Example |
<div class="ternair-block" data-ternair-copy="1" data-ternair-delete="0">....</div> |
N.B. nesting op ternair-blocks is not allowed.
User content
With data-ternair-user-content you can disable creating a user content snippet from ternair blocks.
| Example |
<div class="ternair-block" data-ternair-user-content="0">This block can’t be converted to a User Content snippet</div> |
RSS
Add this tag in the <HEAD> to indicate a RSS URL:
<meta name="rss1" content="https://www.cnn.com/feeds/rss/world.rss"> |
Use the name from the <META> tag in the data-ternair-rss attribute in combination with the ternair-rss class.
Add this CSS class to HTML tags to indicate it is a RSS feed:
ternair-rss
— Use nested classes to indicate where parts of the RSS message should be shown:
ternair-rss-title
Title of a message.
ternair-rss-description
Description of a message.
ternair-rss-readmore
Place this class on the <A> element with the read more link.
| Example |
<head><meta name="rss1" content="https://www.cnn.com/feeds/rss/world.rss"><title>...</title></head> <body><table><tr class="ternair-rss" data-ternair-rss="rss1"><td><a href="#" class="ternair-rss-readmore ternair-rss-title" target="_blank"></a><p class="ternair-rss-description"></p></td></tr></table><body> |
Define RSS Direct Dynamic Content
Add this tag in the <HEAD> to indicate a RSS Direct Dynamic Content:
|
Apply RSS Direct Dynamic Content
With data-ternair-rss-variable you can use filters on values in your RSS to fill mailings even more specifically.
Add this tag in the <HEAD> to indicate a RSS Direct Dynamic Content:
|
Advanced options RSS (optional)
data-ternair-default-latest
Default retrieve last x number of RSS messages.
| Example (retrieving 2 messages) |
<tr class="ternair-rss" data-ternair-rss="rss1" data-ternair-default-latest="2"> |
data-ternair-rss-start-at-message-number
The message number of the (first) message that is merged when sending the email.
| Example (send 4 messages by merge) |
<tr class="ternair-rss" data-ternair-rss="rss1" data-ternair-rss-merge-at-execute-enabled="1" |
data-ternair-chars-max
Show max number of characters. This class can be placed on all RSS elements.
data-ternair-chars-cutoff
Information that is shown AFTER the max number of characters. Default: …
This class can be placed on all RSS elements.
| Example |
<p class="ternair-rss-description" data-ternair-chars-max="100" data-ternair-chars-cutoff=">>"></p> |
ternair-rss-custom
Using non-standard RSS elements.
data-ternair-rss-path
Name of the (non standard) RSS element.
| Example |
<p class="ternair-rss-custom" data-ternair-rss-path="category"></p> |
It is possible to retrieve not only the value of the first RSS tag, but also values of other identical tags (in the example, the second value of the tag ‘description’).
| Example |
<span class="ternair-rss-custom" data-ternair-rss-path="*[local-name()='description'][2]"> |
RSS merge-at-execute
data-ternair-rss-message-count
The number of RSS messages that are merged when sending the email.
data-ternair-rss
Which feed we want to use.
data-ternair-rss-start-at-message-number
The message number of the (first) message that is merged when sending the email.
| Example |
<table><tbody><tr class="ternair-rss"><td><strong><a href="" class="ternair-rss-readmore ternair-rss-title" target="_blank"></a></strong><p class="ternair-rss-description"></p></td></tr><tr class="ternair-rss-merge-on-execute ternair-rss-message" data-ternair-rss-message-count="4" data-ternair-rss="rss1"><td><span><i class="fa fa-rss"></i></span><span>rss1 (<span class="count">4</span>)</span></td></tr></tbody></table> |
Reposition RSS items over multiple RSS snippets
data-ternair-rss
By default RSS items can only be repositioned within targeted RSS snippet.
By adding RSS feed definition to a RSS snippet you are able to identify multiple RSS snippets for same kind of RSS content in which you can reposition RSS items.
data-ternair-rss
Which feed we want to use. Snippets with the same feeds are available for repositioning.
| Example |
<table><tbody><tr class="ternair-rss" data-ternair-rss="rss1"><td><strong><a href="" class="ternair-rss-readmore ternair-rss-title" target="_blank"></a></strong><p class="ternair-rss-description"></p></td></tr><tr class="ternair-rss-merge-on-execute ternair-rss-message" data-ternair-rss-message-count="4" data-ternair-rss="rss1"><td><span><i class="fa fa-rss"></i></span><span>rss1 (<span class="count">4</span>)</span></td></tr></tbody></table> |
RSS in subject line
The subject line of an email can be filled using data from an RSS feed. Use the code:
%%RSS%%rssname%%rsselement%%
The %%RSS%% part of this code is a fixed value. The rssname refers to the name (tag) of the RSS feed as defined in the meta tag in the HTML of an email.
In the following example the name of the RSS feed is rssCNN.
The rsselement refers to the name of the item within the RSS feed that you want to use as subject line (for example title or description).
This item is retrieved from the first element (message) in the RSS feed. When a RSS feed contains multiple messages (elements) the specified item from the first element in the feed is used as subject line.
The subject line is merged from the RSS feed when the email block is executed.
In order to display the title from the first RSS message from the feed with the name rssCNN as subject line in your email, use the following code:
%%RSS%%rssCNN%%title%%
RSS dynamic tags
Dynamic RSS tags offer support for the use of RSS values within attributes of HTML elements. This option can for example be used to add values from an RSS feed to a hyperlink or to combine data from an RSS feed with data or text in your template.
The following attritbutes are available for the use in dynamic tags.
data-ternair-rss-target
The target for the ternair-rss-custom item.
| Example |
|
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category"> |
| result | <div data-category="selecting"> |
The RSS target is automaticly prefixed with the XPATH item. Use the data-ternair-rss-path-prefix to disable this automatisch prefixinsg
data-ternair-rss-path-prefix=”false”
data-ternair-rss-custom-type
The field type of the custom RSS item. The default type is text. Other options are urlparam and list.
| Example |
|
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-mode="replace"> |
| result | <div data-category="selecting"> |
data-ternair-rss-custom-mode
The behaviour mode for the custom RSS item. Indicates where the values from the custom RSS item are inserted.
Available values are replace, prepend and append.
| Example |
|
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-mode="replace" data-ternair-rss-custom-before="before-" data-ternair-rss-custom-after="-after"> |
| result | <div data-category="before-selecting-after"> |
data-ternair-rss-custom-before
The value placed before the value from the RSS feed.
| Example |
|
| existing | <div data-category="ExistingValue"></div> |
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-mode="append" data-ternair-rss-custom-before="-before-" data-ternair-rss-custom-after="-after-"> |
| result | <div data-category="ExistingValue-before-selecting-after-"> |
data-ternair-rss-custom-after
The value placed after the value from the RSS feed.
| Example |
|
| existing | <div data-category="ExistingValue"></div> |
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-mode="prepend" data-ternair-rss-custom-after="-na-"> |
| result | <div data-category="selecting-after-ExistingValue"> |
data-ternair-rss-custom-type-url-param
The parameter name when using the data-ternair-rss-custom-type=URLParam.
| Example |
|
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-type="URLParam" data-ternair-rss-custom-mode="append" data-ternair-rss-custom-urlparam="cat"> |
| result | <div data-category="https://www.test.com?cat=selecting"> |
data-ternair-rss-custom-list-separator
Parsing existing (list) values with the specified separator and adding (replace/prepend/append) values from the RSS feed.
| Example |
|
| existing | value 1 - value 2 |
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-type="List" data-ternair-rss-custom-mode="append" data-ternair-rss-custom-seperator=" - "> |
| result | <div data-category="value1 - value2 - selecting"> |
Content personalized RSS
With data-ternair-rss-if it is possible to adjust the layout (of the content) in your mail based on the value from an RSS feed.
| Example |
<html><head><!-- Define RSS feed --><body><!-- Determine personalized content layout --> <div class="ternair-rss"><div data-ternair-rss-if="category\[text()='Sport'\]"> show content sport</div><div data-ternair-rss-if="category\[text()='Entertainment'\]"> show content entertainment</div><div data-ternair-rss-if="category\[text()='Music'\]"> show content music </div></div><!-- Determine number of messages --><span><i class="fa fa-rss"></i></span> <span> stories (<span class="count">100</span>)</span></div></body></html> |
Editing and renaming RSS
With data-ternair-edit=”1″ you can edit and rename RSS feeds from html.
| Example |
<meta name=”rss1″ content=”http://www.nu.nl/feeds/rss/algemeen.rss” data-ternair-edit=”1” /> |
Online viewer
The online viewer can be invoked with the value:
%%viewerlink%%
| Example |
<a href="%%viewerlink%%">View this newsletter in your browser</a> |
View email with viewer links that do not record statistics, so only ‘pure clicks’ are counted. Especially for customer service teams and CRM integrations.
| Example |
| https://[content_domain]/readonlyviewer/?tid=[TID] |
N.B. This url cannot be used in the email but is only for 3rd systems/parties to not influence email stats.
Show Openers
For the registration of openers a </body> is required.
When the body is not included in the mail openers cannot be shown.
| Example |
<html><head><title>...</title></head><body>...</body></html> |
Landing pages
A landing page can be invoked from a hyperlink <a>.
Use the href:
%%landingpage%%{templatecode}%%
{templatecode} is the unique name for a landing page.
| Example |
<a href="%%landingpage%%LP1%%" target="_blank">Click here for the landing page!</a> |
Email snippets
An email snippet is a piece of predefined HTML code that can be used in multiple email templates. This code can contain default content, for example a banner, advertorial or plain text.
Ternair classes are supported in snippets. By using Ternair attributes in a snippet it can be edited in an email block. Furthermore one or multiple search tags can be added to a snippet.
N.B. ternair-snippet acts as a ternair-block.
ternair-snippet
Use this class in an email template in order to select a snippet from the snippet library in an email block.
Use the following attributes to define default settings for a snippet.
ternair-snippet-default
When loading the email template the snippet with this name is shown by default. In the email editor the selected snippet can be changed.
ternair-snippet-search
Default search value for the snippets. All email snippet tags are searched for this value. Only snippets matching the provided search value(s) are shown. Multiple search tags can be used, use a space as separator between search values.
| Example |
<div class="ternair-snippet" ternair-snippet-default="example" ternair-snippet-search="title list"> </div> |
data-ternair-snippet-params
Snippet Parameters for setting specific snippet values when using ternair-snippet-default.
With snippet parameters it is possible to push values – in a <key:value> format – to the snippet which is loaded by default via data-ternair-snippet-default. The value(s) can be used as variables in the snippet, similar to themes variables. These parameters make it possible to use 1 snippet markup for different applications, where values can be used for variables which differ per application.
| Example: the “RSS article” snippet is designed to load 3 items per default. The value “3” no longer needs to be stored in the snippet markup, but can set as parameter in the template (number of articles: 3) |
<div data-ternair-snippet-default="RSS Article" |
Personalisation
It is not possible to use conditional personalisation in the head for entire tags.
