Create a New Email Template

Select the “Email” module by navigating to the "Email Channel" option. Clicking upon the "Email" module will take you to the Email Channel home page, where you can manage and create email campaigns.

Click on the “Create Template” to create specialized email templates for your customers.

The system shall display the page to create a template with the “Template name”, “Subject” and "Project Name" fields. During the creation of the template the “Template name” and “Subject” are the mandatory fields to be provided by the user, and the system will display the error message if the user leaves the fields empty upon clicking on the next button.

To make it easier for users to search and filter content by project name, our application's “Project” feature groups the Nudges and templates belonging to the same department or project by project name. This helps users manage and organize their work more efficiently.

As demonstrated below, the user must select the "Others" tab from the "Configurations" menu to configure the "Project Name."

You can set up the projects as indicated below by selecting "Create New Project."

In the "Configuration" section, as indicated below, the user can view the currently registered project name in addition to having the option to edit or delete it.

The registered project name is displayed in the drop-down for the selection during the template creation and click on the “Next” button

The user is redirected by the system to the template editor page, where they can use the drag-and-drop feature to create eye-catching, personalized email templates. To make the template visually appealing and consistent with its brand, the user can customize it with headings, free text, images, videos, interactive buttons, and social media icons using the editor.

Use of Merge Tags in Email Template:

In the Nudge application, the merge tag is placed in an Email Template by employing the symbol '%' across the merge tag name. The Merge tags are dynamic placeholders used within the application to personalize and customize communication and content delivery. They play a crucial role in enhancing user experience, improving engagement, and streamlining various processes.

The system will automatically get the dynamic value for the added merge tag from the recipient file to the respective merge tags. For example, %RecipientId%.

The system will dynamically fetch the exact data value against your merge tag from the data file that the user provides while creating a nudge. The system will send the nudge according to the merge tag dynamic value present in the CSV file for email nudge.

There are two types of merge tags in the Nudge application which are Standard merge tags and customized merge tags.

Important Note: The user can configure as many merge tags as possible (Standard or Customized) in the Nudge application during the creation of the template and for all the registered merge tags the value is to be maintained in the contact data file.

Standard Merge Tags:

Merge tags are placeholders that can be dynamically replaced with specific user data or content when emails or messages are generated. Here is some standard merge tags commonly used in applications, along with their definitions

%FirstName%: Inserts the user's first name.

Example: "Hello, %FirstName%!" would become "Hello, John!"

To utilize the Standard Merge tag in the email template editor, follow the following steps:

Step-01: Place the cursor in the "Title" block and click on the "Merge tag" option which is highlighted as red in the below image:

The system will open the popup window that contains the list of standard merge tags as shown in the below image when the user clicks on the “MergeTag” option.

Step-02: You can select or search standard merge tags to use them in email templates.

Step-03: Click on any of the merge tags i.e., "Name" to add it to the Title block. The following image depicts how it is shown in the email template editor.

You can create a personalized email nudge template based on the dynamic data that you wish to display in your email campaigns by choosing the merge tag from the list.

Customized Merge Tags:

Customized merge tags allow you to send communications even further by incorporating specific user data or application-specific details. These tags can be created to suit the unique needs of your business or application. The customized merge tags are placed in an Email Template by employing the symbol '%' across the merge tag name. Here are some examples of customized merge tags and their definitions

Customer and Account-Specific Tags:

%customerId%: Inserts the unique ID assigned to a customer.

Example: "Customer ID: %customerId%" would become "Customer ID: 12345ABC." ➡️12345ABC value may come from the contact data file or the ERP systems.

How to use EMAIL TEMPLATE EDITOR?

In this quick start guide, we'll briefly cover all the features inside of the email template editor.  When you open the email template editor, there are two primary sections:

• Stage, which is where you drop content blocks and rows while designing. This is the section on the left side of the screen.
• Sidebar, which is where many of the design elements can be customized. This is the section on the right side of the screen.

To begin designing on the stage, you must select a design element from the sidebar. The sidebar includes three tabs to help you create content

Settings:

The settings tab allows you to set defaults for ­­­your entire design. When working with rows and content, those design elements inherit these settings. 

You can use the settings tab to modify the following options:

• Content area width
• Content area alignment
• Background color
• Content area background color
• Background image
• Default font
• Link color

ROW’s

Rows are the primary structural element for designs created in the email template editor. Within your rows, you can customize the column structure. With a multi-column row, you can place content side-by-side in your design. Most importantly, rows act as a container for all of your content block

The following options populate in the sidebar when working with rows:

