Email Editor

The Email Editor is an easy-to-use, responsive editor for building emails to send to your customers.

The Email Editor has a drag-and-drop interface made up of content elements and fields to help you build your rich and responsive emails. The Email Editor's responsive design approach lets you create both desktop and mobile email message designs.

Use the editor to format and personalize text, add images, Call-to-Action (CTA) buttons, and links. You can also add in an email tracking option.

You don't need to have HTML coding skills when using the editor but you have the option to input your own custom HTML, if you prefer.

If you don't want to start your email from scratch, you can also select previously saved templates for upcoming email campaigns or save your own message design as a template for others to use.

As you create your email, you can preview how emails are viewed by the recipient.

In the web interface, either go to Moments on the side menu or Campaigns. From here you can create either new Broadcasts or new Flows.

For example, to start creating a new broadcast email, on the All broadcasts page, click Create Broadcast. Select Email from the channels drop down list.

On the Email form, select the Create Custom Email option.

The Email Editor opens in design mode for creating and personalizing your desktop email layout and body. The editor has a side panel that consists of tabs for Content, Blocks, Body, Audit, Subject line, and Display Conditions each of which provides access to different functions. A number of widgets let you add and move around content elements as you require, and attach images, buttons, links, and more.

To make sure that your email design is built to be responsive, when you style your desktop design, you can switch to mobile to see how the design is optimized for mobile devices. You then have the option to make changes that are specific to mobile layouts. For example, you can choose to hide content, like images, that are not oriented or sized for mobile viewing.

Design mode displays a blank editing area and the side panel tabs.

Content allows you to use a selection of content elements. Content elements include columns and dividers, headings and body text styles, buttons and menus, and images and videos. You can also include links for social media and Gmail promotions.

See the Design Guidelines to learn more about content elements and how to edit them.

Blocks allows you to add and remove sections to customize the email layout using pre-built blank blocks of different column sizes. There are several block templates that you can use. These template blocks help you to start your design with the essential structure, such as headers, content, catalogs, and the footer.

Body allows you to set the default attributes of any text in the email body, and to choose the text and background colors. You can also define the content width and alignment.

Audit provides you with an ongoing audit of the common issues when building an email. Issues that need to be fixed are flagged and you can see a recommendation of how to fix the issue before you finish designing your email.

Display conditions allows you to change the content shown to an email's recipients, based on different conditions.

Subject line displays a set of rules that guide you to create the most appropriate and specific text in your email subject line. Your subject line is analyzed with a list of criteria, and then you can see the recommendations and best practice insights. You can then edit and improve your text based on the suggestions, which are analyzed in real-time with further recommendations.

To start building your email, drag a new content element and drop it into the blank content block. When you have added an element into the design area, you are able to populate the sections with the content options. You can reorganize your email content and layout at any time using the drag icon. Click on any section to display the actions.

To speed up building your design, you can duplicate a content element that you have created in your message. This feature is useful when you plan to include several sections in your email that are similar in design but require only slight content differences. Select an element in your message design that you would like to repeat, and click the Duplicate button. A duplicate of the element appears below and you can then make any adjustments to the content options.

As you build your email, you can select undo to remove the last change you made. If you then change your mind, you can use redo to add the change back again. To delete a content element, select the section in the message and click the Delete button.

At any point during your design, you can switch to Preview to see how your email displays. Preview displays the email in desktop, tablet, and mobile view. You can also use Preview to test any placeholders that you want to include in the email design. See Placeholders and Personalize Attributes in Preview.

You can also use Inbox Previews to test your email across all email clients and devices. See Inbox Previews for more information.

When you have finished your message design, before you exit the editor, you have the option to:

• Save content as email template - add a name to create a template from the email design
• Download HTML - download an HTML version of your email message

Click Done Designing to save the message and exit the editor.

For more detail about configuring the content elements and the limitations, see the Design Guidelines.

Design Guidelines

Design plays a crucial role in successful email campaigns and delivery success.  Poorly constructed emails could hinder reader confidence and can result in being ignored or moved to junk mail. These design guidelines are designed to help you build your email in the most efficient ways.

The first step is to define your email structure which you can do manually from the widgets on the side panel, or by using one of the predefined templates. In the side panel, use the widgets and options to build your email as required by dragging and dropping elements. You can rearrange, add and remove elements at any time.

