Channels menu > Email Campaigns > Create custom HTML email

With our new Content Editor we target users who create their own HTML campaigns, or who work with a design agency. With the new editor you can fine-tune all aspects of your campaign, including the HTML code. Unlike WYSIWYG editors, you are in full control over the HTML code, the editor does not alter it in any way.

To start content creation, click Create custom HTML email on the Email Campaigns page.

Create custom HTML email

Note: This page describes the functionality of the new Content editor. To switch to the old editor, click the three dots in the top right corner and click Switch back to the old editor.

switch-to-old-editor

This editor is designed as a wizard, to guide you through the email creation workflow. You can navigate through the steps via the controls at the bottom of the page:

html-creation-wizard

This page describes the Content Creation step of the wizard; the other steps have the same functionality as for template-based emails.

The first step of the wizard is to determine the initial settings of your campaign, out of which the Email name and the Language fields are mandatory, while the Email category and the Recipient source fields can be added later. When the mandatory fields are saved, you can click Next Step at the bottom left, which takes you to the editor. Here you are presented with two panes: the Content Editor on the left and the Live Preview on the right.

Content Editor pane

In the Content Creation step you have several tabs to use for creating the content of your email campaign. The tabs in the Content Editor are the following:

Email Basics

Custom HTML editor content settings

Note: Use the double arrow icon at the bottom of the tabs to show labels of each content creation step.

In the first tab of the content editor you can define the Email Basics. This is the area where you make your initial mandatory and optional email settings.

The mandatory items are the Subject line, the From (name) and the From (email address). Use the Personalization and Conditional Text icons to make your email content as taylor-made as possible. For more information, see Personalizing Content

Note: We strongly advise to use Emarsys’ reply mail management system in the From (email address) field, where you can select the email address from the drop-down list. This ensures that reply mails arrive where you want them to. For more information see the Reply Management section.

Within the Advanced options part you can define the Preheader of your email. This is the part of your content that comes right after the sender and the subject line and it creates the opportunity to summarize your email content.

Custom HTML editor preheader

Check the Insert “Unsubscribe” link and the Insert “Show online version” link check-boxes as required.

Note: We strongly advise using these options as in many countries it is illegal to send marketing emails without an “Unsubscribe” link and ESPs often block emails that don’t have an “online version” reference in them.

To continue work on the source HTML, click Continue to Source.

Source

The Source tab allows you to work with your HTML source code. You can copy a previous campaign or copy the code from any 3rd party tool, e.g. Dreamweaver. You can also start from scratch. For more information on creating quality HTML content, please see our Guidelines for HTML Email.

Custom HTML editor overview

Your content appears on the Preview pane on the right. This pane reflects the online version of your content. Changes to the code are immediately reflected in the live pane, so that you can see at once if something goes wrong. You can hide the Preview with the arrow on the view separator.

Note: If you created different versions of the email in the Versions tab, there is a drop-down menu available for selecting the version you would like to work on.

Use the Toolbox section if you need advanced features, such as Personalization, Conditional Text, Media DB and Insert Link.

Custom HTML editor toolbox

For more information on the content and use of the Media Database, see The Media Database.

In the Insert link pop-up you can insert an underlying link to previously selected or manually entered text. You can add personalization to the text as well. In the drop-down menu of link destinations you can select “http://”, “https://”, “mailto:” or “ftp://” as required. After typing a URL, the URL-checker feature checks its validity and indicates the result.

Note: If you need links for landing pages and forms, you have to switch back to the old content creation for now.

Custom HTML editor add link

Note: All links added here are trackable, i.e. each click on the link is counted and displayed in the email analysis. You can add as many trackable links as you want to your email.

For your convenience you can use the Wrap lines switch and the Find and replace option in the Toolbox. When your pointer is in the code, the usual keyboard shortcut of Ctrl+F also works.

Note: If you click anywhere in the email on the preview pane, the actual part of the HTML code is highlighted in the source, so that making changes on the fly is easier.

Text version

To switch between HTML and Text versions, use the appropriate option in the upper right corner. If you wish to create the text version automatically, click Generate text.

Custom HTML editor generate text

Note: Although the text version may seem outdated, surveys show that customers like the format. In addition, several Email Service Providers classify marketing-related emails without text versions as spam. Therefore, sending of emails without text versions is not allowed.