• Row background color
• Content area background color
• Content area rounded corners
• Content area border
• Do not stack on mobile
• Reverse stack order on mobile
• Row background image
• Row background video (Pages only)
• Hide on

As mentioned above, rows can include columns as well. As a result, there is a second section called Customize columns. You can use this section to modify the column structure. There is an +Add new button you can use to insert new columns. A separator icon populates between each column. Click and drag the icon to change the column structure.

For each individual column, you have the following options:

Column background color: Allows to apply unique background colors to individual columns within a row. This helps distinguish different content areas, improve readability, and enhance visual appeal.

Padding: Most design elements within the email template editor include padding settings. Default padding features allow you to set the padding around an element for all sides simultaneously. For more granular control, toggle on More options. This allows you to apply padding individually for each side.

Border: Border settings are available in the row settings of any design created in the email template editor. While working with borders, you have the option to do so for all sides, or for each side individually. This gives you flexibility in setting the look and feel of your design.

For any border that you use, you can customize the following values:

• Style (Solid, dotted, or dashed)
• Width (0-30px)
• Color

To toggle between columns, click on the column in the sidebar you want to modify. The selected column is highlighted.

Content:

There are several content blocks you can use while designing in the email template editor. All content blocks include padding settings and hide-on settings in the sidebar. 

Below, we've listed all the available content blocks. C­lick the name below to learn more about the associated type of content block.

Title

The Title content block allows you to set the H1/H2/H3 tag without custom HTML. This enables you to order your design for compliance with web accessibility standards.

How it works?

You can find the title block in the sidebar:

The title content block works much like the paragraph content block. When you drag a title block to the builder stage, you'll see a familiar toolbar:

Note: The title content block is the only type of text that produces header tags.

Paragraph

The Paragraph content block includes various formatting options that you may access from the Content Properties sidebar. The available formatting options are:

• Font family: Choose the typeface used in your content block. Email template editor includes a variety of pre-loaded fonts, and you can also upload your own custom fonts.
• Font size: Adjust the size of your text to improve readability and visual hierarchy within your design.
• Alignment: Set your text alignment to left, center, right, or justified to match your layout preferences.
• Text direction: Choose whether your text flow left-to-right or right-to-left based on your content’s language and reading direction.
• Font weight: You can select between regular and bold font versions. All default fonts include these options; custom fonts require a stylesheet with a bold variation.
• Paragraph spacing: Provides granular control over the carriage return/line break spacing. This option allows you to increase/reduce the space between your paragraphs.
• Line height: To improve readability, adjust the spacing between lines of text. You can choose preset values or enter a custom spacing between 0.5 and 3 in increments of .5.

List

The List block shares all formatting options with the Paragraph block, plus additional features specific to lists, such as:

List type: Choose an ordered or unordered list.

List style type: Basic styling options for lists.

Start list from: Set a custom starting point for ordered lists.

List items spacing: Adjust the spacing between list items.

List items indent: Control the indentation level of subitems within your list.

Image

In this section, we will discuss how Content Properties function for the Image Content Block.

When you insert an image or click on an image already present in the design, the Content Properties area of the builder will display customizable settings in the panel on the right-hand side of the screen. You can edit these image settings based on your design needs.

In the following GIF, the example displays a user adjusting the width of their image within the builder. They do this by toggling off Auto width and using the slider to experiment with the image width to find the perfect size. 

The following list outlines the available Content Properties for an Image Content Block:

• Auto-width: If the image size is bigger than the box, this option is enabled automatically. You can switch it off if you want to resize it. Toggle this setting ON and OFF to automatically fill (ON) or not (OFF) the content area of the image.
• Align: Use this to change the positioning of the image. You can align the image to the text.

• Dynamic image: Toggle this setting ON or OFF to indicate whether your image is dynamic.
• Apply effects: Click on this button to load an image editing tool that allows you to resize the image, apply visual effects, and much more.
• Change image: Click on this button to open the File manager, where you can replace the image with a new one.
• URL: Specifies where the image is saved. You can also paste an external URL to load an image.
• Alternate text: Enter the text that should be displayed when images are turned off. This is a best practice in email design since there are still email clients that have images turned off by default. Adding alternate text also makes your images more accessible. You can use AI within the Email template editor to write alternate for you.
• Image rounded corners: Use this option to round the corners of an image you selected within the builder. You have the option to customize how
• Accessing the Image Editor: When you select an image in the builder, you will see a button labeled "Apply effects & more." Click on this button to access a tool that allows you to edit the image in various ways.
• The editor includes many great features, such as filters, resizing, and cropping tools. You can easily change the image size and add fun stickers. Several predefined filters are available to help you quickly transform the appearance of the image. Additionally, you can edit the image to create rounded corners.

