Designing emails: Build from scratch – Engagement Console

Outbound email node

In the Engagement Console, there are two primary methods for designing emails within the Outbound email node: building from scratch using an email builder with a drag-and-drop interface or using custom HTML code.

Building from scratch is ideal if you want to visually design and edit your email directly in the Engagement Console using a simple drag-and-drop interface. If you already have HTML created in another platform, you can instead use your own HTML code.

In both cases, your email design can be saved as a reusable template across flows by saving the node.

Understanding the Interface

The design panel is organised into several sections: Content, Blocks, Body, Images, and Upload. Each section allows you to add and customise different elements to create a visually appealing and functional email.

To move content or a row, hover over the item to reveal the pan icon. Click and drag the item to its new desired location.

To redo or undo an action, or to preview the email on different screen resolutions, use the icons located above the email design canvas; just beneath the page header.

You can also utilise merge fields to dynamically insert personalised data, such as the recipient's first name, based on the nodes in the flow. This is ideal for personalising emails to increase engagement and relevance.

Once you are satisfied with your email design, click on the Save icon to save your changes.

You need to save the node itself to make sure that the design is saved. Further, you also need to save the Flow to make sure the template is saved.

To delete a content block, select the item on the canvas and click the bin icon to remove it.

Depending on the content block, additional actions may be available. For example, text blocks might include options for bold, italics, and other text formatting features.

Choose your styles

When designing your email in the Engagement Console, the Body settings allow you to customise the overall appearance of your email.

Text Color and Background Color: Adjust the colours to match your brand’s aesthetic.
Content Width: Set the width of the email content, with the default being 500px.
Content Alignment: Align your content to the Centre or Left as per your design preference.
Font Family: Choose from a set list of fonts, with Arial being the default. Note that some fonts may not be supported by all email providers or browsers. If your chosen font isn’t supported, the closest web-safe font is displayed as a fallback.
Font Weight: Select between Regular and Bold font weights.
Preheader Text: Under email settings, you can set the Preheader Text, which is the short summary text that follows the subject line when viewing an email from the inbox. Ensure the preheader text is concise and engaging, typically around 40-50 characters.
Links: Under links, customise the appearance, including their Color and whether they are Underlined.

By configuring these settings, you can ensure that your email design is visually consistent and aligns with your brand identity.

Adding Blocks

Blocks allows the addition of pre-made columns or rows, enabling you to structure your email layout efficiently. Here’s how you can use and customise blocks:

Select a Pre-made Block:
- Choose from a variety of pre-made blocks that best suit your layout needs.
Customise Row and Column Properties:
- Upon selecting a block, you can further customise its properties.
- Under Columns, you can determine the number of columns to include in a row and its layout.
Column Properties:
- Background Colour: Set a specific background colour for each column.
- Padding: Adjust the padding to control the spacing within each column. You can toggle More options to add unique values to each side.
- Border: Customise the border settings for each column. You can toggle More options to add unique values to each side.
  - Border Type
  - Border Colour
  - Border Width
Row Properties:
- Background Colour: Set the overall background colour for the row.
- Content Background Colour: Specify a background colour for the content within the row.
- Background Image: Choose a background image via stock options, upload your own, or provide a URL.
- Padding: Adjust the padding to control the spacing around the row’s content. You can toggle More options to add unique values to each side.
- Responsive Design:
  - Hide on Desktop: Toggle whether a row should be hidden on desktop devices.
  - Mobile Settings: Choose whether the row should be hidden on mobile or if the columns should not stack (stacking is the default behaviour).

Switch between the desktop and mobile tabs to make respective changes for each device type.

Adding Content

Content allows the addition of columns, HTML, and other visual elements such as text, buttons, dividers, and images. Here’s how you can add and customise content in your email:

Similar to blocks, columns can be added with customisable properties.

Heading Types: Choose from H1 to H4.
Color: Customise the text color.
Font Family: Use the global font set in the body or choose a different font.
Font Weight: Set the font weight (regular, bold, etc.).
Font Size: Default size is 14px, but it can be adjusted.
Text Alignment: Align the text to the centre, left, right, or justify.
Line Height: Default is 140%, adjustable.
Container Padding: Adjust the padding around the heading, with a default setting of 10px. Toggle More options for unique padding values for each side.
Hide on Desktop/Mobile: Use the tabs to set visibility options, ensuring the image is displayed or hidden on specific devices.