Use the Blocks tab to focus only on designing the message structure with a selection of blank column layouts. Keep the default column layouts if you wish, or you can adjust any of the individual column settings, including background color, padding, and borders.

The block templates for headers, content, catalogs, and footer can give your design a richer starting point. It is also possible for you to create your own custom blocks up to a maximum of 25.

To guide you through the design recommendations, the Email Editor has an Audit tab. Message auditing notifies you when an essential format or link is missing. See Audit for more information.

Once your layout is set, you can move on to dragging in the content widgets to start populating your email. Each of the widgets have their own editing options which you can read more about below. Use the Divider widget to create a visual divider your design layout and separate out sections of content. For each row or component, you can also set the padding to adjust the spacing between elements of your design.

As well as providing media in the email body. You can also use the Attachment option after designing the email to attach additional media or other files to the email.

Audit

When you first open the Email Editor, you see that the Audit tab shows a warning notification. The audit warning indicates that there are outstanding design actions that need to be complete for the email to be valid or legally compliant.

The first warning that you see is a notice that all emails require a footer. The footer is a standard legal requirement that all emails must provide to allow people to unsubscribe from the email distribution. To make sure that you comply with this legal requirement, drag the Footer component onto the message design area.

The Audit notifications are intended to help you to build your email without missing the essential items. Other typical notifications include missing links for buttons or missing text for image alt text.

Text

Your email subject line is usually one of the most pivotal parts of your email which can determine gaining higher conversions.

When writing a good subject line, try to comply with the following set of rules:

• they are not too long, and not too short (somewhere between 20 and 60 characters long)
• they contain the right amount of words
• they are built using actionable or eye-catching words
• they do not contain negative words
• they do not contain characters or words commonly used as spam
• they do not use excessive punctuation
• they use capitalization to improve scannability and readability
• they use numbers (numbers are proven to increase open rates)
• they preview properly on different screens (desktop/mobile)

If your subject line is poorly formed, it could be considered spam. Remember to always keep "SPAM" in mind: Short, Personable, Attention-grabbing, and Meaningful.

Connect to receivers at a personal level using personable language and emoticons/emojis. Grab their attention using things like their first name, current events, questions, and so on.  Make sure your subject is meaningful by implying special promotions and exclusives.

You can get very specific with personalization using attributes and placeholders in your text and links. See the section on URLs, Attributes, and Placeholders for more information.

The body of your email is where you include the rest of your text field before inserting other media types, and then your footer. There are no limits to how much text you can include but bear in mind readers are not likely to be enticed to read long promotional emails.

There are various color and style options you can use in your text fields. You can set the default text attributes and alignment of the content on the Body tab.

If you want to change the styling for each text area, select the component and adjust the settings on the Content tab.

Fonts

Fonts are an important aspect of your email design. When creating your email in the editor, you can select fonts from an extensive range (in the region of 40 or so) to enhance your design.

Currently, the Email Editor does not support the addition of custom fonts. This is because all fonts must be publicly available for free. Also, if the font is not compatible with the email client, then a corresponding matching fallback font must be provided.

Legally, a license is required to use a web font online. Web fonts have been used on websites for several years, and licensing already covers use on websites and mobile apps. However, for emails, the licensing isn't as widespread. For many web font services, the use of web fonts in emails can be seen as redistributing the font, and may also not adhere to their EULA (End User License Agreement).

Most licenses for use of web fonts in email are based on the number of monthly opens. It is important to consider this if you are using a paid-for web font in your emails. If you are using a paid-for web font in your emails, adding the font in Infobip would make it available to all clients, potentially having a serious cost attached.

In addition, custom (web)fonts generally only work on a limited set of email clients, for example, iOS Mail, Apple Mail, Android (default mail client, not Gmail app), Outlook 2000, Outlook.com app, and Thunderbird.

Image

Images are an integral part of email campaigns, and rare is the case when they are not included, but there are some things to keep in mind when including images in emails.

Image widths have a width limitation of 701px in the email editor. This is because this is proven to be the most optimal size for screens and email provider formats. You can edit image widths in the editor, but it is recommended to have your email images already set to this width, to avoid losing any content to cropping or resizing.