Note: The Image must be in PNG format to have a transparent background.

Button

Nudge Email template editor traditionally uses a set color scheme for any button when you drag a new button content block to the stage. Now you can customize this button! With button styles, you can drag and drop a button that matches your brand at any time.

You can change the background color and text color. To change the colors for your buttons, click on the color icon to the left of the hex code value. This will open the color picker, where you can select Save to confirm the change.

Table

You can customize various settings of the Table content block. In this section, we will explore the different customizable settings and what they enable you to do. 

Header Section: The Table content block includes the option to add headers to the first row of the table. These headers behave as column titles and enable you to associate each column with a category. You can choose to make your table with or without a header row. If you initially create the table with a header, delete it, and then decide to add it back later, any formatting or styles from the original header will be lost. You'll have to start designing the header row from scratch again.

Structure: You’ll have the following options for customizing the structure of your table content block:

Columns: Add or remove columns to the right of your table. The maximum number of columns you can add is eight.

Rows: Add or remove rows to the bottom of the table. There is no maximum number of rows you can add to the bottom of your table.

Background color: Edit your table’s background color.

Border: Customize your border style. You have the option to choose from solid, dotted, and dashed. You can also select a custom border color and size.

Divider

The divider and spacer content blocks can be used to create natural breaks in a design within the Email template editor. In a rendered design, the divider and spacer may look similar, but each content block provides a different set of options in the sidebar. Depending on your use case, you may prefer the divider over the spacer, or vice versa.

The divider content block traditionally uses a physical divider line that you can drag and drop into your design. 

If you prefer to use a divider content block without this line, you can enable the Transparent toggle to remove the physical line.

You also have access to a Width setting, which determines how much of the column containing the line will fill. You can also Align your divider to the left, center, or right.

The divider content block also includes padding options. Divider padding works the same as it does for most other content blocks. Keep in mind that the maximum padding value on any given side is 60px, which limits the amount of empty space you can create with a divider.

Spacer

The spacer content block acts much like a transparent divider in that it simply creates blank space in your design. As a result, the only setting that the spacer has in the sidebar is Height, which allows you more granular control over the empty space you are creating.

There is no limit to the height that you can assign to your spacer. The spacer block is useful if you know exactly how much empty space you need to create in your design, particularly if you are working with background images or image content blocks that don't use the same aspect ratio. 

Social

The Social content block allows designers to easily link their social media profiles to designs created in Email template editor. It can also be used to add social share buttons to a design. This content block is designed to be functional from the moment you sign up for a Email template editor account. It includes several collections to choose from and the option to add custom icons.

If you have worked with icons in Email template editor, then the Social content block might feel familiar. Both content blocks include the option to Configure icon collection in the sidebar. However, the Social block comes with several pre-defined icon collections.

By default, the Social content block shows icons for the following social media platforms:

• Facebook
• X 
• LinkedIn
• Instagram

Use the Select icon collection dropdown menu to browse and select an available icon collection.

Each icon includes a Url field and a Delete option. To change the order of the icons, click and drag using four horizontal lines in the upper left-hand corner of the icon options.

For additional options, toggle on More options for any social icon. This expands the options to define a Title and Alt text. Titles appear when a recipient hovers over the icon, whereas the alt text displays if the image fails to load.

The Social block in the Page builder also includes a Target dropdown field. Use this to determine whether the link will open in the current or a new page.

This option is not present in the email builder because many email clients have their own applications. As a result, URLs for social icons in the email builder always open a new page. 

To add more social media icons, scroll down in the sidebar and click the button to Add new icon. You will find a list of options that match your selected icon collection. If you can't find the platform that you're looking for, there is also an option to add a custom icon.

HTML

The Custom HTML content block allows you to easily add your own HTML code to a design created in the Email template editor builder. It’s as simple to use as a text block.

HTML experts only: Using your own code may affect how the design is rendered. This could prevent it from adjusting to the screen size (i.e. the "responsiveness" of the design). Make sure to use HTML that is email-compliant and responsive. Keep in mind that custom HTML is often outside of our scope of support.

To add your code just drag an HTML content element into your design. It works much like other content blocks, so you can place it anywhere in your design

The newly inserted content block will show some placeholder text. Click on it and the right-side property panel will display the HTML code editing pane. You will find some placeholder code inside the editing area

Paste your own HTML code or write it directly in the editing area. The system will highlight your syntax and indent your code to make it more readable.

