How does the message editor work?

The email and pop-up editor allows you to design the content and appearance of your email messages, pop-ups, scenario email contents, and recommendation banners. You can also access a simplified version of the editor in Settings, in the Consents > Confirmations messages.

With the help of the editor, you can create these elements from scratch or use a rich library of templates. You can also add your own design using the built-in HTML and CSS code editor.

You can use the simplified version of the editor to create confirmation messages as well as emails created from the scenario level.

The editor interface consists of three parts: the top toolbar, the content and appearance settings panel, and the workspace.

Workspace

The workspace takes up most of the screen. Here you can create emails, pop-ups and message templates. It works as a drag-and-drop editor, allowing you to freely add content blocks, structures and modules.

In the workspace you can combine blocks, structures and modules into so-called stripes. You can edit each element directly both in the workspace and in the settings panel on the left.

If you want to delete, save, move or duplicate an item or stripe, hover over it and click the three dots icon. A pop-up menu with the above mentioned options will appear.

Above the workspace and editing panel there are additional useful options (described from left to right):

Undo and Reset buttons – You can undo all your actions up to the very first change you made to your message.

Templates button (available for email messages only) – It opens up a window with available email templates. When you select a template, it will automatically appear in your workspace.

Reuse button (available for email messages only) – It opens up a window with a list of all previously created emails. Click the Choose icon in the last column to add the email to your workspace.

The HTML Code editor button launches a separate editing window at the bottom of the workspace. In the editor, you can directly make changes to the email you are designing or the template you have selected. You can close the editor window by clicking the Code editor button again.

Attachment button (available for email messages only) – It allows you to attach, e.g., a PDF file with a price list, e-book or graphics to your email.

Preview button (available for email messages only) – It launches a window with a message preview in two views: desktop and mobile.

Test message button (available for email messages only) – It opens a window with a list of messages ready to be sent. From this level you can also create a new list of addresses for sending the test message.

Message content and appearance settings panel

On the left-hand side of the workspace you will find the message settings panel. It is divided into two parts: Appearance and Content.

Message appearance

In the Appearance menu you have access to the following settings:

General settings

Here you set the width of your message. By default the width of each message is set to 600 px, but you can choose any value between 320 and 900 px.

Here you can also set default spacing for any new structures added to emails both from the Content tab or when adding new Stripes.

Below you can set up the basic font for the entire message, choose the overall background color and set the default line spacing for all text elements in the message.

