In this article, you will learn how to build the body of your email using either the user-friendly visual builder or the HTML builder.

Navigating the Visual Builder

The Visual Builder utilizes a simple drag-and-drop workflow, enabling you to build your email templates without any advanced coding know-how. It consists of two main parts: an editing region and a tabbed pane with various elements that you can drag onto the editing region or change its settings.

In the picture below, you can see the tabbed pane on the right side is constituted by 3 main tabs, the Settings, Rows, and Content, that we will explain in detail below. In addition to that, you can access Jinja personalization in a similar style of workflow, go fullscreen, and show or hide the structure of the template by clicking the respective button on the bottom right of the editing region.

1. Settings tab

The Settings tab allows you to configure the global parameters of your email template, such as the width of the content area itself, background color, content area background color, default font, and link color. You can do so by simply changing sliders or respective input fields.

2. Rows Tab

The elements in the Rows tab allow you to design the structure of your email template. These row elements serve as a frame for the content you will be adding later.

You can also configure the appearance of these rows. A 'Row Properties' pane will appear if you click on a row that is already placed in the editing region. Here you can set additional settings for each individual row, such as background color, padding, and more.

Row display condition

You can set specific conditions for every row so that it is shown only to a specific group of users. To do this, double-click on the relevant row and go to Add customer filter in the Row Properties.

After opening the customer filter you can choose the specific segmentation of customers who should see the row in the campaign.

From the technical perspective, applying the condition effectively creates a Jinja condition rendered in HTML. In order to check or edit conditions in Jinja, click on Edit condition under Display condition in Row Properties.

A condition in jinja that lets the row be seen only by male customers would look like this: before -format {% if customer.gender == 'male' %} and after - {%endif%}.

Note: If you are acquainted with Jinja, you do not have to rely on the condition to be generated automatically. Instead, you can write it in Jinja yourself by not choosing Add customer filter but Add condition.

Saving custom rows

After hovering your mouse over the row in the editor, you will notice 4 icons at the top right corner. These allow you to comment on, save, delete, or copy the row. The same buttons can be accessed at the top right of the Row properties panel, as shown in the picture below. Saving your custom made rows will store them within the Asset Manager so that they can be accessed and reused, or modified later.

After clicking the save button, you will be presented with a popup asking you to name the row you are saving and will give you the option to add tags or include it in an initiative for further clarity.

📘

Editing an already saved custom row

After editing an already existing custom row in email editor, the saving popup will give you the option to either update the existing saved row, or save the new one as a copy.

❗️

Custom row update

Updates made to existing custom rows (from email editor or Asset Manager) will not be reflected in existing campaigns that used the row previously. Changes to existing templates and campaigns have to be done individually by manually replacing the row with the updated version.

You can manage, edit, and view the saved custom rows in the Asset Manager. To access and use them directly from the email editor, select the Custom option in the dropdown menu within the Rows tab. This will display your saved custom rows.

3. Content Tab

Finally, after adding the "frames", you can fill them with content. The various content elements that you can use are grouped together under the Content tab.

The following content elements are available:

History of changes

After you have made changes to the email template, our visual editor lets you view the change history, including things like the time and nature of the edit, and easily undo or redo these changes. You can find the appropriate buttons in the bottom left corner of the editor interface.

Navigating the HTML Builder

The HTML builder allows you to create an email template by writing HTML and CSS code. There are three modes available for editing your email temples: Code, Edit, and View. You can switch between these modes by clicking on the respective buttons located at the top-right of the email template editor.

Uploading images

To upload a custom picture click on the + sign and a new layer opens on the right side of the page. After uploading the picture click again on the square where you have just uploaded it - this will copy its URL address in the form of <img src="URL LINK OF YOUR IMAGE" /> that you can immediately paste into the HTML editor.

Alternatively, you can make the HTML code update itself automatically to include all the newly uploaded pictures. This is done by adding img scr line into your HTML in the following format: <img src="./name_of_your_image.jpg"> and the name must be identical with the name of the image that you are going to upload. After all this is set, you can upload the image and its newly generated URL will be automatically updated in the HTML. This is especially useful if you are uploading many images at once.

Text font

We recommend using generally accepted fonts, like Arial, Tahoma, Verdana... because Email providers (like Outlook) tend to reject special fonts. In order to import those fonds, go to your HTML email builder and specify your

Alternative, you can try importing new fonts in HTML from Google API. Both options should achieve the same outcome, but you might prefer working with one or another.

HTML Builder >> import from Google API
<html>
<head>
<meta charset="utf-8" />
<style>@import url('https://fonts.googleapis.com/css?family=Roboto');</style>
</head>
<body>
<p style="@import url('https://fonts.googleapis.com/css?family=Roboto'); font-size:36px; font-family: 'Roboto', sans-serif;">Hi hi hi.</p>
</body>
</html>

Other Features

Personalization

Both the Visual builder and the HTML builder allow you to insert personalized customer or event attributes (such as name) or vouchers. These are inserted using the Jinja code.
You can access it in the Personalization pane by clicking on the bottom-right button with the accolades. Here you’ll find the settings and parameters to generate the Jinja code snippets.

📘

You can read more about Jinja here.

Multilingual versions

Both the Visual Builder and HTML Builder allow you to create different versions of your email template for each language in your project. You can access this function by clicking on the three dots on the top-right side of the template builder, and then on Add language version.

When a customer does not have any language set, the default template will be used. When creating a new language mutation, the default template will be copied. However, if the default template is changed, the copies will not be updated. Learn more about how to use multiple languages here.

HTML Blocks

The HTML blocks allow you to create standardized email template components, such as headers, footers, or call-to-action buttons and reuse them in every email. Read more about HTML blocks here.