Email Template

To access the Email Template Creator, select the Templates icon from the left sidebar Navigation.

Once inside the Templates section, select the New Template button on the top right side of the main panel of the User Interface.

From the emerging popup window, select the Email option.

475

Another popup window appears with two options, as shown in the next screenshot. Create Blank Template gives the option to define a totally new template, or you can select a template to clone from the list in the table, if there were to be any templates that had been previously created.

The steps to create a new Email Template are the following:

  1. Enter the Name for the template.

  2. Enter the Description for the template.

  3. Add a Template Category.

  • To add Template to a Category, select one from the dropdown list. You may add more than one Category per Template.
  1. Select one of the following options for the Creation of the Email Content:
  • Start from scratch

  • Clone a template

  • Upload HTML file

  1. Depending on the option you choose, select the Next button to continue to the Email Content Configuration.

Start from Scratch

If you are familiar with drag and drop editors, how to setup structure, layout, and content, and the tools commonly found in them, you can use this option to create templates.

  • Select the Start from scratch option to create the email template contents from scratch using our email editor.
  • Select Next.

Once inside the email editor, you will see a canvas and two menus, one in the top that controls the selections of the second menu on the right side of the canvas.

The top menu offers nine different actions that can be selected, as shown below.

Action PositionAction NameDescription
1View ComponentsIt displays the outline of the area that holds each component and their placement inside the canvas.
2Preview EmailAllows to review the rendering of the template as work progresses in its assembly.
3UndoReverse the last action.

Reverse more than one action.
4RedoReverse the last undo.

Reverse more than one action that has been undone.
5Edit in HTML CodeEdit the Email Template in HTML and CSS code.

Each component that is placed into the Email Body will update the HTML and CSS code.
6Open Style ManagerCustomize spacing, positioning, color, font, size, background color, border, and more.
7SettingsSet a title and an identifier Id to each block
8Open Layer ManagerView each component that has been placed into the Email body.

When the user wants to view a specific block in the Open Layer Manager panel, select the desired block and the block that was selected will be marked.
9Content BlocksHelps you to create the Email content’s structure and layout.

Selecting the Content Blocks icon, displays in the second menu the elements that can be dragged and dropped onto the canvas:
Structure : The structure blocks allow you to organize the first hierarchical level of the template.

There are three structure blocks with a self explanatory role in the configuration of the template:

  • Header : Adds a header at the top of the template.
  • Section : Creates sections into the template body.
  • Footer : Add a footer into the template body.

Layout : The Layout allows to define the second level of the hierarchy of the template and can be applied to any of the _Structure _elements.

On the Layout section, four blocks are displayed with different distribution attributes:

  • 1 Section : Creates a single content section into a structure element.
  • ½ Section : Segments a structure element section into two equal parts.
  • ⅓ Section : Segments a structure element section into three equal parts.
  • 3/7 Section : Segments a structure element section into two sections with a ratio o 3/7.

The above allows for different distribution schemes of the email contents.

Basic : Offers different drag and drop components that can added to the template contents.

  • Button: Allows you to place a CTA button within the template. It also includes the options to add a link,
  • Divider: Allows to further divide the layout elements.
  • Text: Simple text entry box.
  • Image: to include image content.
  • Link: To add URLs associated with elements of the content. (See Changing/Adding Links)
  • Link Block: Similar to the above but associated with an entire block container.

Advanced : The Advanced blocks allow you to select other drag and drop elements pre-established blocks iitems.

By clicking on the Advanced section, four advanced blocks are displayed :

  • Text Section: Inserts text content including a title and a following paragraph in the template body.
  • Quote: Inserts a quote styled text content to the template.
  • Grid items : Inserts a pair of vertical combo contents, each consisting of an image and titled text section.
  • List Items : similar to the Grid items, except that contents are horizontally arranged.

Personalize : Create the Email content with personalized fields to each Recipient by using the Personalize Blocks.

By clicking on the Personalized section, you will view the available Fields that are obtained from the Subscriber List Fields.

For example, if the ‘Name’ Field is dropped into the Email, all Emails will be delivered to the Recipients with the Name obtained from the Subscription List Field used.

