Email editor

The email editor allows you to design responsive and visually appealing content for emails that will be sent to your customers via workflows created for this purpose.

 

How to Access?

You can access the email editor through two paths:

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

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

 

Interface

The email editor consists of three panels:

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

2. Design: Build the email visually using structures and components from Panel 3 (Tools).

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

 

How It Works

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

1. Categorize the Email

In the Design panel (2), categorize your email for quick access 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 general appearance settings. You can also access these settings by clicking on   General Properties in the Design panel (2).

Settings to define include:

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

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

• Layout: the width of the content in pixels and the responsive threshold (the maximum screen width at which it will be considered a mobile device).

• Text: the default font or typography for the email text.

• Preview Text: the text that will appear to the client in the email preview, after the email subject.

• Header: the title that will appear on the contact’s browser tab when they click "view in browser."

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

 

3. Build the Email with Blocks

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

Structure

The layout a content block will adopt in the email. It can have one or multiple columns, with identical or varying proportions.

The structure must be inserted first. If none is included, the default structure will be a single column.

Once a structure is created, hover over it and click on  (Edit block) to modify it,  (Duplicate block) to create an identical copy, or  (Delete block) to remove it.

 

Elements

Multimedia content you can add to your email by dragging it into the Design panel (2). As with the structure, you can edit elements by hovering over them and clicking  (Edit element) or directly on the content. You can also duplicate them by clicking  (Duplicate element), or delete them by clicking  (Delete element).

Available elements include:

• "Text": Compose your content with rich formatting (bold, italics, links...), insert dynamic variables, or modify its layout in the inserted block.

• "Image":
  If your image is already published online, paste the Image URL to include it in the email content. If you prefer uploading it from your device, click on  Upload Image or the icon with mountains, and select the file from the file explorer window. Once uploaded, the Image URL will be automatically filled in.
  Additional configurations allow you to specify the alt text (appears if the image fails to load), the title attribute (shown when hovering over the image), and the layout within the block.
  
  
  
  

   

  If you need to modify your image, you can use the Image Editor.

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

• "Social Media":
  Choose the social networks you want to include and modify their URLs, as well as their layout within the block.
  
  
  

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

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

• "Products" (OLD).
  Insert a product block that you can populate through a workflow with items of interest to the contact. Choose from three default templates (Basic Product, Product with Brand, or Product with Price), or customize the final appearance in the text editor or as HTML. You can also define the rows and columns layout for desktop and mobile views.

 

• "Products" (NEW).
  Insert a product block that you can populate through a workflow with items of interest to the contact. You can edit it using a template or the HTML editor. When editing as a template, select one of three options (Vertical, Image on the Left, or Image on the Right), and easily customize each element to define which product attributes you want to show on the card, organize them, style them, etc. Additionally, you can choose the number of rows and columns to display for desktop or mobile views. The editor allows you to preview the final design.

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

• "View in Browser.":
  Predefined text for inserting a link that allows the content of the email to be viewed in a browser window. When editing the link, you can modify the display text, the title, and whether it opens in a new window.

 

• "Footer.":
  Predefined text for inserting a footer into your email, where you can specify your company's details and provide the customer with the option to unsubscribe or forward the email.

 

4. Creating, Editing, or Deleting Global Blocks

Save a block as global to use it across all your emails and edit it simultaneously wherever it's added. 

Once you've added the desired elements to your block, hover over it and click on the  Create Global Block button.

In the pop-up window, you'll see the Store where the block will be created. Provide a name for it and click the Create Global Block button.

After creating it, save the email, and you can use it in your other email content. To use it, navigate to the My Global Blocks section in the editor's Components tab and drag the block into the editor, just like any other component.

You can edit the block globally so that changes are applied to all your emails by clicking on the block and selecting  Global Edit.

Once modified, click on Publish Changes to save the new design and automatically publish it across all emails where it is being used.

To delete the global block, navigate to the My Global Blocks section in the editor's Components tab, locate the block you want to delete, and click on   (Delete).

