Overview

The Email Editor tool is a feature available when building an email message in CleverTap. It lets you add content to pre-built templates or customize and build your templates. After creating an email template, you can use it in the current campaign or save it for future campaigns.

From the What section in the Email builder, click Go to Editor.

The Email Editor tool displays.

Template Types

You can choose from the following template options:

• Basic Templates: You can choose from pre-built or empty templates available from this tab. You can also import your custom template as a ZIP package containing a single HTML file and the referenced image assets. You can upload the templates from the following locations:
  • Email Editor
  • Content Manager Templates
• AMP Templates: You can choose from pre-built Templates, Email with custom HTML & AMP, and
  Email with drag and drop from this tab. For more information, refer to AMP for Email.

Basic Templates

You can choose from the following types of templates:

• Email with rich media: Create a rich message with text and images using the built-in email editor. You can also use the Source mode to type or paste in your HTML code. You can also add personalization by using the @ and {{}} icons. For more information about personalization, refer to Personalize Message.
• Email with drag and drop: Drag and drop elements such as text, images, and buttons to create a beautiful email message. Convert to HTML to add further customization.

Rich Media Template

Create rich messages using rich text and images. There are two ways in which you can create a message.

Using Built-in Editor

To create a message using a built-in editor:

1. Select Email with rich media.
2. Create a template using the Built-in Editor:
   i. Add the text.
   ii. Click the icon to insert images.
   iii. Click the icon to insert links.

Using Source Mode

To create a message using a source mode:

1. Select Email with rich media.
2. Click Source mode and add your HTML content.

🚧

Grammarly Extension

If the Grammarly extension is enabled on your device when creating the Email campaign using Rich Media Editor, it may add unwanted <p> tags to the code in Source mode. To maintain clean code, we recommend disabling Grammarly and refreshing the page before adding content. If content has already been added, disable Grammarly, refresh, and re-add the content.

3. Click the @ and {{}} icon to add personalization. For more information on personalization, refer to Personalize Message.
4. (Optional) Enter the template Name and save your customized template for future use under Saved Templates.

Drag and Drop Template

Learn how to use an Email with drag and drop template. There are many edits you can make to this template. In this step, we will look at three of them: how to change an image, add a new block, and delete an element.

Change an Image

1. Click inside the box of the image you want to change.

2. Click the image.

3. Click the Change Image button. The File manager displays.
4. Select an image from the gallery or upload a custom image.

5. Click Insert. Your new image will appear in the selected box.

Add a New Text Block

1. Under the Content tab, find Text.

2. Drag the Text icon to the desired location.

Now you have a new text block.

Similarly, you can also drag other elements, such as Images, Buttons, or Videos, into your template. You can also add personalization by using the @ and {{}} icons. For more information about personalization, refer to Personalize Message.

Delete an Element

1. Click the box of the element you want to delete.

2. Click the trashcan icon.

3. Click Delete.

The element you deleted will no longer appear.

Rows

You can drag and drop, delete, rename, or reorganize your saved rows, right inside the editor.

1. Select the Email with a drag and drop template.
2. Click the ROWS tab.
3. Select the Empty, Default, or Saved Rows from the list. You can also update the Display Condition for the rows.
4. Drag and drop the row to the editor.

Save Rows

To save a row:

1. Double-click the row.
2. Click the icon to save the row for future use.

Delete Rows

1. You can delete saved rows from the editor.
2. Click the ROWS tab in the editor.
3. Select the saved row and click the ellipsis.
4. Click Delete.

Display Condition

Display conditions determine when and under what circumstances certain content is rendered to the recipients.

1. Click the row to which you want to add the display condition.
2. Click Add Condition under the DYNAMIC CONTENT section. The Add display conditions pop-up window appears. The following columns appear.

3. Click Add to add the display condition and its details. Click Cancel to discard the changes.

Mobile View

You can switch between the mobile and desktop views of your message to view and edit content. You can check how the content will display on a mobile phone without going to Previews or sending a test message. Any changes made to the mobile view will be reflected on the desktop view as well. It is a What You See is What You Get (WYSIWYG) editor.

Upload HTML Templates Using ZIP Files

As an alternative to manually copy-pasting HTML to the editor, you can upload a ZIP file containing a single HTML file and associated image assets. To upload a template using a ZIP file, perform the following steps:

1. From the What section of the Email campaigns, select the Upload HTML option from the Basic Templates tab. The Upload HTML Template popup opens.

   