Unsubscribe : In Email Delivery, Subscribers are allowed to Unsubscribe in order to stop receiving Emails and be added to the Blacklist.

By clicking on the Unsubscribe section, two blocks are displayed:

  • Unsubscribe : Add an Unsubscribe link in the Email body.

    This block will present the option to the Recipient to Unsubscribe and stop receiving emails from the Broadcasts. It has a preset message, that can be easily modified:

📘

NOTE

The following text {UNSUBSCRIBE} contains the link that will be displayed in the delivered Email

  • Footer : add a pre-configured template, which contains the company's registered trademark, company's address, a message for the recipient and Unsubscribe link.

    These fields are obtained from the Company Preferences section of the Platform.

The 'Footer Unsubscribe' block contains the predefined keys [[Company Name]] and [[Company Address]] along with the unsubscribe link:

Open in Browser : Insert a link to the Email message in order for Recipients to open the Email content in their Browsers. This ensures that the full version of the Email is viewable to all readers.

By clicking on the Open in Browser section, one open in browser block is displayed:

  • Open In Browser : Insert a Link into the Email message:

When the Email is received by the Recipient, the Link will be displayed as follows:

If this Link is clicked by the Recipient, it will open the Email content in their device’s Browser.

Clone a Template

If you want to clone an existing Template to use as a base, select the Clone a Template option from the Template information section. It will open the selected Template in the Email Editor where you can make any changes.

Select a Template that you wish to Clone from the Carousel, if available.

If there are no templates available, a message will be displayed that there are no templates available to be cloned.

Once you have selected the desired Template to clone, a preview will be shown under the selected template.

Select the Next button and the Template you have selected will open in the Email Editor.

Upload HTML

If you want to upload an Email HTML file to use to create the Template, select the Upload HTML option from the Template information section.

Drag and Drop or click Browse Files to upload your HTML file in the displayed box.

Once uploaded, a Preview of the HTML file will be rendered and all detected ‘Assets’ (images, videos) will be listed on the left hand side.

For all the Assets detected inside of the HTML file, you will have the option to enter a public URL for the asset location or upload the asset’s file from the local computer.

In this example, a ‘logo’ image with the size of 200 x 36px has been detected to be used inside of the HTML file.

If an image has failed to load from the HTML, the following will be displayed:

In this case, you may enter the public Image URL, or drag and drop the image. Once uploaded, the image preview will be displayed.

Once you have reviewed all detected Assets, click on the Next button where the uploaded HTML will be opened in the Email Editor.

When all desired changes have been made to the Email content in the Email Editor, click on the Save button and a confirmation message will display that the Template has been created.

Changing/Adding Links

It is always better to introduce all the links that are going to be present in the template before uploading the HTML file to the platform. However, on occasions you may find yourself in need to add or change the URL to which a link points to or add a new link.

Changing a links' URL

Inside the canvas area, locate the element with the link that needs the modification. This could be a button, an image, or some text content. In any case, once the element is selected with the pointer, it will show a Link element identifier. In the sample screenshot below, the element with the link that needs changing is Activate your coupon. Notice the Link identifier on the element.

To change the URL of the link,

  1. Select the element with the link.
  2. Select Settings from the top menu (the ⚙ icon).

The secondary menu will display the Component settings

  1. Identify the Href setting entry box.

  1. Enter the URL in it. For example, https://www.example.com.

This completes the modification. You can verify the link by hovering over it, and see if the pointer recognizes it as such.

Adding a new link to a template

Adding a new link requires defining a link element inside a section of the template. For this you must identify the element that is going to be associated with the link. This will vary with the type of element, depending if it is plain text, a new button or an image.

Text link

If the link is going to be associated with an existing text,

  1. Select Settings from the top menu (the ⚙ icon)
  2. Highlight the text that is to become a link by dragging the pointer over it.

A text tool appears with options that can be applied to text, as shown below.

852
  1. Select the link icon.
  2. Enter the URL in the Href field under the Component settings menu.

New Button link

Links associated with new buttons are configured as follows:

  1. Select the Blocks menu.
  2. Select the Basic option.
  3. Drag and drop the Button component in the section where you are placing it inside the template. The button element has a built-in link associated with it.
  4. Select Settings from the top menu
  5. Enter the URL in the Href field.