In the pop-up window, you can see where the block is being used. To confirm deletion, click on the Delete Global Block button.

You can also access all your Global Blocks at any time without entering the Email Editor, through "Content Global Email Blocks".

 

5. Creating and Customizing a Product Block

The Product block lets you insert an element that can be filled in a workflow with personalized products for the contact based on their interests (e.g., products on sale, cart items, recently viewed products, etc.).

To do this, in the Tools panel (3), click on the Components tab and locate the Products (New) block. Select it and drag it into the Design panel (2) at your desired location.

Click on the element or   (Edit).

(Optional) Give it a name and select one of the three templates (Vertical, Image on the Left, or Image on the Right).

In Product Page Link, you can specify the variable ID that will direct to the product page. By default, it is set to buttonURL.

If you check the Link the entire product card box (active by default), any element included in the product card in the email will link to the product page.

Alternatively, if you want not all elements to link, uncheck the box and customize each element’s link in its dropdown under Link. You can choose either Link to Product Page or No Link.

To edit each of the elements that can make up the Product card, click on their dropdown menus.

Easily customize each element to define its final appearance without editing it as HTML. Each contains options for its appearance, content, and the Variable ID it contains, which you must complete through the variable assignment in the "Send Email" node.

If you need to add additional information to the Product cards, click on the Add Variable option. In the new element created (default name variable1), edit the content you want to include, just as you would with other elements.

 

6. Apply a Condition to a Block

Apply conditions to blocks to show them only if the contact meets the set condition. Conditions can be based on belonging to a segment or the value of a contact field.

To do this, hover over the block you want to conditionally show or hide and click the Add Condition button.

To set a condition based on the value of a contact field, choose the Contact Fields option. Then select the field, operator, and the value the field must contain for the block to be displayed to the contact.

To set a condition based on segment membership, choose the Segment option. In Select Operator, decide whether the contact must belong to any, all, or none of the selected segments. 

Click on Select, and then on Apply. This way, Connectif will only display this block to contacts who meet the specified condition.

 

7. Use an Existing Template or Save a New One

Quickly create emails using pre-built templates by Connectif or your own saved templates from the Tools (3) panel under the Templates tab. Click   Use Template to select one, or click   Create Template from this Content to save your current design as a new template.

8. Add Predefined Links to a Button

In addition to the predefined elements explained in point 3, (View in Browser and Unsubscribe), Connectif offers several predefined links that can be added to email buttons for specific functionalities without manual generation.

To add a predefined link, insert a Button component into your email and edit its settings.

In the Button Link section, click the Add Predefined Link button.

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

• Confirm Newsletter Subscription: If clicked, Connectif changes the "Newsletter Subscription Status" to "Subscribed" and automatically notifies your web's back office.
• Unsubscribe from Newsletter: If clicked, Connectif changes the "Newsletter Subscription Status" to "Unsubscribed" and notifies your web's back office.
• View in Browser: If clicked, the contact views the email in a browser tab. This page is automatically generated by Connectif.
• Resend Email: If clicked, the contact can resend the email via their default email client.

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

9. Review Variables

Examine the created variables and how often they are used in text elements from the Tools (3) panel under the Variables tab. To edit a variable's format, click  .

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

10. Preview and Save Final Result

In the Preview and Save (1) panel, view the final result of your email. All content is responsive, allowing you to click  Preview to review the final result. You can switch between  Desktop View and  Mobile View to ensure the design works across devices.

Send yourself a preview email by clicking  (Send Preview Email) to ensure the email displays correctly.

Once satisfied, click  Save.

---

Keep Learning!

To fully maximize your Connectif account's potential, we recommend continuing with the following articles:

• Create a personalized product block in an email, to send customers items they’re interested in.

• Links in emails: view in browser, unsubscribe, and buttons, for configuring predefined links.
• Weekly product recommendation campaign, to schedule automatic sends with recommended items.

• Mass coupon email, to send exclusive discounts to your customers.