Similar customisation options as headings.
You will not find smart text on the content panel, but you can select the text and use tools that appear on top of the text.

the Engagement Console supports multiple methods for adding images to your email:

Upload your own: Drag and drop your files into the upload zone or select Upload image.
Previously uploaded images: When you upload an image, we save that file in the Engagement Console. Access previously uploaded images by selecting More images > Uploads.
Image URL: Replace the placeholder image URL with your desired image URL.
Stock Images: Choose from millions of stock images licensed under Creative Commons Zero by selecting More images > Stock images.

Customising option includes:

Auto-Width toggle: Automatically adjusts the width of the image to fit the content area.
Alignment: Set the image alignment to left, right, center, or justify.
Alternate text: Provide alternate text for accessibility.
Under Actions
- Link Settings: Add a URL to make the image clickable.
- Target Settings: Specify how the link should open (e.g., in a new tab).
- Action Options: Choose actions like opening a website, sending an email, or calling a phone number.
Container Padding: Adjust the padding around the image, with a default setting of 10px. Toggle More options for unique padding values for each side.
Hide on Desktop/Mobile: Use the tabs to set visibility options, ensuring the image is displayed or hidden on specific devices.

Outside of the content pane, you can also insert images by Clicking on Upload (Allows importing your own images via upload or URL.) Clicking on Images (Allows choosing images from a library of free-to-use images under Creative Commons Zero.)

Set a link for the button and choose the target.
Select actions such as opening a website, sending an email, or calling a phone number.

Under Button Options:

Text Color: Customise the button text color.
Background Color: Set the button background color.
Auto-Width Toggle: Enable or disable auto-width for the button.
Font Family: Use the global font set in the body or choose a different font.
Font Weight: Set the font weight (regular, bold, etc.).
Font Size: Default size is 14px, but it can be adjusted.
Alignment: Align the button left, right, centre, or justify.

Under Spacing:

Line Height: Default is 120%, adjustable.
Padding: Customise padding with more options toggle for unique values on each side.
Border Settings: Adjust border type (solid, dashed, dotted), color, and width, with more options toggle for custom values.
Rounded Border Size: Default is 4px, adjustable with more options toggle for unique values.

Container Padding: Default is 10px, with options to set unique values for each side.
Visibility: Choose to hide the button on desktop or mobile by switching between the respective tabs

The Divider element helps you create visual separation between sections of your email.

Line Width: Adjust using a slider.
Line Type: Choose between solid, dotted, or dashed lines.
Line Width: Default is 1px, but adjustable.
Line Color: Customise the color of the divider line.
Alignment: Align the divider left, right, centre, or justify.

The HTML element allows you to insert custom HTML code directly into your email.

Custom HTML Code: Enter your custom HTML code in the provided code box.
Container Padding: Default is 10px, with options to set unique values for each side.
Hide on Desktop/Mobile: Use the tabs to set visibility options, ensuring the image is displayed or hidden on specific devices.

The Menu element lets you create navigational menus within your email, providing a structured way for recipients to access different sections or links.

Adding Menu Items:

Click Add a new item to include a new menu item.
Customise each item with text, URL, target, and action (e.g., open website, call, or email).

Customisation Options:

Font Family: Use the global font set in the body or choose a different font.
Font Weight: Adjust the font weight.
Font Size: Customise the size of the menu text.
Text Color: Set the color for menu text.
Link Color: Customise the color of the links.
Alignment: Align the menu items left, right, centre, or justify.
Layout: Choose between a horizontal or vertical layout.
Separator: Add a separator text between menu items.
Padding: Adjust padding with more options toggled on by default.

Container Padding: Default is 10px, with options to set unique values for each side.
Hide on Desktop/Mobile: Use the tabs to set visibility options, ensuring the image is displayed or hidden on specific devices.

Saving Blocks for re-use

Saved blocks allow you to save any block that you create and populate with content for re-use across flows. Here’s how you can save a block:

Select a Block (Row) that you have configured.
Select the 'Save' icon:

Give the block a name, and any tags (optional, tags are used for finding Saved blocks later via search. Multiple tags can be separated by a comma.)

Using Saved Blocks

You can find all of your Saved blocks under the Blocks tab, beneath the layout options.

Sending test emails

Preview your email as it will appear in your inbox to verify its format and content before sending it to recipients. Simply click the Preview icon, then select "Send test email." Keep in mind that merge fields will render empty in the test email, and the email will be sent from a no-reply email address to your logged-in email address.