Image files are treated as attachments in the editor and cannot be more than 10MB in size.

There are two ways to add images to your email body. You can either upload an image from your local device, or you can provide the link to the image. Make sure the link is not leading to an authenticated image.

Supported image formats are:

• jpg/jpeg
• png
• gif

Use the Image Link option in the editor to add a hyperlink to your image when clicked. This can link to the promotion that the email is about, for example, or your company homepage.

Add Alternate Text to your image. Alternative text, or Alt text, is important for your images to meet accessibility requirements. This text ensures that people who rely on screen readers are informed about the nature or content of an image. Try to be descriptive but keep it short.

If you don't add alternative text to your image, you'll see a warning in the Audit tab.

HTML

If you prefer to use your HTML email template, use the HTML widget to paste your code directly into the message.

Changes that you make in the HTML using the widget are reflected in real-time in the Email Editor. Your HTML code only takes effect in the section that the HTML widget was placed. You are not able to edit the HTML code for other sections.

Buttons

Use call to action buttons in your email as a funnel through to the required landing page your email campaign is for. It’s always good practice to use these buttons, but do not include too many to confuse the reader. Simply keep it to the minimum with them standing out enough to encourage the reader to click through.

Buttons should be big enough for your readers to notice them but should also be big enough for your label to be visible. Make sure you are adjusting the width of your button if the label surpasses the width of the button.

Use the other styling settings, such as color, font, and borders to make your button stand out. Often companies stick to their corporate branding colors but make sure there is a contrast with your email background.

Social

Adding social media links to your business social pages is a great way to keep your readers and customers engaged. This may even lead to them opting into other communication channels.

You can add as many other social networks as you require by selecting the social media icon. Here you can provide the link to your page and display the icon to be reflective of it. Clicking the image takes the reader to the personalized URL that you provide.

Once you have added your social networks, you can reorder them in the side panel. Hovering the mouse over the three line icon, and then drag the selection to a different position. Tidy up any style options you require (padding, background, and alignment).

You can choose from the 30 social media links and you can change the icon type to the style of your choice.

Video

Videos are powerful media content to include in emails, but most email providers do not support the technical requirements for videos to play there and then inside the email.

The Video widget allows you to insert a video in to the email layout. Add a direct URL link to specify the location of the video resource file.

The supported video formats are:

• mov
• mp4
• Webm

It is not possible to link to a video hosted on YouTube, Vimeo, etc.

You can customize the thumbnail as required.

If you wish to have animated content in your email without using a link to a video, use the Image widget to insert GIFs.

Footer

Your footer is the section located at the very bottom of an email, which usually contains basic information about you as the sender. It is common practice to also include links, including the option to unsubscribe from the mailing list. You can also use the footer to include the fine print for T&Cs, copyright, privacy policies, and reason for receiving. This is an effective way to reduce spam complaints.

Footers are mandatory in all email communications. Adhering to anti-spam laws and Infobip’s terms of use, you must include the following information in footers in every email sent through our system:

• Current year
• Company name of the sender
• Physical address of the sender
• Unsubscribe link

Use the Footer widget to show the required information. The default text for the footer uses placeholders for the company name and address, and this information is retrieved from your account details.

Copyright © CURRENT_YEAR COMPANY_NAME. All rights reserved.
Our mailing address is ADDRESS. Want to change how you receive these emails? You can UNSUBSCRIBE from this list.

If you try to send out email campaigns without a footer, when you launch the email, the system checks if the footer is absent.

When using the web interface to process your email traffic, the unsubscribe URL is added automatically.

When using the API for your email traffic, it is not added automatically and you need to add the unsubscribe URL manually.

Include the following additional lines in your API request:

<a class="unsubscribe_link" href="{$unsubscribe}" style="color:#999; text-decoration:underline"> Unsubscribe </a>

Unsubscribe links are generated by Infobip, and the provider must always be present. You can use your own links in the footer but the Infobip-generated unsubscribe link always remains present - even if it is not visible in Preview mode.

To enable and use the unsubscribe feature over HTTP and SMTP API, replace the value of the href attribute with {$unsubscribe}.

List-Unsubscribe Header

