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 will be viewed by the recipient. 

In the web interface, navigate to Moments on the side menu. From here you can create either a new Broadcast or a new Flow.

For example, to start creating a new broadcast email, select Create Broadcast. The default form is for SMS. Click Change to choose Email. 

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, and Subject line, 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. 

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 will be 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, you can switch to Preview mode to see what your email will look like. Preview mode displays the email in desktop, tablet, and mobile view. You can also use Preview mode to test any placeholders that you want to include in the email design. See URLs, Attributes and Placeholders and Personalized Attributes in Preview.

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 that will be available for 
• 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.

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.  

NOTE: The simplest way to create emails is by using the Email Editor if you are not familiar with HTML. 

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. 

Design Guidelines

Design plays a crucial role in successful email campaigns and delivery success.  Poorly constructed emails will likely hinder reader confidence and will 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 will 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. 

NOTE: If you do not add a Footer to your message design, Infobip will automatically insert a default footer to the message when it is sent.

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 are 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 as 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 individual 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 to 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 over a number of 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 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 are used to using your own 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 will be reflected in real-time in the Email Editor. Your HTML code will only take 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 will take 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 

NOTE: 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. 

Adhering to anti-spam laws and Infobip’s terms of use, it is required that you 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.

Note that footers are mandatory in all email communications. You will still be able to send out email campaigns without a footer, however, when you launch the email, the system checks if the footer is absent, and adds one automatically.

This is applicable to all email traffic sent via the web interface only.

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

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.

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, Attributes, and Placeholders

URL and link inputs are present throughout the message editor and its widgets, and it is likely that you will 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.

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.

Personalized Attributes in Preview

Preview mode lets you see how your email will look without seeing design elements, like display conditions, repeater setups, and so on. If you include 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 will 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.

The Test placeholders tab shows 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. 

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 will be 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 promotabtesting@gmail.com. For example mycompany.promotabtesting@gmail.com. This account will have 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 (see https://support.google.com/mail/answer/81126).
• 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.

Product Recommendations

Product Recommendations is an AI-driven feature that lets you target specific users with appropriate product recommendations. For example, you can send personalized email messages to clients containing the best products specifically for every person.

Product Recommendations uses the product information from catalogs to connect with products that will be recommended to individuals based on their activities. Catalogs contain relevant data including product names, links, descriptions, prices, and so on.

To add product recommendations to your email, drag the Product Reco's widget to your email design, and then from the Product catalog drop down list, select the name of your catalog. You can leave the Recommendation type as Recommended.

The Product Reco's widget uses catalogs of type Product only. For more information about setting up product catalogs, see Catalogs.

Change the layout settings, as required. For example, you can specify the total number of items displayed from the product catalog.  You can then change the number of items displayed on each row and how the layout is formatted in the email. 

Product Recommendations for each recipient are generated at email open time. Every time the recipient reopens the email, they will see the updated, most relevant recommendations.

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 behaviour. 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 will be 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 will be 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 will be 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 will be shown in the email and when the recipient hovers over it, they will then see the hover image. 

Where the hover image will not display because of compatibility, the fallback will show 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 will show 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.