When your basic HTML content is finalized, you can move on to fine-tuning of the content with defining Fallback Text, Links and Versions.

Fallback Text

Use this space to enter your fallback text in case some values are missing from a given contact’s data in the contact database.

For example: If the “Hi $FirstName$” personalization cannot be created because the “FirstName” field of a contact is empty, “all” could be the fallback text for this variable, with “Hi all” as an output.

Custom HTML editor fallback text

Note: Fallback texts apply only to the personalization variables, since these refer only to the given campaign. Conditional rules, on the other hand, have global effect and they refer to all campaigns.

Link Overview

On this tab you can check the health of all the links in your email message. The summary of the links’ health appears in the upper right corner. The status of the links can be Available (valid and working), Non-checkable (their validity cannot be determined) or Not available (invalid or wrong link).

Custom HTML editor link overview

Click on each category to select all the occurrences of a category and click the Edit sign to modify a given URL. Use the drop-down menu for the link destination to select as required from the following:

  • http://
  • https://
  • mailto:
  • ftp://
  • Online version
  • Unsubscribe

When you have finished editing, click the check box to approve the link.

Custom HTML editor open link in new window

To check the destination of your link, click Open link in new window.

Custom HTML editor uncheckable link

“Mailto:” links are non-checkable, since their validity cannot be determined.

Custom HTML editor unavailable link

When Not available links are selected and edited, the status of the link changes to Available as soon as the address is checked and available.

Link Tracking

The Link Tracking tab lists all the links in the source. Link Tracking means that each click by the contacts on the link is counted and used in the analysis.

You can manually select and edit the required links and set whether they should be tracked or not, give a unique name to them used in the reports, and assign a link category to them (for analysis and segmentation purposes).

For quick modification, you have the bulk editing function:

html-editor-bulk-link-selection

You can also filter your selection by entering all or part of the link name. Your bulk editing will apply to all the links in your selection.

Custom HTML editor edit links

Note: Link tracking in the new Content Editor is more flexible than before, since the tracking parameters are no longer visible and the setting of tracking is possible until the emails are sent out, i.e. you can switch on and off link tracking as many times as you want (this was not always possible earlier).

When you have finished editing, click Apply changes.

Versions

In this tab you have the option to create different versions of the email content for A/B testing.

Custom HTML editor creating versions

You can copy an existing version, or Create a Blank Version. Click the edit-icon to open the version in the Live Preview. You can also open a version for editing in the Source tab.

Click the name of a given version to edit its name. Please note that you cannot delete the original (master) version of the email.

Note: An email campaign that has been already launched cannot be edited. If needed, you can launch a similar campaign by simply copying the content of any campaign (this automatically creates a new campaign), and then tune its data as required. Copying can be done in the Email campaigns overview page, click Copy on the right side of the line.

Custom HTML editor copying email campaign content

For more information on creating versions, see Creating Versions.

Live Preview pane

The Live Preview pane of the content editor reflects the online version of your email. Apart from this the following three options are available:

Full Preview

To see your inbox-like version of your email in HTML, mobile and text versions, click Full Preview. In this view all information is visible that cannot be seen in the live Preview pane. Personalizations are shown with a default value. Please contact Emarsys Technical Support if you wish to modify the default personalization value.

Custom HTML editor full preview

Testmail

To test your mail before launching your campaign, click Testmail.

Custom HTML editor send test email

Here you can Personalize the subject line as well as determine the Recipient source, either a Contact list or a Segment. Please note that the maximum number of contacts you can send the testmail to is 50.
Note: It is not possible to send separate HTML and text versions as test mails, if you need this functionality, please switch back to the old custom HTML editor.

Desktop or Mobile view

To change the view of your email, switch between the Desktop or Mobile preview. In the Mobile preview you have the option to change between Landscape and Portrait mode.

Custom HTML editor preview landscape or portrait

Note: Personalization and conditional texts appear only as placeholders in the Live Preview pane. For example, $First Name$ appears in the Preview pane for a “First Name” personalization. Their values will be applied in the final email.

When content creation is finished, the next step is Inbox Preview, where you can test how your email looks like in different inbox environments, while the final step is to schedule the launch of your campaign on the Scheduling page. For more information, see Inbox Preview and Scheduling and Launching Emails.