The ability to unsubscribe from an email list is critical for the trust and reputation of senders. Sometimes unsubscribe links can be difficult to find or are deep within body of the email. Best practice is to provide several ways to unsubscribe, which helps to reduce the number of unsubscribe or spam/junk reports from recipients.

The list-unsubscribe header is an embedded link that is, by default, positioned in the heading of an email. The link ensures that recipients can easily see how to opt-out of emails and can remove their email address from your distribution list without searching for the unsubscribe link in your email.

The list-unsubscribe header is included in all Infobip emails.

URLs

URL and link inputs are present throughout the message editor and its widgets. You may have numerous links throughout the email leading off to various places, like image links, buttons, accounts, or footer links.

Use the link icons and fields to add your links to the selected elements. Some widgets are required to have a link, for example, videos and buttons. If you add a button or video without adding the link, you'll see a warning message appear in the Audit tab on the side panel.

Gmail Promotions

Use the Gmail Promo widget to add Gmail annotations into your message to design interactive and engaging content.

Gmail automatically groups and highlights annotated emails in the Gmail Promotions tab. This feature identifies the emails that people are most likely to engage with, and it makes it easy to highlight key information with annotations such as deals, promotion codes, and expiration dates.

Adding images to your annotations brings your email messages to life, making them more discoverable and inspiring. For example, you can upload your company logo and images to ensure that your message differentiates from other messages and attracts end user attention.

Emails that contain the annotations are highlighted on the Promotions tab in the recipient's mobile Gmail application.

When testing Gmail promotions, using the following tips:

• For testing purposes, create a special Gmail testing account for your team ending in [email protected]. For example [email protected]. This account has more aggressive email ranking and bundling to make testing easier and faster. Gmail also enables features for these testing accounts before enabling them for the general public.
• If you are iterating and making changes before testing, always delete your old messages from the inbox to ensure that the promotion displays properly.
• The sender that you use for sending these emails must be a "verified sender". This means that the DNS records are set properly and comply with the Google guidelines (opens in a new tab).
• For the image to display properly, make sure that it has a 3.9 aspect ratio, it is hosted on HTTPS, and it is not a gif or webp image.

Kinetic features

Kinetic features provide ways to add interactive content to make your emails more exciting, impactful, and to increase conversion rates. Kinetic features aim to give a website experience without the need for the recipient to leave the email.

To add the Infobip kinetic features to your emails, drag the widget to your email design and use the settings to modify the behavior. The basic kinetic widgets are:

• Interactive Coupon
• Rain animation
• Carousel
• Hover image
• Accordion
• Hotspot
• Tabs

Each widget shows a Compatibility section, which shows whether the animation is compatible with email clients.

Interactive Coupon

The Interactive Coupon widget lets you add an image that is capable of displaying interactive displays.  An interactive coupon is designed so that the recipient must click on the coupon to show the discount or offer.

You need to add two separate images for the front side and back side displays. The front image is shown in the email and the recipient must click on it to display the back image, which contains the relevant coupon details. You can choose whether you want the image animation to be either Flip to appear that the image turns over, or Slide to appear that the image moves from side to side.

Rain animation

The Rain animation widget lets you add moving objects to your email design as though they are falling like rain. You can choose whether you want to objects to be a Sphere, an Image, or Text.

You can change how the objects are displayed, for example, the number of objects shown, and also the size and color. You can also select to have the objects rotate when falling.

You can add the Rain animation widget only once in your email design.

Carousel

The Carousel widget lets you upload a selection of images in your email design to be used in an sliding image gallery. A carousel is designed to offer a number of images in the email design where the recipient can browse through each image from side to side.

The maximum number of images you can add to your gallery is 10. For each image, you can add individual captions that are displayed over the image and can also include placeholders for personalization.

Hover image

The Hover image widget lets you use two images to change the information presented in the email message. A hover image is designed so that when the recipient hovers over the image in the email, it switches to another image.

You need to add two separate images for the main image and for the hover image displays. The main image is shown in the email and when the recipient hovers over it, they then see the hover image.

Where the hover image does not display because of compatibility, the fallback shows only the original image.

Each image can convey different information, which means that you can reduce lengthy content. By using this feature to make a subtle change in the image, this automatically draws attention to the image and the connected text.

Accordion

