Build your Email

📘

API

After clicking on Design Your Email button, a pop up appears to choose 3 options:

  • Email Builder: Design your email and create your layouts.
  • HTML Editor: Copy directly your HTML code.
  • Add HTML file: Upload a HTML file. Once it is uploaded, you can edit and preview from the html editor.

You can click on Choose how to design your email, on the top area, to change the option.

Email Design

Be careful, if you choose to change the design option, you will lose all changes and this action can no be undone.

Warning

Email Builder

The screen has two important areas (row types and content types). In the central area, we will design our email with the help of the elements situated on the right area. In this video, we explain you how to drag & drop the elements into your email. Find out!

Content

In the content area, you see first row types (the structure of design) with 6 file options. Then you see the content types to choose what introduce on every row: html code, text, image, button and social media. With any of these possibilities you can edit several options to make a fabulous email.

Row Types

You click on one of the 6 row types, then drag and drop on the email area to design your email.

row types for email

You can use this estructure of rows:

  • 1 column (100%)
  • 2 columns (50% - 50%)
  • 2 columns (25% - 75%)
  • 2 columns (75% - 25%)
  • 3 columns (33% - 33% - 33%)
  • 4 columns (25% - 25% - 25% - 25%)

Content Types

You click on one of the 4 content types, then drag and drop on the row/column to design your email.

Content Types

Each element has several options to select paddings, margins, borders, background colour, position, border button, padding button and background colour button.

  • HTML code
  • Text
  • Image
  • Button
  • Social Media

The configuration of social media is very easy choosing the networks, adding the respective links and defining the style and color of the icons.

Social Media Configuration

Settings

In the Settings area you can choose the colour of the background and the width of the content.

Setting Email

Preview the Email

On the Preview button, you can check how the user will see the email on the computer monitor or mobile screen. Pulse on the desktop o mobile icon to see the two options. Once you have seen it, click again on Edit button to continue building your email.

New Email Campaign

HTML Editor

If you your template is done with html code, only it is necesarry to copy and paste on the right space. Watch this video in less than 30 seconds to learn how to insert the code into email:

1. Drag and drop the 1 column (100%)
2. Drag and drop the HTML button into first column.
3. Click into the html editor (as it is shown in the image below)

Drag and drop

4. Paste your html code and click on Save at the right top area.

html space

Using variables

You can create customized campaigns for each user through variables that change according to the data of the user you want to address for the subject and body text.

👍

Variable Example

Hi Tom! We have discounts in our Madrid store, are you going to miss them?

The scheme would be this: Hi {{var:name}}! We have discounts in our {{var:city}}store, are you going to miss them?

For this simple example, the variables are the customer's name and city following this format: {{var:variable-name}}.

These variables are the data you have on your CRM and it is necessary to upload a .CSV file with all data you need in the Define your Audience section. For this example, you need the following fields:

email, name, city
[email protected], Tom, Madrid
[email protected], Sarah, London

Remember that if you are working with the Customer Journey solution then you need to create the fields in the Customer Fields area as we explain here. Please see all information about data synchronization for Customer Journey.