Campaigns menu -> Email Campaigns -> Create template-based email

The sections pane of the CMS shows all the available section groups in your template. These are listed in the order in which they would appear in the email.

Contents

Managing sections

To create a section, click the plus sign next to the section group name. This will open a row for the section and update the preview pane accordingly.

Managing sections

Each section row has three icons:

  • mobile-sense-desktop / mobile-sense-mobile – this is a toggle switch which defines whether or not the section will be visible on mobile devices. Please note that this is only available if the template is enabled for Mobile Sense.
  • copy-icon – this copies the section.
  • delete-icon – this deletes the section.

In addition, you can re-order sections within a group by clicking the three horizontal lines on the left and dragging the row up or down in the list. Every time you make a change on the left, the dynamic preview on the right will refresh to help you visualize the progress.

Editing sections

To edit the content of a section, click the section row to open the section editor. Here you have a list of options on the left which will display their corresponding editor controls.

Editing sections

Section content can be edited in two modes: Standard and Advanced. Standard Mode is a fast and efficient way of adding content, since the formatting and layout are taken care of by the template. If you want to deviate from the template design, you can switch to Advanced Mode and use the HTML editor to work directly in the HTML code.

Working in Standard Mode

Note: Not every section group will support all these features, and in these cases the content will simply not display in the preview pane. It may also happen that some of the available formatting options in the text fields are not supported by the template either.

Use the double arrows at the bottom of the menu items to open or collapse description of the items.

Working in Standard Mode

  • Header
    The section header is a text-only field and is presented as a WYSIWYG editor with a limited set of formatting options. These are represented by standard icons with tool tips available.
  • Body
    The body of the section is where most of the text will appear. The editor here has all the controls of the Header plus a few more, in particular the Upload content icon.

    Note: Both the Header and the Body editors offer the option to work directly in the HTML source code. In this mode, only a limited array of HTML tags are permitted. Emarsys will strip out all other tags when switching back to WYSIWYG mode, which could lead to inconsistency or even errors in your email code. The following HTML tags are permitted:

    • In the Header:
      <strong>, <b>, <em>, <i>, <u>, <del>, <s>, <strike>, <span>, <font>
    • In the Body text:
      <strong>, <b>, <em>, <i>, <u>, <del>, <s>, <strike>, <span>, <font>, <ul>, <ol>, <li>, <br>, <div>, <p>, <blockquote>, <a>, <img>, <table>, <tbody>, <thead>, <tfoot>, <tr>, <th>, <td>
  • Image
    You can select the section image either from the Media DB, or simply paste in the URL to an image that is hosted on a web resource. If your template is enabled for Mobile Sense, you can also select another image which will display on mobiles devices (otherwise the main image will be resized and displayed).

    • Retina images – Predict users can upload retina images to the Media DB if they need to optimize images for differently scaled mobile devices. Please make sure that you check the Prepared for retina screens checkbox when you upload your image to the Media DB. Retina images will have a duplicate file with @2x postfix before the extension this way. Retina images will be automatically displayed when the system detects devices with bigger resolutions.
  • Link
    The section link is entered here, as well as the options for linking the header and image, and assigning alternative text and a title for the campaign analysis.
  • Registration form
    Here you can add a link to an Emarsys registration form.
  • Section targeting
    By default, all sections are sent to all contacts on the launch list. However, you can  define sections to display only to contacts in a particular segment, or with specific interests.
  • Social networks
    You can add icons to the section to share the section link with a social network
  • Advanced options
    In the Advanced options, you can change the section group (i.e. move the content to another group), flag the section as Draft, in which case it will not appear in the preview and not be sent in the mailing, and switch the editor to Advanced Mode.

Working in Advanced Mode

Click Switch to Advanced Mode to open the section in Advanced Mode.

vcms-advanced-options

Please note that you will lose any unsaved changes when you do this, so make sure to save your work first. Opening a section in Advanced Mode let’s you treat this content as if it were a customer HTML email.

vcms-advanced-mode

In Advanced Mode you have much more flexibility in terms of formatting content, but do you not have all the features available in Standard Mode. You can switch back to Standard Mode at any time, but you will lose all the changes you made while in Advanced Mode.

Email Basics

If you click the Email Basics button, you can provide the sender information and define some additional features. It is also possible to include emojis in the subject line of your template-based email. All you need to do is open the picker within Subject line (emoji-icon) and click the one(s) you want to select.

emoji-vcms-mac

Please note the following:

  • Emojis are only supported with UTF-8 encoding. That means that Emarsys accounts which use the environment www.emarsys.net cannot use emojis, since this environment uses Latin1 encoding. All other accounts, which use environments with URLs of the type suitexx.emarsys.net, support emojis.

  • ALl emojis which are available for selection are supported in emails, even if they are displayed poorly (e.g. displayed as a little square). If an emoji is displayed poorly that has to do with the browser you are using and does not reflect what will appear in the email.

  • The display of the emojis in emails depends on the operating system used by the recipient. This means that if you select an emoji on OS X for example, and the contact opens the email on a device with Windows, the emojis will be displayed as Windows emojis, not OS X ones.

The following shows a situation where an email was sent with an undisplayed OS X emoji and was displayed on a Windows device:

Inbox

hand-emoji-inbox

Opened Email

hand-emoji-opened

The next example illustrates a case where an undispayed Windows emoji was sent to an OS X device where it became displayed:

flag-emoji-windows

Inbox

flag-emoji-inbox

Opened Email

flag-emoji-opened

The final case shows a situation where an OS X emoji string was delivered to a Windows device and it was not displayed properly in the inbox:

numbers-emoji-osx

Inbox

numbers-emoji-inbox

Opened Email

numbers-emoji-opened

A full list of emojis and their representation over different operating systems can be found here.