When your email message contains a large volume of text, you can create collapsible sections for displaying the content in a limited amount of space. When you use collapsible sections, you save space in your email message and make longer messages easier to read for the recipient.

Use the Accordion widget to design the message text in separate drop-down sections.

When the recipient receives the message, they see each section as a title. The recipient can then expand the collapsed text only if they wish to read the detail.

Hotspot

The Hotspots widget lets you enhance images and graphics with interactive hotspots. Interactive hotspots can provide additional details about specifics on the image, highlighting the features of a product or giving details of individual offers on a collection. Hotspots are designed to attract attention and improve click-through conversions. The recipient clicks the hotspots to reveal a popup with an associated image, text, and call-to-action.

The Hotspot widget simplifies the creation of hotspots and removes the need to work with complex mapping and coordinates. You can add up to 10 hotspots to your image.

Each hotspot is identified with a marker. You give the marker a label and set the position on the image using the Top and Left percentage arrows. The hotspot displays a popup that shows the image and text that you define. You can also add a call-to-action link.

Where the hotspots cannot display because of compatibility issues, the fallback state shows only the original image and the image link so that the recipient can open a page with more details.

Tabs

The Tabs widget lets you create separate sections for displaying the content in a limited amount of space. When you use tab sections, you save space in your email message and make longer messages easier to consume for the recipient.

Use the Tabs widget to design the message text in separate tabs. When you create a tab, you provide the Header text to identify the content. You can enter the details for the tab and you have the option to format the text to suit the information. You can add up to a maximum of 10 tabs. Use the Preview option to check the appearance of the tabs in the finished email message.

When the recipient receives the message, they see each section as a tab at the top of the message. The recipient can then select the tab to see the relevant detail.

Personalization

Placeholders

In addition to using personal attributes, such as names and account numbers, in links and fields, you can also add placeholders for standard and custom attributes to target as many customers at the same time.

When you add a link, you can set the behavior of the link to be a Special Link, which lets you choose whether to view the message in a browser or to unsubscribe from receiving them. When you insert or edit a link, click Special Links to select:

• View in browser {$browserlink}
• Unsubscribe {$unsubscribe}

Standard and custom attributes are tied to people profiles. See People to learn more about attributes and how to set them up.

Simple Expressions

Simple expression is a feature that allows you to manipulate any personalization that you include in an email message.

It is based on the data type of the attribute being inserted. For example, on string attributes, you can show expressions, like proper case or lower case. On numeric attributes, you can show expressions, like round, format, and so on.

Simple expressions ensure that all attributes are shown properly and consistently, regardless of how they are stored in the system.

The simple expression feature supports the following formatting options:

String:

• proper case
• lower case
• upper case

Numeric:

• round (round down when < X.5, up when >= X.5)
• floor (rounds down)
• format with 2 decimals

Date(Time):

• US format (yyyy-MM-dd or yyyy-MM-dd hh:mm)
• EU format (dd/MM/yyyy or dd/MM/yyyy hh:mm)
• Day of year
• Day of week
• Month of date

For example, when you select a string attribute such as firstName to include in your email message, you see the options:

• firstname in proper casing
• firstname in lower casing
• firstname in upper casing

Display Conditions

Display conditions is a feature that enables you to set and manage any conditions that you want to apply to the email. It allows you to send specific content to certain recipients based on different conditions. So, when a single message is sent to an audience, each recipient receives content tailored to them.

Use Display Conditions to create and manage conditions for each message. You can define up to a maximum of 50 conditions per message.

To create a new display condition:

1. In the Email Editor, select the Display conditions tab.
2. Click Create Condition.
3. Enter a Name and Description for the condition.
4. Select an Attribute for the condition. For example, select Interest is Messaging.
5. Use AND or OR operators to make more complex condition. In the following example image, the Name of the display condition is Messaging or Technology, and the condition uses the OR operator for Interest to be either Messaging or Technology. Then click Save to save the condition for use in your email display.
6. In the email design, select the row or content to which you want to assign the condition. In the following example image, a row is selected.
7. Click Add Display Condition in the property panel to add the conditions for the selected content.
8. Choose the condition for selected content.
9. Test your conditions in Preview. Enter the condition selection in the Test placeholders tab.