Email template editor and most email clients allow only a restricted set of attributes for safety and compatibility. Below are the most important and supported attributes for common tags:

General Attributes (Applicable to Most Tags)

• style
• id
• class
• title

Anchor <a>

• href – Link URL
• name – Anchor name
• target – Where to open the link (e.g., _blank)

Image <img>

• src – Image source URL
• alt – Alternative text
• width – Image width
• height – Image height
• align – Alignment
• border – Image border
• hspace, vspace – Horizontal/vertical spacing

Table <table>

• align – Alignment of table
• bgcolor – Background color
• border – Border thickness
• cellpadding – Space inside each cell
• cellspacing – Space between cells
• width – Table width

Table Sections & Cells (<thead>, <tbody>, <tr>, <td>, <th>)

• align – Horizontal alignment
• valign – Vertical alignment
• bgcolor – Background color
• colspan – Merge columns
• rowspan – Merge rows
• height, width – Cell size

List Item <li>

• type – List style type

Notes:

• Use inline styles (e.g., style="font-family: Arial;") for best support.
• Avoid using JavaScript, <style>, or modern layout methods (e.g., Flexbox, Grid).
• Always test your email in multiple clients (e.g., Outlook, Gmail, Apple Mail).

Video

The video content block allows you to share your video content in an easy way in your emails. You only need to copy and paste the URL of your video from YouTube or Vimeo. Email template editor will do the rest: it will grab the cover image for the video, overlay a play icon on top of it, and link it to the video content.

The Content properties section will ask you to provide a video URL from YouTube or Vimeo. These are the popular video hosting services that we currently support.

Email template editor is compatible with the following privacy settings:

• Youtube - Public and Unlisted
• Vimeo - Public, Unlisted

The builder supports the following aspect ratios for videos:

• 4:3 and 16:9 (standard video formats)
• 9:16 (YouTube shorts format)
• 21:9 and 9:21 (CinemaScope formats)

Icons

In order to get started, drag an icon content block into a row. A filler image will fill the content block; click on this to open the icon options in the sidebar.

Click on Add new icon to get started. A pre-loaded icon will populate on the builder stage. 

This content block works much like social icons; you can use the pre-loaded icon, or you can change the image by using the Change image button. This will open the file manager. You also have access to the image editor, if you use the Apply effects & more button. 

If you use the toggle to open More options, you'll find a couple of options specific to icon content blocks.

If you type in the Icon text field, an additional field will populate in the sidebar.

The text position dropdown allows you to change whether your text will populate above, below, or on either side of the icon image.  If you have multiple icons, you can click and drag them to re-order your icons. Select the icon in the upper lefthand corner of the icon properties box to drag it elsewhere.

Settings specific to icons include icon size, to make your image icons larger and smaller, as well as icon spacing, which allows you to determine how much spacing exists between the individual content blocks. The other properties (padding, border, alignment, letter spacing, text formatting options, and hide on mobile/desktop) apply to the content block as a whole. 

Menu

Are you trying to create a flexible menu for the content you're designing in Email template editor? Look no further! We've just introduced a menu content block that makes it easier than ever to create a text-based navigation menu for your design.

You no longer must worry about column constraints, text size, or making sure your padding is just right. Your menu will look perfect on all devices and in all email clients. You will also be able to create a mobile-optimized menu without duplicating your content. So how does it work? Let's take a look.

Adding a menu: Begin by dragging and dropping a menu content block onto the builder stage. An empty menu block will populate with a placeholder image.

Once you have your menu content block, you'll find some settings in the sidebar. Some of these options are familiar, while others are specific to this type of content. Let's start by clicking on Add new item.

Once you begin adding items to your menu, you'll have a couple of options. Text is what you'll see written in your menu, and you can set the text hyperlink through the Url field. The text you input into the Title field will populate if you hover over that option on the builder stage. 

You can also re-order your menu items by clicking on the icon in the upper left-hand corner of your item settings and dragging it elsewhere.

Designing your menu: Once your menu items are ready to go, you can use the settings in the sidebar to customize your menu. You'll find text options here, and you can even change your menu layout from horizontal to vertical by selecting your preferred option from the dropdown. 

If your menu uses a horizontal layout, you'll also be able to insert a text character that can be used to divide your menu items. The color of your Separator character will match the text color you set above.

You can use the items padding option to apply padding to the individual menu items. 

In the block options below, you'll also be able to apply padding that applies to the menu as a content block.

In the block options below, you'll also be able to apply padding that applies to the menu as a content block.

Sticker & GIF