2. Click Upload File or drag and drop to upload the required .zip file. You can download the sample zip file by clicking the Download sample file link. The ZIP file must meet the following criteria:

   
   

   Requirement	Details
   File type	Must be .zip
   HTML file	Only one .html file allowed. It should be present inside the main folder and not in any subfolder. The CSS for the template must be present inside the.html file.
   Images	All image assets must be placed in a folder named images. Ensure all image references within the HTML file point to this folder correctly.
   Supported image formats	JPG, PNG, GIF
   File size	Must be less than 5 MB

3. CleverTap parses the ZIP file:
   • Images are uploaded to the CMS File Manager.
   • The template is saved under Saved Templates and the Templates section of Content Manager.

The .zip file is validated during the upload process. For information about the feature, refer to Upload Validations.

📘

Personalization for Uploaded Templates

If you upload an HTML file with characters like {{}} or @, CleverTap treats them as plain text. To use personalization, you can manually add them during email campaign setup after template upload. For detailed steps, refer to Personalize Message.

Saved Templates

The Saved Templates tab in the email editor enables you to quickly reuse or access the existing templates and maintain consistency in branding across campaigns. Within this tab, you can preview the template before using it. The Saved templates are managed from the Content Manager > Templates > Email page. Updates made in Content Manager are reflected in this tab.

Template Operations

You can perform basic template operations directly from the Saved Templates tab in the email editor during campaign creation. These include:

• Select View: Switch between list and card view for templates.

  

• Filter Templates: Filter templates based on the following criteria: Time Period, Created By, Labels, Editor Type, and Amp Type.

  

• Sort Templates: Sort by template name, created date, and last modified date.

  

• Delete Templates: Deleted templates are permanently removed and cannot be recovered. Select multiple files and click the delete icon. Alternatively, enable Selection Mode to delete templates in bulk.

  

• Search Templates: Search a template by its name.

You can perform the following template operations by navigating to the Content Manager > Templates > Email page: Edit, Clone, Rename, and Add labels. For more information, refer to Content Manager Templates.

Device Preview

Dark Mode

You can preview how your email displays in dark mode on a desktop or a mobile phone.

📘

Note

Dark Mode is only available in the Email with drag and drop editor.

Follow the steps to preview your template in Dark Mode:

1. Select the Email with drag and drop editor.

2. Draft your message.

3. Click the Preview and Test button. The Preview and test window displays. You can preview how the email will look in dark mode by turning the Dark Mode toggle ON.

📘

Dark Mode Preview

Dark Mode support varies across email clients and devices. Test the mails on an email client with dark mode enabled for best results. The Dark Mode preview generates a generic dark mode color scheme when enabled.

Refer to the links below for dark mode email design tips:

• 5 Tips for Dark Mode Email Design
• The Ultimate Guide to Dark Mode for Email Marketers

Inbox Previews with Code Analysis

Inbox Previews with Code Analysis offers you an analysis of your HTML code. It also provides you previews across devices and inboxes before you send out a campaign. The Email Add-On offers you 100 inbox previews a month.

Before we begin, check that you have enabled Inbox Previews. For enabling the Inbox Previews, see Enable Email Previews. Follow the steps to create an email campaign.

1. Select the template.
2. Create your message.
3. Click the Preview and Test button. The Previews and test window displays.
4. Click the Inbox Previews tab.
5. Click the Generate Report button. The display may take some time if you have selected multiple inboxes. We will render the results and send you a notification email to know when the preview is ready.

6. Click Inbox Previews tab to view the preview report. The tests will display email previews across all the selected inboxes. It displays the errors, if any, for each inbox. For selecting inboxes, see Enabling Previews.

7. The Code Analysis tab displays the error type and details. You can sort these errors by severity or property.

📘

Templates for Inbox Preview

Code Analysis with Inbox Preview is available for the Custom HTML template and Rich Media Template.

8. Click the Fix issues in the editor link to fix the issues. You are redirected to the email editor.
   Rerun the preview tests to check that the previews are in order.

Spam Report

A spam report allows you to test your email for deliverability by creating a spam report. The Email Add-On offers you 100 spam reports a month.

Follow the steps to create an email campaign.

1. Select the template.
2. Create your message.
3. Click the Preview and Test button. The Previews and test window displays.
4. Click the Spam Report tab.
5. Click the Generate Report button.