For example, you can build a newsletter containing different topics in the message, and then display conditions dynamically showing only the relevant topic based on the recipient's interests.

Repeat Block

The Repeat block feature enables you to include personalized lists in your email messages where items are dynamically loaded for each campaign or recipient.

This feature enables you to build:

• Cart abandonment messages
• Newsletters
• Low in stock
• Price Drop
• Policies expiration reminders

Repeat blocks use a list (array) of data, automatically repeating the section of your template for each entry in the array. The data stored in item properties are dynamically loaded for each repeated block.

To create a repeat block, use the following:

1. Create a Custom Email message or use a template.

2. Create a layout for the content you want to show.

3. Click on the block you wish to repeat for each item.

4. In the pop-up window, choose the list from which you want to show items. You can loop over Catalogs or List attributes.

   

5. Use the Filter option to specify the items from the list.

6. Use the Maximum amount counter to limit number of items to be shown in the message.

   Note

   The recommendation is to show no more than 15 items per message.

7. If Catalogs are your source of data, you can additionally match items to each recipient to personalize your message. Choose the Catalog field you want to match to the People attribute. Only those items that are matching the recipient's attribute are shown in the message. You can add multiple match rules to tailor your personalized list. For example, if you want to show Product from the Catalog that has items in the same Size as recipient and falls under Category that person is interested in.

8. Additionally, sort your items to adjust the order in which they are shown. Under the Available placeholders section, you see all the data that can be used in your message. Use those placeholders to load data about each item dynamically.

9. Click Preview to test your message.

Template Language

To send emails with dynamic content, use the template language within your HTML content and define the placeholder values in the to parameter of the request. Add any of the available template language constructs in the HTML content to solve substitutions, conditional statements, or iterations.

To use the new template language constructs in an API request, provide the parameter templateLanguageVersion=2.

See Send Fully Featured Email (opens in a new tab) in the API Developer Hub for more information.

Template language syntax

A template may contain placeholders, which are replaced with values when the template is evaluated. It may also contain expressions and tags, which control the logic of the template.

The template language elements need to be wrapped between the following delimiters:

• {$placeholder_name} to print a placeholder
• {{ ... }} for expressions that you would like to print in the template output
• {% ... %} for tags to control/manipulation statements (conditions and loops)

When the template engine encounters a placeholder or expression, it evaluates it and replaces it with the result.

Tags

Tags create the logic and control the flow for templates. They are denoted by curly braces and percent signs: {% tag %}.

Tags do not render any visible text. You can use them to create conditions and loops in the background.

Conditions

Use the {% if %} tag to designate a chunk of content as conditional depending on the result of an expression. If the result of an expression is true, the content is shown.

Input	Output
{% if {$firstName} == "Alex" %} Hello, Alex! {% endif %}	Hello, Alex!

Use the {% elseif %} and {% else%} tags within an if block to define additional conditions that are displayed if all previous conditions fail.

Note: Every if block must have a closing {% endif %} tag.

Input	Output
{% if {$firstName}  == "Alex" %} Hey Alex!{% elseif {$firstName}  == "Anna" %}Hey Anna!{% else %}Hi Stranger!{% endif %}	Hey Anna!

Operators

You can use logical and comparison operators in if statements.

==	equals	{% if {$firstName}  == "Alex" %}Hey, Alex{% endif %}
!=	does not equal	{% if {$firstName}  != "Alex" %}Hey, you!{% endif %}
>	greater than	{% if {$score}  > 50 %}Congratulations!{% endif %}
<	less than	{% if {$score}  < 50 %}I'm sorry, but you lost{% endif %}
>=	greater than or equal to	{% if {$grade}  >= 95 %} Congratulation, you passed! {% endif %}
<=	less than or equal to	{% if {$grade}  <= 30 %} You failed {% endif %}
or	logical or	{% if {$season} == “Summer” or {$weather} == “Hot” %} It’s time for ice cream! {% endif %}
and	logical and	{% if {$gender}  == “Female” and  {$married} == “yes” %} Hello, Mrs.  {$lastName}! {% endif %}
not	logical not Negates a boolean expression	{% if not {$hasAccount} %}Please, register!{%else%}Hello, customer!{% endif %}
contains	Checks for the presence of a substring inside a stringCan also check for the presence of a string in an array of strings.	{% if {$productTile} contains “Jeans” %} This product’s title contains the word Jeans. {% endif %} {% if {$products}[0] contains 'title' %}You have {{ {$product}[0].title }} in your cart.{%endif%}
even	Checks if number is even	{% if {$number} is even %}4 is even!{% endif %}
odd	Checks if number is odd	{% if {$number} is odd %}5 is odd!{% endif %}