Add some fun to your emails and landing pages with a GIF animation. It's easy, quick, and free of charge.

All you need to do is drag & drop the GIF or Sticker content block into your design.

A modal will open over the builder stage where you can search the gallery of GIF animations and animated stickers powered by GIPHY.

If you prefer to use your own GIFs, you can upload them through the image content block. Charges may apply. 

Display Conditions:

Display conditions allow you to pick a condition, apply it to a row, and thus show different content based on the recipient.

To add a display condition to your row, select Add condition. This will open a modal over the builder stage.

For example, there could be a row that contains information that will only be shown if the recipient of the email is a customer who has an outstanding bill to pay➡️meaning the display condition is true. You can hide the same content from customers who have already paid their bill or do not have any bill due, meaning the display condition is false.

The condition "does this customer have a bill to pay?" is something your sending platform will have to determine. Email template editor has no way of knowing whether this condition is true or false. In this case, Email template editor allows users of the builder to apply that conditional statement to a row of content so that later➡️at the time of sending the email➡️your sending platform can process the HTML, find the conditional statement, and act on it.

The Before and After fields in the "Add condition" panel are where you’ll insert your conditional syntax. These fields define where the conditional logic starts and ends.

Email template editor supports conditional statements using Scriban, a templating language that allows for advanced logic. You can combine multiple conditions using logical operators such as && (and) or || (or).

If you want to show a row only to users who are active customers and also have a bill due, your Scriban condition might look like this:

{{ if
%RecipientId%  == ‘active’ &&
%BillAmount% >= 0 }}
{{ end }}

In this case, only customers who meet both conditions➡️being active and having a bill due will see the content inside that row.

The name and description fields allow you to clarify what the display condition is used for. You'll refer to this information to preview the results of your display conditions. 

The before and after fields are where you will insert your display conditions syntax. 

Select Add to save your new display conditions. Once it's saved, the display conditions section of the builder sidebar will change to reflect the conditions you've inserted.

The delete button allows you to remove the display condition. You can always Edit the condition if you need to change it.

Mobile design mode

When working inside the builder, you'll see a couple of icons in the upper left-hand corner.

These icons function as a toggle that allows you to switch between a desktop and mobile view. The desktop view will allow you to work with the same builder you already know. If you switch to the mobile view, the builder content area will reduce to 320px. 

When you have the mobile view enabled, you can continue to design using all the same features and options. The only unavailable option is content area width. Keep in mind that the mobile design mode uses a grey backdrop that is not part of your design.

When working in mobile design mode, you can apply changes only to the mobile version of your design. This option is only available for a few design settings. You can identify these options by looking for the mobile indicator in the sidebar. In the example below, you can see this icon next to the alignment option.

How to Save & Activate the Template?

In the application, the user has the below-listed items to act on the templates as shown in the below Image.

• Save & Activate: Clicking on the "Save & Activate" button, the template will be saved and activated by the system, which will also take the user to the template gallery where it will be visible under "Your Category" in the active state.
• Save Template: Clicking on the “Save Template” the system saves the templates.
• Quit Without Saving: Clicking on the " Quit Without Saving” the system quits the template without saving the template.
• Save As Draft:  Clicking on the “Save As Draft” the system saves the template in draft status, which will also take the user to the template gallery where it will be visible under "Your Category" in the draft state.

Click on the drop-down icon at the “Save & Activate” to view the options “Save Template” and “Quit Without Saving” as shown in the above image.

Note: The template is automatically saved if the screen is idle for 30 minutes.

How to Attach Calendar Event?

The “Attach Calendar Event” feature in Nudge allows you to include a downloadable .ics (iCalendar) file within your message. This enables recipients to add an event to their calendar (e.g., Outlook, Google Calendar, Apple Calendar) with a single click, ensuring better engagement and attendance for scheduled activities.

Step 1: Attach Calendar Event: By enabling the check box “Attach Calendar Event,” the events can be sent through the Nudge templates by providing the information of Eventstartdate, Eventenddate, Eventtilte, Eventbody, and Eventlocation merge tags in the CSV file.

Step 2: Click on the “Send a Test Email” button to verify the “add attach calendar” functionality.  

Step 3:  Provide the values to the below merge tags to send the calendar invite to the respective email address. Click on the “Send” button.

Note: The format for the date and time must be MM:DD:YYYY HH:MM:SS

Step 4: The email is triggered to the respective email address with the calendar attachment I.e., .ics file. Click or open the calendar invite.

Step 5: Click on the “Add to Calendar” option, and it will be successfully added to your calendar list.