Email editor

The email editor allows you to design, in a responsive and highly visual way, the content of the emails that will be sent to your customers from your account, through workflows created for this purpose.

 

How to access?

You can access the email editor in two ways:

1. From “Content > Emails”. Click on  Create new email to generate new content, or on More   and select Edit to modify an existing email.

2. From the "Send email" node of a workflow, by clicking on   (Edit node configuration). Click on Create new content or on   Edit to modify an existing email.

 

Interface

The email editor consists of three panels:

1. Preview and save: to save or discard changes and preview the final result of the email to be sent.

2. Design: to visually build the email using the structures and components from panel 3 (tools).

3. Tools: to configure all email properties, access templates, and add variables. This panel can be expanded or collapsed by clicking on  (Open tools) or  (Close tools).

 

Functionality

The email editor is based on the 'drag and drop' design method, allowing you to create emails quickly, easily, and visually.

1. Classify the email

In the design panel (2), catalog your email and locate it quickly by clicking on   Add tags and adding keywords to help identify it.

2. Edit general style

In the Tools panel (3), click on the General tab to edit the parameters of the overall appearance. You can also access it by clicking on   General properties in the design panel (2).

The parameters to be defined are:

• Content name: name you want to give the content to identify it in your Connectif account.

• Colors: background color of the content and general background color.

• Layout: width that the content will have in pixels and responsive threshold (up to what screen width it will be understood as a mobile device).

• Text: font or typography of the default email texts.

• Summary: text that will appear to the customer in the email preview, after the subject of the same.

• Header: title that the contact's browser tab will adopt when they click on “view in browser”.

• HTML Options: general style configuration based on CSS and HTML styles.

 

3. Build the email by blocks

In the Tools panel (3), click on the Components tab to create your composition by dragging and dropping structures or elements in the design panel (2).

Structure

The layout that a content block will adopt within the email. It can be presented in one or more columns, with identical or different proportions.

The structure must be inserted first. If not included, by default, the structure of a column will be used.

Once a structure is created, position the mouse over it and click on  (Edit block) to modify it,  (Duplicate block) to create another identical one or  (Delete block) to remove it.

 

Elements

Multimedia content that you can add to your email by dragging it into the design panel (2). As with the structure, you can edit them by positioning the mouse over the element and clicking on the button  (Edit element) or on the content itself. You can also duplicate them by clicking on  (Duplicate element), or delete it by clicking on  (Delete element).

The elements available to you are:

• "Text".
  Write your text applying rich formatting (bold, italics, links…), inserting dynamic variables or modifying its layout in the inserted block.

• "Image".
  If your image is already published on the Internet, paste the image URL to include it in the web content. If you prefer to upload it from your device, click on   Upload image or on the mountain figure, and select the file in the explorer window that will appear as a pop-up. When loaded, the image URL will be completed automatically.
  As additional configurations, you can write the alternative text (which will appear if the image does not load), the 'title' text (also known as the alt attribute, displayed when the mouse hovers over the image) and the layout within the block.
  
  
  
  

• "Button".
  Define the text that will appear on your button, the 'title' attribute, and the link (it can be a specific one or predefined to execute a specific action). To configure its visual appearance, select the text and background colors and adjust the layout within the block.
  
  
  

• "Social".
  Choose the social networks you want to include and modify the URL of the link, in addition to the layout within the block.
  
  
  

• "Divider".
  Configure both the color and the layout of the line to visually separate content.
  
  
  

• "Space".
  Define the distance of white space you want to insert between two blocks.
  
  
  

• "Products".
  Insert a carousel of products that will be completed with the items of interest to the contact. You can select one of the three default templates (Basic product, Product with brand, or Product with price) or customize its final appearance in the text editor. You can also define its structure of rows and columns in desktop and mobile.

• "HTML".
  Embed custom HTML code and adjust its layout.

• "View in browser."
  Predefined text to insert a link that allows viewing the email content in a browser window. When editing the link, you can modify the text to display, the title, and whether you want it to open in a new window.

• "Footer."
  Predefined text to insert a footer to your email, where you can specify your company information and provide the customer with the option to unsubscribe or forward an email.

 

4. Apply a condition to a block

Apply a condition to the blocks you want, to show or hide them to the Contacts based on whether they meet the indicated conditions or not.

To do this, hover the cursor over the block you want to show or hide depending on the conditions and click the Add condition button.

Click on  Add Condition and, in the dropdown, choose the value by which you want to filter the condition, from those available in Contact profile, Custom fields, Purchases or Value Indicators.

In the second dropdown, choose a Operator and, finally, in the third row, add the value you want Connectif to check to show or not the block.

Click Apply and, in this way, Connectif will only show this block to contacts who meet this condition. In this example, only the image would be shown to those who have made more than 3 purchases.

 

5. Use an existing template or save a new one

Quickly create your emails using pre-defined Connectif templates or created by you from the Tools panel (3), in the Templates tab, by clicking on   Use template. You can also save the design you have created as a template by clicking on   Create template from this content.

 

6. Add predefined links to a button

In addition to the predefined elements explained in the point 3, (View in Browser and Unsubscribe), Connectif offers several predefined links that can be added to the buttons of the emails and offer certain functionalities without having to generate them manually.

To add one of these links add a button to your email template, add a Button  component to your email and edit its configuration.

In the Button link section, click on the Add predefined link button.

Click on the dropdown and select the predefined link you want your button to include. Available are:

• Confirm subscription to newsletter: if a contact clicks on this link, Connectif will change their "Newsletter subscription status" to "Subscribed". In addition, the subscription will be automatically notified to the back office of your website. 
• Unsubscribe from newsletter: if a contact clicks on this link, Connectif will change their "Newsletter subscription status" to "Unsubscribed" and notify this change to the back office of your website.
• View in browser: if a contact clicks, they will see the email in a tab of their browser. This page is generated automatically by Connectif.
• Forward email: if a contact clicks on this link they will be able to forward the email through their default mail client.

Once selected, click Accept and the predefined link will be added to your button.

 

7. Review the variables

Examine the created variables and how many times they are repeated in the text elements from the Tools panel (3), in the Variables tab. To edit its format, click on  .

If you have recently added a new variable and it does not appear, click on   to refresh.

 

8. Preview final result and save

In the preview and save panel (1) you can see the final result of your email. All created content is responsive, so you can click on  Preview to display a new panel and review the final result. Click on  (Desktop view) to see the result on desktop, or click on  (Mobile view) to see the result on mobile.

You can also send yourself a preview email by clicking on  (Send preview email) to receive a test email at the address you select and review how the customer will receive it.

Once satisfied with the result, click on   Save.

 

---

Keep learning!

To take full advantage of your Connectif account, we recommend continuing with the following articles:

• Create block of personalized products in an email, to send your customers products of interest.

• Links in emails: view in the browser, unsubscribe, and buttons, to configure predefined links.
• Weekly campaign of recommended products, to schedule automatic shipments to customers with recommended items.

• Mass coupon by email, to send an exclusive discount to your customers.