Loops

Use the {% for %} tag for simple iteration over the collection of elements or objects.

Use limit:n to limit the loop to the specified n number of iterations.

Note: Every for block needs to have a closing {% endfor %} tag.

Iterate over a list of elements

Input	Output
You left products in your cart: {% for item in {$cart} limit:3 %} {{ product }}{% endfor %}	You left products in your cart:ShirtJeansShoes

Iterate over a list of objects

Input	Output
You left products in your cart: {% for item in {$cart}  limit:3 %} {{ item['name'] }}, {{ item['price'] }}, {{ item['quantity'] }} {% endfor %}	You left products in your cart:Shirt, 10 EUR, 2Jeans, 20 EUR, 1Shoes, 50 EUR, 1

Calculate the item position in the list

If you wish to iterate over a list of items in the text, you can calculate the size of your list and add an additional rule depending on the position of item in the list.

Input

Output

{% if {$dataList of Products}.size == 1 %} Your Policy for {{ {$Policies}[0]['Name'] }} expires in 10 days. Renew now on our app and get cash rebates for driving less. {% elseif {$dataList of Products}.size > 1 %} Your Policies for {% for item in {$Policies} limit:3 %} {{ item['Name'] }} {% if not loop.last %} and {% endif %} {% endfor %} expire in 10 days. Renew now on our app and get cash rebates for driving less. {% else %} Your Policies are fine. {% endif %}

Your Policies for ABC1 and ABC2 expire in 10 days. Renew now on our app and get cash rebates for driving less.

Expressions

You can use expressions in your email by calling the expression function.

For more information see Expression Language.

Examples

String formatting
lower	Converts a string into all lowercase.	Input: { expression('lower({$title})') }} Output: hello, dear friend!
upper	Converts a string into all uppercase.	Input: { expression('upper({$title})') }}Output: HELLO, DEAR FRIEND!
proper	Converts a string into proper case by making words start with an uppercase character and the remaining characters lowercase.	Input: { expression('proper({$title})') }} Output: Hello, Dear, Friend!
Number formatting
numberformat	Formats a decimal number. Use the "#" symbol to control how many symbols after the dot you want to show.	Input: Price is: {{ {$price} | numberformat('#.##') }} EUROutput: Price is: 5.00 EUR
round	Returns the value of a number rounded to provided amount of digits after the decimal point.	Input: {{ expression('round({$pi}, 2)') }}Output: 3,14
floor	Returns the value of a number rounded down to the nearest integer value.	Input: {{ expression('floor({$pi}') }} Output: 3
Date formatting For more information see  https://pebbletemplates.io/wiki/filter/date/ (opens in a new tab)
date	Formats the date using the provided pattern. An alternative way to use this filter is to use it on a string but then provide two arguments: the first is the desired pattern for the output, and the second is the existing format used to parse the input string.	Input: {{ expression('formatDate({$birthDate}, "dd.MM.yyyy")') }} Output:  01.05.2000 Input: {{ "May 01, 2000" | date("yyyy-MM-dd", existingFormat="MMMM dd, yyyy") }} Output: 2000-05-01
dayOfYear	Returns the day of the year for a given date as a number from 1 to 366.	Input: {{ expression('dayOfYear({$birthDate})') }}Output: 121
dayOfMonth	Returns the day of the month for a given date as a number from 1 to 31.	Input: {{ expression('dayOfMonth({$birthDate})') }}Output: 1
dayOfWeek	Returns the day of the week for a given date as a number between 1 (Sunday) and 7 (Saturday).	Input: n{{ expression('dayOfWeek({$birthDate})') }}Output: 2
Math functions
+, -, *, /	All the regular math operators are available for use. Order of operations applies.	Input: Price without tax: {$price} EUR. With tax: {{ {$price} + ({$price} * {$taxSize}) }} EUR.Split for 4 payments (without tax): {{ {$price}/4 }} EUR. Output: Price without tax: 8 EUR. With tax: 9.04 EUR. Split for 4 payments (without tax): 2 EUR.