In the case of color settings, you can select any color from the palette available under the button. Alternatively, you can add the HEX value (preceded by #) of the color you want to use.

Other settings available in this section include:

The space below the paragraph. Enabling this option will automatically add space between paragraphs of text.
Highlight links. Each link added to the message will be underlined, making it more visible and accessible.

Responsive design. This option supports displaying messages on mobile devices. However, please note that results may vary depending on device. When this option is disabled, the mobile version of the email will look exactly like the desktop version.
RTL text direction. If the indicator is activated, the direction of all message texts will automatically change from right to left (Right To Left).
Background image. If you want to place a graphic in the background of your message, you can do it here.

Stripes

Stripes (or rows) are groups of elements – structures, modules and blocks – with the same style or function. You can edit the styles and functions of the stripes in the main editor panel. The stripe can consist of any number of elements.

To give the stripe a function such as a header, content, footer or information area, click on it and go to the settings panel.

For each of these features you can set the Text size, Content background color, Font color, Link color and the Background image.

You can add a new stripe directly in the workspace. Hover over the gray box next to the visible message template and a gray frame described as Stripe will be displayed. Click the “+” icon located at the bottom-left side of the frame.

You can access other options for managing the stripe in the same way – you will find them under the ellipsis icon displayed on the right edge of the frame. Here you can delete, copy, move and save the stripe as a module.

Headings

In the Headings section you can set the default font style, size, color, bold and italics for the H1, H2 and H3 headings used in the message body. You can also choose the line spacing and spacing between the heading and the text that follows it in the Space section at the bottom.

Button

In this section you can set some of the parameters used by default for all message buttons. These parameters are Button color, Highlight hovered button, Font color, Text style and size, thickness and italics parameters, as well as the Border radius (corner rounding) – by default it is set to 30 px.

Additionally, in the Border section you can set the button borders and their colors. You can set them individually for each side or the same for all sides of the button.

Another useful option here is setting the internal spacing, i.e., the distance between the edge and the text placed in the button.

Using the Outlook button improves the display of buttons in Outlook by inserting a special VML code element.

Mobile formatting

Here you can control how your messages will appear on mobile devices. By default, the editor uses desktop display settings. In this section you can adjust all dimensions to display them properly on mobile devices.

Here you can also set the text size of the header, body text and footer, the text size of the info area and elements for the Menu block, as well as settings for the H1, H2 and H3 headings. Additionally, you can set the size of the text in the buttons, the dimensions of the buttons themselves and their distance from the edges of the blocks.

Message content

The Content section allows you to design the content of the email. Here you can add structures, blocks and modules to your message.

To create a template skeleton, you need to drag the selected structure with the selected number of containers into the workspace and then fill it with content blocks or modules.

Each of these elements has its own set of settings, which are displayed after clicking a given element in the panel on the left.

The following three settings are available for each content item:

Add an anchor link – Allows you to insert a link to specific text in your message. Please note that this option doesn’t work in Gmail for iOS, Apple Mail for iOS, Outlook for Android, Outlook for macOS and AMP emails.
Hide item – You can choose in which cases the image will not be displayed: when accessed on a desktop computer or a mobile device. Selecting No will display the image in both cases.
Include in – You can choose whether the image will be included in both versions of the MIME message, only in HTML MIME, or only in AMP HTML.

Structures

The structures available in this section have from 1 to 4 containers. Containers are highlighted in blue. Once you have placed the structure in your workspace, you can add up to 8 containers to it.

You can arrange the structures in any order and combine them into stripes (rows), which you can assign functions to when editing the email appearance, e.g., its header, text or footer.

Blocks

You have 15 basic content blocks at your disposal, including a recommendation and cart block that displays personalized content to each message recipient, and an HTML block for embedding custom code and elements in the message body.

What content can you add using these blocks?

Image – It allows you to add an image from your local drive or via an external link. You can insert images up to 2 MB in size in PNG, JPG and GIF formats.
Text – It allows you to add a text box to your message. You can enter the text manually by typing it directly into the text field or by pasting a previously typed paragraph.
Button – It allows you to add a graphic and text block as a button.
Spacer – It is used to separate blocks of content. Use them instead of hitting the Enter key multiple times in a text block for a better appearance of the message.
Video – This block is used to embed videos available on other platforms into the message content.
Social – This block displays the four most popular social media icons by default.
Banner – Allows you to add previously prepared advertising graphics. You can insert images up to 2 MB in size in PNG, JPG and GIF formats.
Timer – This block allows you to place a counter with date and time.
Menu – Displays a horizontal list composed of links, graphics or links with graphics. You can place any number of them (over 30!). We recommend adding a maximum of 4 items to maintain the readability of the content and the legal width of the message (600 px).
HTML – This block allows you to add a fragment or the entire message in the form of HTML and CSS code. The block launches a blank text editor window where you can place your code. Make sure the code you enter is correct and meets the message layout requirements.
Recommendations – This block displays to the user dynamic content with recommended products or offers based on their purchase history.
Cart – This block displays to the user dynamic content with the contents of their abandoned shopping cart.
AMP blocks (carousel, accordion, form) – available soon – They will allow you to add animations.

Modules

Modules are preset message elements, e.g. structure, stripe or container, which you can use repeatedly in your messages. Using modules significantly reduces the time needed to prepare subsequent messages in the editor. You can create them from structures, blocks and stripes available from the workspace.

Modules will be useful if you often use repeated elements in your communication, such as logos, buttons with a fixed CTA, message footer content or a specific arrangement of blocks and structures, e.g. during promotions.