Template editor
The Template editor is the building area where you define the structure and content for messages. Depending on the content type chosen when creating a message, you can build a message in the following ways:
-
HTML and Plain text — Creates HTML content via a visual editor where you can manage all different the sections of the message, such as its header, body, footer, etc. for emails, as well as a Plain text option. HTML allows for greater control over the style of the message; most modern email applications should be able to interpret HTML emails.
-
HTML only — Creates HTML content via a visual editor where you can manage all different the sections of the message, such as its header, body, footer, etc. HTML allows for greater control over the style of the content; most modern email applications should be able to interpret HTML emails.
-
Plain text only — No styling or formatting, just text. Plain text is the most portable format and should be viewable by any content viewer.
-
Source HTML — Edit the message content as raw HTML, letting you freely set the style properties as well as the content.
Subject
This is required to fill the email subject field. You can use variables as part of the subject, which is replaced by values from the record when creating an email.
Variables
Variables are placeholders for information store in fields of Experience Cloud or from the invitation file records. When the message is rendered, variables are replaced by an a specific value relevant to that message. Variables can be used anywhere in an email, including in the email subject or in the sender’s name in the From field. They can also be added through any of the views of the editor, even in plain text. For example, the recipient's name or the location where a transaction took place can be included in an email through a variable. When the Distribution setting combines an email with record data, the variable is replaced by an a specific value that's relevant to that email.
$FIRSTNAME$- The recipient's first name.
$COMPANY_NAME$- The company's name.
$EXPIRATIONDATE_PRETTY$- The expiration date for the survey, presented in a readable format, for example April 23, 2018 at 10:32 AM. Note that date is already auto-translated and cannot be manually updated in Translations.
$SECURE_SURVEY_URL$- The link that directs the survey taker to a personalized survey. When previewing emails, it is replaced by https://example.com.
$OPT_OUT_URL$- The link address for recipients to unsubscribe from the mailing list and no longer receive emails. When previewing emails, it is replaced by https://example.com. For more information, see Opt-outs.Important: Invitees opting out of surveys must manually confirm that they want to opt-out of future surveys. This prevents email link scanners from automatically opting them out when email templates are scanned. Note that the Unsubscribe feature is not affected.
$TRACK_INVITE_EMAIL_OPEN$-
This is used for tracking invitation open rates. It adds an
<img>tag and properties that loads a hidden 1x1 (pixel) image to HTML surveys. When this image is loaded in the client email browser, the Survey engine populates the Invitation opened with System fields. $SURVEY_EXTERNAL_ID$- Survey ID used in support emails.
$SURVEY_URL$ (link to take the survey prepared for the survey taker) and $SURVER_URL$ (complete link to the survey prepared for the survey taker, including access code and any known language preference information) as they are not secure.- Event field variables
-
Data retrieved from Event fields. For example, survey takers' loyalty status, or the location customers visited.
- Unit data type field variables
- Data about units. For example, the the store address or the sub-brand name.
- Email utility variables
- General helpful variables to use in emails. This includes links to the survey, links to opt-out, and email trackers to know when the email has been opened.
- Calculated field variables
-
Calculations based on data fields. For example, the total money spent by a customer including all extra services.
- Formula field variables
- Data stored in K-fields.
To use variables that are not available in those categories, create a new field via Program fields.
$ sign be treated as a variable, escape it using \$. Even if the preview canvas renders it as \$, the actual email displays it as $.$IMG_SOME_FILE$ as it is not guaranteed that the URL works unless hosted in Experience Cloud. Sync text with HTML template
When selecting HTML and Plain text content type, the content edited in the Plain text tab is independent of the content in the HTML tab: changes to one tab do not impact the other unless you select Sync Text with HTML Template.
Preview canvas
While editing the content of an email, the Preview canvas displays an approximate version of the email when sent. It is updated in real time as you make changes, and shows variable names as placeholders for their values. The Preview canvas has two modes, desktop and mobile to simulate the different sized screens. Click Desktop and Mobile icons to switch between these views and verify that the design remains responsive.
HTML editor
The HTML editor is a available when choosing email's content type HTML only or HTML and Plain text. It is divided into several sections, each displaying the content and settings that belong to a distinct section of the email, with suggested content based on best practices. You can edit this content or rewrite it entirely.
The Introduction, Signature, and Footer sections have a visual editor (also known as rich text editor) to configure basic font settings (font family, size, color), format text (bold, italics, underline), text alignment options, lists, bullets, images, links, and variables.
The Call-to-action and Signature sections are only available in Invitation and Reminder emails.
Header
-
Drop or browse a file from your local device.
-
Add an Alternative text that describes the image. This helps complying with accessibility requirements.Note: The recommended size for the header image is 600 x 150 px. Header supports JPG, GIF, and PNG file formats and file size can be up to 2 MB. For more information, see Logos.
Introduction
The template body. Mainly made up of text, may also include images, links, and variables. To insert any of those:
-
Place the cursor where you want to place the image, link or variable.
-
Click either
image,
link, or
variable on the section's menu:
-
For images, choose an image from your local device. The image must already be adjusted to the desired size, as the Email editor can only use it in its original size.
Note: Images must be:-
600 x 150 px
-
JPG, GIF, or PNG formats.
-
Up to 2 MB size.
-
-
For links, enter the link title (that is, the text to display), the URL address and, optionally, select Open in a new tab to open the URL in a new browser tab.
-
For variables, select a variable by using the filters on the right to see all existing variables or write the variable name on the search bar to select a specific one. For more information, see Variables.
-
Call-to-action
The call-to-action message can be:
-
Quick Start — Shows the first question of the survey embedded directly in the email. You can customize how the question, labels and numbers look like, by setting their fonts and color to match your branding needs. Click Show preview to render the question on the email preview canvas.
Restriction: To use Quick Start, email Content type must be HTML & Plain text. For more information, see Create and manage messages. -
A button — Takes the recipient to the survey using a link (
$SECURE_SURVEY_URL$). Button text, fonts, and colors are customizable to match your branding needs.
Signature
Mainly made up of text, may also include lists, images, and links.
Footer
Mainly made up of text, may also include lists, images, and links.
Plain text editor
The Plain text editor is available when choosing email's content type Plain text only or HTML and Plain text. Click variable to use include variables that insert values when the message is rendered.
Note that when having both HTML template and Plain text tabs, the content edited in the Plain text tab is independent of the content in the HTML template tab: changes to one tab do not impact the other unless you select Sync Text with HTML Template.
Source HTML editor
While the HTML editor allows for changing the content in a template, but only superficial aspects of the format, Source HTML is where you have full control over the format and arrangement of the template in addition to the content. Source HTML is the only option Medallia Admin Suite to edit templates built in previous versions of Experience Cloud.
To use the Source HTML, follow these steps:
-
On the HTML Template and/or Plain text tabs menu, click Switch to source HTML Editor.
The editor then shows the entire email as HTML, including all of the inline CSS that the base template sets by default. This HTML code includes any changes you have already done through the HTML editor.
-
Create or remove sections, modify the inline CSS to change the style, etc.
Important: Each<p>tag is treated as a formatting unit that, when edited in the Email translation editor, affects ever element wrapped in it.Additionally, exceeding 32,767 characters causes errors when translating the email template by downloading and uploading it using an Excel file.
-
Optionally, insert an image:
-
Click
image on the tab's menu.
-
Select Upload a new image or one of the images that have already been uploaded.
-
Select an image file from your local device. The image must already be adjusted to the desired size, as email can only use it in its original size.
Note: Images must be:-
600 x 150 px
-
JPG, GIF, or PNG formats.
-
Up to 2 MB size.
-
-
The image is uploaded and a variable is created for it. For example, if the image name is my_image.jpg, its reference becomes
$my_image$. -
Add an img HTML element and set its src to the image reference such as
<td><img border="0" alt="Acme Co" src="$my_image$"/></td>. -
To check that your HTML code renders as expected in the preview, click Update.
-
HTML best practices on messages
To ensure that the HTML content is compatible with most email clients, be sure to follow these best practices:
-
Avoid the use of
<div>entirely. Use<table>for layout, nesting tables as needed. -
Use HTML tags and attributes for setting things like font, color, etc. over CSS.
-
When using CSS, set it through the
“style”attribute rather than defining CSS classes. -
Prefer explicit CSS declarations rather than shorthand notations.
-
Target a max width of 600 pixels.
-
Assume images are blocked by the email client. The design should be engaging even when that happens.
-
Use web-safe fonts to make sure the email is readable. Web-safe fonts re guaranteed to be available natively and supported by most email clients. To use a font that might not be natively available in the survey taker's device, see Fonts.
-
The link to the survey should stand out in some way, as many users won't take the time to read through the text of the email.
-
Mobile "hit" areas should target being no smaller than 48x48 pixels in size (an average thumb size).
-
Use
@mediaqueries to increase the size of the text on small screens (target 14-16 pixel font size) and manage responsive layouts (if used). -
Verify you can CAN-SPAM and other legal requirements.
-
Escape all special characters (non-English-related) as HTML entities –– for example, © should be
©;$should be\$. -
Consider using a “pretext header” summary for email clients.
-
Choose your spacing techniques based on the design need and avoid reliance on CSS as much as possible.
-
Add comments explaining your thought process. Email HTML is difficult to maintain, and it is probably off when you have to change the email in the future.
-
Validate that the HTML is compliant with accessibility standards (ADA and WCAG 2.0) by using achecker.ca/checker.
Preview templates
Preview runs a quick test on the templates before sending them to actual recipients. To test a template:
-
From the Template editor, click Send preview. Otherwise, navigate to Distributions screen to either:
- Hover over the template you want to send and click Preview.
- Click Preview on the details pane.
- Click Preview on the details pane menu.
-
Enter an email address to send an email.
-
Optionally, open the Advanced settings and select a specific Record ID (Survey ID) to pull data from. This data is shown on the variables of the email. If no ID is provided, the variable names are left in the preview template without being replaced, and Quick Start does not show up.
-
Click Send.
-
Open the email and verify that the content client displays it correctly.
When previewing templates, note that:
-
Fields that contain sensitive data (such as first name, last name) are masked with asterisks (not junked) if the record is from an actual person. While you see asterisks in the template, the email itself shows the information. For more information, see Sensitive data.
-
$SECURE_SURVEY_URL$is replaced by https://example.com. -
$OPT_OUT_URL$is replaced by https://example.com.
