Purpose group: E-mail template builders
In Ternair, 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 the CTRL+F keys to search the HTML code.
Text
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 styling can be edited.
Example |
|---|
<div class="ternair-html"> This text can be edited. </div> |
Both classes can only be applied to text elements, e.g. div, p, span or small.
It cannot be applied to a table or td.
Layout
When copying and pasting a text, all the default layout settings are adopted. For example font type, font size, color etc.
Via the context menu, text can be pasted as plain text (= without formatting).
Hyperlinks
ternair-hyperlink
The url can be customized by the user.
The <a> tag can be placed around a word, text or message.
Example |
|---|
<a href="url" class="ternair-hyperlink">More information</a> |
Please note: a <a> tag directly around an image automatically becomes a ternair hyperlink. The class "ternair hyperlink" is then removed from the html.
ternair-hyperlink-group
This element allows you to change all links in one action.
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
Images and image settings can both be changed. These settings are: size, crop, position, hyperlink behind the image, alt text and layout.
- Restrictions can be applied to images using the following attributes:
data-ternair-width
Automatically scale the image to this width.
data-ternair-height
Automatically scale the image 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, the size is resized 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 position for the new image when the image is replaced.
Alignment contains two values: vertical alignment and horizontal alignment.
Available options for vertical alignment: top, center, bottom
Available options for horizontal alignment: left, right, center
data-ternair-color
If an image contains whitespace as a result of resizing, this space is made transparent by default. If you use this attribute, this space is filled with 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
Image |
|---|
<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"> <img class="ternair-video-image" src="http://www.example.com/previewImage.jpeg" width="640" height="480"> </a> </video> |
Style
Ternair-style allows you to set menu styling.
ternair-allow-border-styling
1 or 0. This determines whether or not the border-style option is used, configurable with ternair-style.
ternair-allow-background-styling
1 or 0. This determines whether or not the background-style option is used, configurable with ternair-style.
Description
Data-ternair-description allows you to create user-friendly descriptions on ternair elements.
Example |
|---|
<p class="ternair-html" data-ternair-description="Welcome Header">Welcome Welcome Welcome Welcome</p> |
Optimizing images for mobile devices
On a mobile device, images are displayed in a different format than on a desktop, such as across the full width of the device. Use the following two settings in an email template to specify what dimensions an image should be optimized for on a mobile device.
data-ternair-crop-width
The width for which an image will be optimized on a mobile device.
data-ternair-crop-height
The height for which an image will be 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 above example, the image is optimized for display on a desktop with dimensions 100 pixels by 50 pixels. For display on a mobile device, the image is optimized for dimensions 300 pixels by 150 pixels.
Blocks
Add this CSS class to HTML tags to indicate that 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 setting: On.
data-ternair-delete
This block can be deleted. Default setting: On.
Example |
|---|
<div class="ternair-block" data-ternair-copy="1" data-ternair-delete="0">....</div> |
Please note: nesting on ternair blocks is not allowed
User content
With data-ternair-user-content you can disable the creation of a user content snippet from ternair blocks.
Example |
|---|
<div class="ternair-block" data-ternair-user-content="0">This block cannot be converted to a User Content snippet</div> |
RSS
Add this tag in the <HEAD> to indicate an RSS URL:
<meta name="rss1" content="https://www.cnn.com/feeds/rss/world.rss"> |
Use the name of the <META> tag in the data-ternair-rss attribute in conjunction with the ternair-rss class.
Add this CSS class to HTML tags to indicate that it is an RSS feed:
ternair-rss
- Use nested classes to indicate where parts of the RSS message should be displayed:
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> |
Defining RSS Direct Dynamic Content
Add this tag in the <HEAD> to indicate an RSS Direct Dynamic Content:
<meta name="DirectContent1" direct-content="personalized-content1" /> |
Applying RSS Direct Dynamic Content
With data-ternair-rss-variable you can use filters on values in your RSS to fill mailings in an even more targeted way.
Add this tag in the <HEAD> to indicate an RSS Direct Dynamic Content:
<meta name="nu.nl" content="https://nu.nl/rss/[categorie]" data-ternair-edit="1" data-ternair-rss-variable /> |
Advanced options RSS (optional)
data-ternair-default-latest
Retrieve the latest x number of RSS messages by default.
Example (retrieve two 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 the e-mail is sent.
Example (send four messages at merge) |
|---|
<tr class="ternair-rss" data-ternair-rss="rss1" data-ternair-rss-merge-at-execute-enabled="1" data-ternair-rss-merge-at-execute-count="4" data-ternair-rss-start-at-message-number="3"> |
data-ternair-chars-max
Displays the maximum number of characters. This class can be placed on all RSS elements.
data-ternair-chars-cutoff
Information displayed AFTER the maximum number of characters.
Standard: ...
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 not to retrieve the value of the first RSS tag, but also to retrieve 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 e-mail.
data-ternair-rss
Which feed we want to use.
data-ternair-rss-start-at-message-number
The message number of the (first) message that will be aggregated when sending the e-mail.
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> |
RSS items across multiple RSS snippets repositioned
data-ternair-rss
RSS items can only be repositioned within a targeted RSS snippet by default.
By adding RSS feed definition to an RSS snippet, you can identify multiple RSS snippets for the same type of content in which to move RSS items.
data-ternair-rss
Identifies which feed to use. Snippets with the same feeds can be repositioned.
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 e-mail can be populated by using data from an RSS feed.
Use the following 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 rssel element refers to the name of the item in the RSS feed that you want to use as the subject line (for example, title or description).
This item is retrieved from the first element (message) in the RSS feed. When an RSS feed contains multiple messages (elements), the specified item from the first element in the feed is used as the subject line.
The subject line is merged from the RSS feed when the email block is executed.
To display the title of the first RSS message from the feed with the name rssCNN as the subject line in your email, use the following code:
%%RSS%%rssCNN%title%%
RSS dynamic tags
Dynamic RSS tags provide support for using RSS values in attributes of HTML elements. This option can be used, for example, 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 attributes can be used 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 automatically preceded by the XPATH item. Use the data-ternair-rss-path-prefixx to disable this automatic 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 behavior mode for the custom RSS item. This specifies where the values of 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.
Existing |
|---|
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="-after-"> |
Result | <div data-category="selecting-after-ExistingValue"> |
data-ternair-rss-custom-type-url-param
The name of the parameter 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
Dissect existing (list) values with the specified separator and add values (replace/prepend/append) 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"> |
RSS with personalized content
With data-ternair-rss-if it is possible to customize the layout (of the content) in your email based on the value from an RSS feed.
Example |
|---|
<html> <head> <!-- Define RSS feed --> <meta name="rss1" content="https://nu.nl/rss" /> </head> <body> <!-- Determine personalized content layout --> <div class="ternair-rss"> <div data-ternair-rss-if="category[text()='Sports'"> show content sports </div> <div data-ternair-rss-if="category[text()='Entertainment'"> show content entertainment </div> <div data-ternair-rss-if="categories[text()='Music'"> show content music </div> </div> </div> <!-- Determine number of messages --> <div class="ternair-rss-merge-on-execute ternair-rss-message" data-ternair-rss-message-count="100" data-ternair-rss="rss1"> <span><i class="fa fa-rss"></i></span> <span> stories (<span class="count">100</span>)</span> </div> </body> </html> |
RSS editing and renaming
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 called with the value:
%%viewerlink%%%
Example |
|---|
<a href="%%viewerlink%%">View this newsletter in your browser</a> |
View email with viewer links that do not track statistics so that only "pure clicks" are counted. This is especially for customer service teams and CRM integrations.
Example |
|---|
https://[content_domain]/readonlyviewer/?tid=[TID] |
Please note that this url cannot be used in the email but is only for external systems and third parties so as not to affect the email statistics.
Show openers
To register openers, a </body> is required.
If 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 accessed 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 standard content, such as a banner, advertisement or plain text.
Ternair classes are supported in snippets. By using Ternair attributes in a snippet, it can be edited in an e-mail block. Furthermore, one or more search tags can be added to a snippet.
Please note that ternair snippet works as a ternair block.
ternair snippet
Use this class in an email template to use a snippet from the snippet library in an email block.
Use the following attributes to set defaults for a snippet.
ternair-snippet-default
When an e-mail template is loaded, the snippet with this name is displayed by default. In the e-mail editor, the selected snippet can be modified.
ternair-snippet-search
The default search value for the snippets. All email snippet tags are searched for this value. Only snippets that match the specified search value(s) are displayed. Multiple search tags can be used. Use a space as a 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 ternair-snippet-default is used.
With snippet parameters it is possible to send values - in a <key:value> format - to the snippet that is loaded by default via data-ternair-snippet-default. The values can be used as variables in the snippet, similar to theme variables. These parameters allow one snippet markup to be used for different applications where values can be used for variables that vary from application to application.
Example: the "RSS article" snippet is designed to load three articles by default. The value "3" no longer needs to be stored in the snippet markup, but can be set as a parameter in the template (numberArticle:3) |
|---|
<div data-ternair-snippet-default="RSS Article" data-ternair-snippet-params="{numberArticle:3}"></div> |
Personalization
It is not possible to use conditional personalization in the header for entire tags.
