Email editors

In this article, you'll learn how to build the body of your email using the visual builder or the HTML builder.

Visual builder

The Visual builder uses a drag-and-drop workflow, enabling you to build your email templates without any advanced coding know-how. It consists of 2 main parts:

• An editing region
• A tabbed pane with elements you can drag onto the editing region or change its settings

The tabbed pane contains 3 main tabs:

• Settings
• Rows
• Content

You can also access Jinja personalization in a similar workflow style. To do so, go full screen and click the respective button at the bottom right of the editing region to show or hide the template structure.

Settings tab

The Settings tab allows you to configure the global parameters of your email template. For example:

• Width of the content area itself
• Title meta tag
• Background color
• Background image for the email
• Content area background color
• Default font
• Link color
• Language attribute

You can do so by changing sliders or respective input fields.

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 add later.

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

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 segment/s in the Row Properties.

This opens the segmentation filter, where you can choose the specific segmentation of customers who should see the row in the campaign.

You can add multiple segments and choose the type of condition:

• At least one condition must be met (logical OR)
• All conditions must be met (logical AND)

From the technical perspective, applying the condition creates a Jinja condition rendered in HTML. To check or edit conditions in Jinja, click on Edit display 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 know Jinja, you don't have to rely on the condition to be generated automatically. Instead, you can write it in Jinja yourself by choosing Add condition.

Save 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. 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, a pop-up will ask you to name the row you are saving and allow you to add tags or include it in an initiative for further clarity.

Edit a 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 must 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 from the email editor, select the Custom option in the dropdown menu within the Rows tab. This will display your saved custom rows. You can also use Predefined Templates in Asset Manager as a starting point for your Custom rows. Read more about our Predefined Templates.

Content tab

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:

Product items

This feature allows you to include product recommendations in your emails within the visual editor.

To add product recommendations:

1. In the Visual builder, under Content tab, click Product items and drag and drop the content block into the builder.
2. Rearrange the order of the titles until Product items is in the position you want in the email.
3. To define which products will be recommended, click Set recommendation.
4. Under Set recommendation, define:
   1. Recommendation engine: You can select an existing engine or create a new one. Make sure the recommendation engine is created upfront to use it.
   2. Number of items: Specify the number of product items to be recommended.
   3. Attribute for image, title, price, and URL: Define the attributes for each element.
   4. Currency symbol and its position: Specify the currency symbol and its position. If you want a space between the currency and the value, add a space next to the currency symbol: ‘USD ‘ or ‘ USD‘.
   5. Reference item: Set the reference item for the recommendations. This step is mandatory only for relevant recommendation templates.
5. After clicking Add, the product recommendations are added to the email. Edit them like any other elements using the visual editor.

History of changes

After you edited the email template, you can view change history. This includes information on the time and nature of the edit. You can also undo or redo these changes.

BEE editor HTML 3.0

Our visual email editor (BEE) optimized the way the output HTML is generated. The resulting HTML will now be much simpler and smaller in size by 50% on average.

The changes include:

• Simpler, cleaner HTML output
• Reduced output file size by using HTML file compression
• Wider email client compatibility, including reduced Gmail clipping
• Faster design rendering

The changes will not influence your already saved and running templates or campaigns. New compact HTML 3.0 will be applied only to newly opened and saved or newly created email templates.

You should not need to take any action. However, be aware that the HTML structure will change and make sure your email templates render correctly before saving. If you have any issues, you can switch back to the legacy HTML output under Settings and report the problems to our support.

HTML output

In version 3.0, BEE has moved from a DIV element-based fluid hybrid design to a more standard table layout. This minimizes the number of conditional comments and CSS media queries. As a result, HTML files are smaller and more efficiently coded.

Summary of Key Changes:

• Migration from <div> to <table> formatted codebase
• Most Content Blocks have been re-coded for conciseness
• Final HTML code is now compressed to remove whitespace between tags
• Transparent dividers are now automatically converted into padding

For more details read through the official BEE documentation.

HTML builder

The HTML builder allows you to create an email template by writing HTML and CSS code. There are 3 modes available for editing your email temples:

• Code
• Edit
• View

You can switch between these modes by clicking on the respective buttons located at the top-right of the email template editor.

Upload images and files

Images and other files are handled via our File management within the Asset Manager. You can access your stored files in the Asset manager by using the (+) asset picker button that is present at the bottom of the campaign editor or action node modal. Then, you can insert the file by either Copy HTML or Copy URL.

Read more about inserting files into your email campaign.

In case you are uploading HTML templates that were created outside Bloomreach Engagement, they can contain relative paths to files, for example, . Use the action "Replace relative paths" to automatically replace the relative paths with the public URLs. For details, review the Replacing image relative paths section.

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

You can also 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>

There is no possibility to have bold, italic, or other special formatting and no HTML/CSS code in the subject line in the Visual Builder.

🚧

Formatting the subject line

Please bear in mind that you cannot use bold, italics, other special formatting, or HTML/CSS code in the subject line in the Visual Builder.

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.

To generate the Jinja code snippets, access the Personalization pane. For more information about Jinja, review Using Jinja.

Personalization tags

You can personalize emails through visual tags that serve as placeholders for dynamic content that can be customized based on various criteria. To find them in the visual editor, locate the contextual menu by clicking on the desired text element in your email. These tags include customer attributes, event properties, metrics, and other blocks or snippets.

Default names come with tags, but for better understanding, it's recommended to name the tags clearly. To update a tag, remove the old one and choose a new one. This keeps your email content up-to-date.

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, the copies will not be updated if the default template is changed. Learn more about how to use multiple languages.

Save as new

The "Save as new" function enables saving the new changes to the current email as a new email rather than overwriting the original version. If there are any dependencies, the system will reference them.

Saving a new copy of an email campaign will create a completely new email with a new campaign ID. Once you save the email as new, you will be automatically moved to the version of the email where you can continue making changes.

This function is especially helpful when creating multiple emails with slight changes in the copywriting or design.

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 HTML blocks.

Product carousel

Bloomreach Engagement does not support editing the head section in visual builder. However, if you wish to add Product carousel to your email, prepare a template in visual editor, then export it as HTML. Paste the exported HTML into HTML editor and add the annotations code.

When testing, use [email protected], read more on that Google style guide. Initially, the email needs to promotions tab. So in case they are landing in inbox directly, annotations will not work. If you are using a [email protected] account this is the intended behaviour for the first email. Please drag the email into the Promotions tab, and send an email from the same sender address, with a different subject line, to the testing account. You should now be able to visualize it.

It is not possible to add JSON code within Bloomreach campaign builder without having to convert to HTML either. Due to security reasons, the code is immediately removed when saving the campaign.