Email Builder
Last updated
Last updated
The Email Builder is a user-friendly and powerful tool designed to help you create professional, personalized, and effective email templates with ease. Whether you're crafting a marketing campaign or customer communication, the Email Builder allows you to tailor content to each recipient, boosting engagement without needing technical expertise.
For example, an e-commerce business can utilize the Email Builder to craft personalized email campaigns for product recommendations, abandoned cart reminders, and promotional offers. By using dynamic content and attribute mapping, each email can be automatically populated with customer-specific details such as their name, recent purchases, or browsing activity. With automated chatbots, funnels, workflows,connectors and mini apps these emails can be sent at ideal times, maximizing engagement and conversion rates. The simplicity of customization allows marketing teams to swiftly update campaigns without needing technical assistance, enhancing both the efficiency and impact of customer outreach.
Key Features:
Drag-and-drop interface for easy customization.
Attribute mapping for personalized messages.
Customizable content blocks for dynamic and organized layouts.
Loop block feature for dynamic content generation, allowing you to repeat sections based on iteratable data for personalized email content.
Note: You must be connected to any of our email channels, such as SMTP, Sendgrid, Amazon SES etc for sending email.
To create an email template:
First navigate to the Email Builder from the More Menus ->"Email Builder".
Saved Templates
On the left side of the Email Builder, you can view your saved templates.(See the below picture)
You can sort the saved templates by clicking the "Sort" button and search for a specific template by entering keywords in the search saved templates field box.
To preview a template, click the eye icon next to the respective template and to delete click on the “Delete” icon.
To duplicate a template, click on the eye icon against the respective template and click on the "Duplicate this template" button.
You can create a template either from Scratch: Begin with a blank canvas and drag content blocks into it .To create a template from scratch click on the “Create from Scratch” option.(See the below picture)
Use a Pre-Built Template:Choose an existing template and customize it according to your needs.
The Email Builder interface and about all the elements in that are explained below.
After designing your email, click mobile and web preview icon to see how it appears on both desktop and mobile devices.
Once satisfied with the design, click "Save Template" to save your work. You can reuse this template for future campaigns by updating the content as needed.
The Email Builder interface is designed to provide a streamlined and efficient way to create email templates. (See the below picture)
Block Tab
This tab contains all the building blocks needed for your email design. These blocks are categorized into:
Content Blocks: Includes text, image, button, social, spacer, hero, wrapper, and divider blocks for adding dynamic content.(See the Below picture)
Action Blocks: Manages email functionality with loop and unsubscribe blocks.
Layout : Allows you to structure your email using rows and columns.
Email Builder Canvas
The Canvas is where the actual design of the email takes place. Here, you can drag and drop blocks from the left panel to create and organize your email content. This live visual workspace allows you to see how your email will appear to recipients.(See the below picture)
Customization in Email Builder
The Email Builder provides a wide range of configuration options to help you personalize each element of your email. These settings help you create visually appealing and responsive emails that fit your brand and message.Once a block is placed on the canvas, you can configure it using the options on the right panel.When you click on a specific content block, action block, or layout section, the available customization settings will appear on the left side of the interface,allowing you to fully customize content. (See the picture of block configuration below)
Here’s a general overview of the configuration options available for customization:
Padding: Adjust the padding around the text/image/button to control spacing.Padding is the space inside a box or container around the content, like text or images. It keeps the content away from the edges, making it look nicer and easier to read.(See the below picture)
Color:You can customize the text color, background color, and button color across different blocks, ensuring that your emails are not only attractive but also consistent with your brand.
Typography:Typography is essential for creating engaging and readable email content.Here,you can customize various typography settings, such as
Font family
Size
Weight (regular, bold, italics)
Height
Letter spacing (height of a single line)
Line height
Text decoration (underline, strikethrough, etc.)
Alignment (left, center, right)
Extra Class
The "Extra Class" option allows you to add custom CSS classes. This feature enables you to create your own classes to customize the email template, making it more engaging and visually appealing.
Dimensions
It refers to the measurements that determine the size of various elements in your email template, such as images and buttons. Key aspects include width, which indicates how wide an element should be, and height, which defines how tall it should be. Both measurements are typically set in pixels(px) or percentages(%).
Padding creates space inside an element, ensuring that content is not too close to the edges, while margin adds space outside the element, separating it from others. You can also customize the border settings, including the border, border style (such as dotted or solid) and border radius, which rounds the edges of an element. Alignment options (left, center, or right) help position elements effectively.
In social blocks, you can adjust the icons- icon width and icon padding for better presentation. By carefully configuring these dimensions, you can improve the layout and overall user experience of your email templates.
Href
The href attribute is used to specify the URL that an element, such as a link or button, will direct users to when clicked. It stands for "hypertext reference" and is essential for creating functional links within your email content. By entering a valid href, you ensure that recipients can easily navigate to the intended web page, whether it’s a website, social media profile, or landing page.
Additionally, with the target attribute there you can specify the link target as either _self will open the link in the same window, while using _blank will open it in a new tab or window.
The Block Tab serves as the core of your email design, offering essential elements for creating engaging and well-structured emails. It includes Content Blocks for adding text, images, and buttons, Action Blocks for managing key functionalities like loops and unsubscribes, and Layout Blocks for organizing your content with rows and columns.
Text Block
The Text Block is used for adding textual content to your email. This block allows you to include headings, paragraphs, and lists. You can customize the appearance of the text by adjusting the font, size, color, and alignment. It also supports text formatting options like bold, italics, underline, and strike through. This block is essential for delivering your message clearly and effectively.
The additional text configuration is explained below
Text Attributes: You can Switch to HTML mode to edit the text using raw HTML. This allows for advanced customization and detailed control over text styling, which can be particularly useful for developers looking to implement specific design elements.
Attribute Mapping: Insert dynamic attributes like the recipient’s name, location, or organization to personalize your emails. Use the format - {{any value}} to map attributes within the email template.
Personalization-
You can personalize the email by adding {{any_value}}
Example
Dear {{name}} Your billing amount due is {{amount_due}} and here is the payment link {{payment_link}}
After saving the template you will get the option to map these values with relevant attributes and the system will automatically replace these tags with relevant values.
When you add an "Send Email" action step and if the selected email template has attributes to be mapped it will be listed below once you select the email template.
(See the below picture)
Image Block
The Image Block enables you to insert images into your email template. You can upload images from your system or choose from our picky assist’s media gallery. This block allows you to specify the dimensions of the image, such as width and height, ensuring that it fits well within the layout. You can also add alt text for accessibility and link the image to a URL, directing users to a specific web page when clicked.
To upload an image Click the “+” button to upload your image from the media gallery.
(See the below picture)
Button
Button Blocks are interactive elements designed to encourage user actions, such as making a purchase or signing up for a newsletter. These blocks can be customized extensively, allowing you to modify the button's text, color, size, and shape to ensure it stands out in your email. You can set an dynamic href link that directs users to a specific URL when they click the button, effectively guiding them toward your desired action or web page.
Social Block
With the Social Block, you can incorporate social media icons linking to your various profiles, encouraging recipients to connect with your brand on platforms like Facebook, Twitter, and Instagram etc. Customizing the icons' appearance ensures they align with your email's overall design and enhances engagement. Setting an href link for each icon, you direct users to your social media profiles, making it easy for them to follow or interact with your brand online.
The additional social block configuration options are:
Mode:
Vertical and Horizontal Mode: Choose the layout direction for the social icons-either stacked vertically or arranged horizontally.
Social Items:
Icon Content: Each social item (Facebook, Instagram, Twitter, YouTube) comes with a default icon. You can edit the icon content or upload a custom one.
Href: Add the URL for each social media platform.
Add/Duplicate Items: Click the “+” button next to each item to add or duplicate social icons.
Content:Type the name of the social item in the content(eg:Facebook,Youtube) which will be shown in the email template
(See the below picture)
Divider
The Divider Block allows you to insert lines to visually separate sections of your email.It acts as a visual separator, helping to organize your email content effectively. By adjusting its thickness, color, and style, you can create a clean and structured layout, improving readability and ensuring that your email looks polished.
(See the below picture)
Spacer
The Spacer Block is used to create empty space between other content blocks in your email. This helps to improve readability and visual appeal by preventing elements from appearing too close together. You can adjust the height of the spacer to fit your design needs. By strategically placing Spacer Blocks, you can enhance the overall layout and flow of your email, making it more inviting and easier for recipients to read.
Hero Block
The Hero Block is designed to create visually impactful sections with large images, backgrounds, and overlay content. It is a prominent feature that combines a large background image with a headline and a call-to-action button, making it an excellent choice for showcasing new products, promotions, or critical messages. Customizing this block ensures that it captures the recipient's attention immediately.Here's a breakdown of the configuration options:
Mode:
Fluid Height: The block height adjusts based on the content.
Fixed Height: Set a specific height for the block.
Background Src: Set the background image for the hero block.
In the Hero Block, you can add other content blocks such as:
Text: Add headers, paragraphs, or any text.
Image: Insert images to enhance the hero section.
Button: Include clickable buttons for calls to action.
Social: Add social media icons.
Spacer: Insert space between elements.
Divider: Add dividers to separate content within the hero block.
Wrapper Block Configuration
The Wrapper Block is used to group multiple content blocks (excluding hero blocks), action blocks, and layout blocks—providing a well-structured and consistent layout.It keeps related items in one place, so your email appears more professional. The Wrapper Block allows you to control how your email looks and makes it easier for readers to understand your message.
Additional attributes option is explained below Background Repeat: Control whether the background image repeats (options include no-repeat, repeat, repeat-x, repeat-y)
Background Size: Define the size of the background image (e.g., auto, cover, contain).
The Wrapper Block helps to organize your email layout by grouping related content together, giving you more control over the design and overall structure of the email.
Action Blocks in the Email Builder are crucial for creating interactive and compliant email campaigns. They enhance user engagement and ensure that your emails meet necessary guidelines. The available action blocks include:
Unsubscribe Configuration
The Unsubscribe Block is designed to give recipients the option to opt out of future emails. This feature is important for maintaining regulatory standards and helps build trust with your audience. When included in your email template, it allows users to easily unsubscribe if they choose to do so, promoting a positive user experience.
You can modify elements like text color, size, and layout to match your brand’s style by customizing the configuration of the block.
When your email template includes an unsubscribe block,in the Send Email step select the appropriate opt-out list from the dropdown menu in the "Unsubscribe" attribute field. (See the below picture)
Loop Block
The Loop Block is a powerful feature that enables you to create dynamic content in your emails by repeating sections based on specific data.You can add blocks(text,image, etc) as per your requirement into the loop. You can use the Loop Block to show the data you want to be repeated for example you can use this to send product details or user performance data or datas which is in the line items format.
Here’s how you can configure it, along with an example:
Loop Settings:
Loop Limit: Define the maximum number of iterations or repetitions for the loop. For example, you might set this to 5 if you want to display up to 5 product recommendations.
Loop Variable: Specify the variable that will control the loop (e.g., a list of items or user-specific data). For instance, you could use a variable called productRecommendations.
Width of Loop: Set the width of the loop content area to fit your email layout.
Sample Loop Array:
Select Application: Here you have to choose between Connector or Flows.
Select Flow: Choose the specific flow or connector you want to use for the loop. For example, select a flow named "Product Recommendations Flow."
Select Loop Array: Choose the array or dataset from the drop down list which is from the selected connector/flow that will be used to populate the loop. For example, select recommendedProducts which contains a list of product details.
Customization options for this block allow you to modify aspects such as layout, background color, and spacing, creating an organized and visually attractive display. By tailoring the design of each repeated section, you can enhance clarity and engagement, making it easier for recipients to understand the information presented.
Dynamic Attribute Mapping
To dynamically add content in an email template based on your requirement, you need to map attributes correctly. After selecting the application, flow, and respective loop array, click anywhere inside the Loop Block to view the </> (Attribute Mapping) icon.
Clicking this icon will display all available fields/attributes from the data source. From there, you can map attributes like text fields, image fields, and buttons, allowing them to loop based on the data provided.(See the below picture)
You can add multiple Loop Blocks in one email template, allowing you to use data from different sources for each block. This means you can show things like product recommendations from one database and special offers from another, all in the same email. By connecting each Loop Block to its respective data source, you ensure that the information is tailored and relevant to the recipient, enhancing engagement and the overall effectiveness of your email campaign. This flexibility enables you to create rich, personalized experiences without sending multiple emails. You can incorporate line items into your emails using the Loop Block feature. This enables you to dynamically display details from invoices or e-commerce orders.
For example, when a customer orders multiple products, you can loop through each item to create a clear message highlighting the item name, quantity, and price. Instead of a traditional invoice, you can format the information for easy reading on platforms like WhatsApp or SMS.
By using multiple Loop Blocks, you can connect various data sources and send a well-organized summary of the order in one email, improving communication with your customers.
The Layout Section in the Email Builder allows you to organize your content into multiple columns, creating a structured and visually appealing email design. Here’s how to use and customize the layout options:
Layout Options:
2-Column Layout: Divide your email into two vertical sections.
3-Column Layout: Divide your email into three vertical sections.
4-Column Layout: Divide your email into four vertical sections.
To customize the columns, click the arrow next to the chosen layout option (2-column, 3-column, or 4-column). (See the below picture)
Additional layout configuration options include:
Group: Turn this option to "true" or "false" to control how columns appear in mobile view.
When set to "true," the columns will display as per the layout you’ve set.(See the pictures below for an example of a 3-Column Layout view in web and mobile view when group is true )
If set to "false," the columns will stack vertically, one below the other,to ensure a clean and readable layout on smaller screens.(See the below picture)
Background Repeat: Control whether the background image repeats. Options include no-repeat, repeat, repeat-x, and repeat-y.(See the below picture)
Each column can be customized individually to ensure consistency with your overall design. You can set background colors or images, control padding to create space around your content, and adjust borders to enhance the visual separation between sections.
Within each column of the layout, you can add various content blocks like text,button,image,social,divider and spacer to enhance your email design. By customizing the layout and adding content blocks, you can create a flexible, organized, and visually engaging email design.
The Layer Tab in the Email Builder provides a comprehensive view of all the blocks and layouts used in your email template.By utilizing this tab, you can efficiently manage and organize your email design, making it easier to track, adjust, and optimize the layout.
List View: The Layer Tab displays all content blocks, layout sections, and sub-blocks in a list format.Click on any block or layout item in the list to be redirected to that specific block on the canvas. This feature allows for quick navigation and editing(See the below picture)
Rearranging Blocks: Adjust the placement of blocks in the email design by dragging them within the Layer Tab. This helps in organizing the content and ensuring a well-structured email layout.
Right-clicking on a block in the layer provides the following actions:
Move Up: Moves the block just above from the current position in the list, altering its position in the layout.
Move Down: Shifts the block lower from the current position, adjusting its position in the layout.
Copy: Create a duplicate of the selected block.
Delete: Removes the selected block from the email layout.
(See the below picture)
Once you've designed,built and saved your email templates in the Email Builder, you can use them in various automation flows using connectors, workflows,funnels or chatbots and also can be used in mini app.This allows you to seamlessly send personalized emails through different channels.Businesses can send emails to their customers once the email template is designed and saved. The campaign can be automated by sending emails through connected channels. In the “Send Email” step of a workflow, you can select the saved template and map dynamic content such as the recipient’s name or product data.
Additionally, these saved email templates can be embedded as responses in a Mini App, allowing for dynamic and personalized content delivery directly through the app.
To send email templates through a chatbot, funnel, workflow, or connector, follow these steps:
Navigate to the relevant flow or connector where you want to send the email template (connector, workflow, or chatbot).
In the Action steps of your workflow, funnel, chatbot, or connector, select the "Send Email" step
Configure Email Details:-
Choose Email Service: Select the connected email channel from the drop-down menu. Alternatively, you can dynamically map the channel by clicking "Map Channel Dynamically" and mapping the attributes accordingly.(See the below picture)
Set Email Details: Enter the "From Address," "Sender Name," "Reply-To Address," and other relevant fields. Add CC and BCC if needed.
Subject and Preheader: Fill in the subject line and preheader text.
Body Type: Click here and select "HTML Template" from the drop-down menu.Alternatively, you can dynamically map the channel by clicking "Map Channel Dynamically" and mapping the attributes accordingly.
Select or Create a Template:
Choose Template: Select your desired email template from the "Select Template" drop-down menu.
Create Template: Alternatively, click the "Create Template" button to be redirected to the Email Builder where you can design or modify your template.
Map Attributes:
Personalize Content: If your template includes dynamic content (e.g., recipient names or product details), map the necessary attributes to ensure personalized data is included in each email.
6. If an unsubscribe block is included in the template, select it from the "Select Opt-Out" list to include it in the Mini App response.
Once verified, save your workflow, connector, or chatbot.
You can also add email templates as part of Mini App responses, allowing dynamic and personalized templates to be shown directly when users interact with the app.
Open the Mini App builder
Configure the Form Fields with the basic details of the Mini App as needed.Go to the Response tab and click on the HTML option in the Response Settings.
From the drop-down list of saved templates, select the appropriate template to attach to the Mini App response. Alternatively, click "Create Template" to be redirected to the Email Builder for designing or modifying a template.
If the template includes looping or repeating elements, map the relevant attributes to display the correct data.
If an unsubscribe block is included in the template, select it from the "Select Opt-Out" list to include it in the Mini App response.
Save the response. Users interacting with the Mini App will see the selected template as part of their interaction.