Using HTML

If you prefer not to create your email from scratch or you have an HTML file that is provided for an email campaign, you can upload the HTML file to the Email Editor. You may have been given an HTML file so that the email formatting is guaranteed to be structured and viewed exactly as expected, regardless of the email client in which it's viewed. Using HTML also gives you the full range of content element structures for your email, for example, if you are including lists.

If you are not familiar with HTML, the simplest way to create emails is by using the Email Editor.

You can use HTML files as part of your message in Broadcast and Flow. When you create a new email using the steps above, instead of creating a custom email, choose the Upload HTML File option. You’ll then be presented with an upload window where you can select your locally saved HTML file.

Once uploaded you’ll be able to edit your HTML, along with the preview screen for desktop and mobile next to it, which updates in real time.

Click Done Designing once you’re finished. You can always go back and edit your HTML in the editor itself whenever required.

Preview

Preview lets you view your email design without seeing additional elements like display conditions, repeater setups, and so on. Preview gives you the following options for testing your email before sending it to customers:

• Test the personalized attributes within the message layout
• Send a test message using the design

Personalized Attributes in Preview

Preview mode shows the display of your email without seeing design elements, like display conditions, repeater setups, and so on. If you include personalized placeholders in your design, you may wish to assess the value of the variables used in the message before committing to the final design.

Preview has an option for you to test the placeholders. You can enter some values for names, surnames, and other placeholders, so that you can see how the personalization attributes look in your design.

For example, if your email contains a placeholder Dear {$firstName}, when you preview your email, you have the option to test the appearance of the placeholder with sample information.

Select the Test placeholders tab to show all of the placeholders included in the email. In this example, the placeholder {$firstName} appears as First Name. When you type in the placeholder input field, the preview automatically displays the text in your email preview.

Test Message in Preview

You can use Preview to test an email message before sending it to your customers without setting up the communication. It is available where ever you can create an email message, for example in Flow, in Broadcast, or in content email templates.

This feature makes it easier to check your email message and apply any adjustments directly in the design stage so that you can focus on the content of the message without having to deal with any required communication settings.

In Preview, select the Send a test message tab and enter a recipient email address for the test email.

When you are ready to send the test message, click Send Test Message.

The test message goes to the inbox with the subject test. The sender for the test message is taken either from a sender that you have already specified on the message in Broadcast or Flow, or, alternatively, the first registered domain for this account.

If your account doesn't have registered domains, the sender is taken from the single sender that is verified for this account.

Inbox Previews

Inbox Previews makes is easier for you to preview your emails across many email clients, apps, and devices to ensure an on-brand, error-free subscriber experience.

Some email clients may override styles and cause messages to render in a different way than intended. This feature is useful for testing your message before sending it to the recipients, allowing you to check your design within any of the email clients and devices in which your audience might choose to view it.

In the Email Editor, to access inbox previews, click Inbox Previews. Inbox Previews is activated in Infobip using an integration with the Litmus Email Marketing Platform.

To start using Inbox Previews, you'll need to ensure that you activate the Litmus app in Exchange.

When you click Inbox Previews, it either open the Litmus login page if you have already activated the app or shows an option to Activate the Litmus Integration in Exchange.

To activate the Litmus integration for Inbox Previews:

1. In the Infobip web interface, go to Exchange (opens in a new tab) > All Apps.
2. Search for Litmus.
3. Click Add to add the app.

Use Inbox Previews when you are designing a message.

1. Click Inbox Previews. You'll see a message about the use of your Litmus account.
2. Click Connect to sign in to your Litmus account.
3. Enter your Litmus email address and password, and then click Sign In.
4. On the Desktop Clients page, you can navigate through the different previews for email clients.
5. Click Choose email clients to configure the email clients that you want to test. You can also test the devices, including dark mode. Then click Save list.
6. Click Retest to generate the preview for the list of clients and devices.
7. Click on an individual preview to see the detail.
8. Click Comparison View to compare the client views or the desktop view against mobile view. If you wish, you can make any adjustments to your requirements or when you are satisfied with the message design.