Templates
The messages sent to survey takers, social media users, and Experience Cloud users
Templates define the content of messages sent to survey takers, social media users and Experience Cloud users for various reasons, including:
- Distributions:
- Invitation.
- Reminder.
- Thank you.
- Auto-reply.
- Alert rules:
- New alert.
- Alert assignment.
- Rapid Response emails:
- Rapid response.
- Social Rapid Response email templates:
- Social rapid response.
- MM3/Voices Emails:
- Forwarding responses and congratulating in Medallia Mobile.
- User Emails screen:
- New user.
- Lost password.
- Lost username.
- Multi-factor authentication code.
Tip: For New user and Lost password emails, be sure to include the$ACCESS_CODE$, $ACCESS_CODE_URL$, or$ACCESS_CODE_SECURE_URL$tag in each template, in each language of each template to ensure the user can retrieve the code to sign in.For Multi-factor authentication, include the
$MFA_CODE$and$MFA_CODE_EXPIRY_DURATION$tags.
Each of the screens above lists the templates available for that area, and each provides controls for creating, updating, and previewing those templates.
For details about specific email types, see:
- Survey emails — Distributions
- Alert emails — Alert rules
- Rapid response emails — Rapid Response emails
- Social Rapid response — Social Rapid Response email templates
- User account notifications — User Emails screen
Creating a template
When dealing with the requirement from a company to build a template, iterate through the following processes.
-
Reduces the likelihood of the message being marked as SPAM.
-
User preferences on some content clients can display plain-text versions.
-
Content-reader applications are more efficient when plain-text is available.
Design
-
Obtain or create a detailed specification of the template:
-
If possible, ask the company to provide the HTML template themselves and establish that the company owns the maintenance of the HTML.
-
Otherwise, the company needs to provide a spec or at least approve one created by the implementation team, based on their verbal or written requirements. An example specification that shows the detail level needed is below:
-
-
Identify what content clients (mobile or desktop) and versions of them must be supported, and which should be supported with a “best effort” SLA (service level agreement). All other content clients and versions are deemed as not important to support.
-
Identify what aspects of the design could acceptably change in the event that one content client renders differently than others. Some differences are unavoidable, but it helps to know the priorities before implementing.
Implement
-
Start from either:
- The HTML provided by the company.
- One of the default base templates.
-
Apply customizations in case the template doesn't meet the original specification, following 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 content client. The design should be engaging even when that happens.
-
Use web-safe fonts (like Arial, Verdana, Georgia, and Times New Roman) to make sure it's readable on any content client.
-
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 message.
-
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
© -
Consider using a pretext header summary for content 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. HTML is difficult to maintain, and it may be off when you have to change the template in the future.
-
-
Validate the HTML periodically using an online tool. For example, on validator.w3.org:
-
Select the Validate by Direct Inputs tab.
-
Paste the HTML code for the template in the text box.
-
Click Check.
Note: If after checking the HTML the URL path is redirected to validator.w3.org/nu/#textarea, the DOCTYPE of the HTML sample is incorrect. Ensure the DOCTYPE is defined as<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">If the client-provided HTML is uninterpretable by the validator, as a last resort use infohound.net/tidy to reformat it. Configure the tool with the following settings:
Review the results and fix any errors and warnings that are highlighted by the tool. Keep in mind that Experience Cloud's variable replacement syntax might create false positive errors like the examples below:
Line 32, Column 12: character "$" is not allowed in the value of attribute "name" <a name="$LANGUAGE.id$"></a>Line 93, Column 55: character data is not allowed here $[0,1,2,3,4,5,6,7,8,9]:{Line 99, Column 55: character data is not allowed here }$Tip: If you require help to fix an error, contact Medallia support. -
-
Validate that the HTML follows accessibility guidelines. For more information, see Shared assets accessibility.
Tip: This is a best practice even when not required by the company. -
Update HTML template translations.
-
Perform periodic code reviews with your peers to ensure that the code is readable, maintainable, functional, and robust (in that order of most-to-least important).
Test
-
Send the template to yourself and test all click-through functionality across multiple email clients and browsers (mobile and desktop).
-
Test the email with members of the company that requested the template
Common properties
- Template name
- Name of the template as it appears in lists of templates. This is required.
- Language
- Spoken language of the template. See Language property and translations, below, for information about this property.
- Template priority
- Determines the order in which the templates are evaluated when Experience Cloud searches for a template to use. Lower numbers appear at the top of the list, and are processed first.
Templates of the same type (survey, alert, Rapid Response, and user) are treated as a group, and the Template priority property determines the evaluation order within each group. Templates assigned to a unit do not use priority, since those templates are available only to that unit.
For survey messages, priorities aren't used when the template is assigned directly by the Inviter or when the template is selected by Unit Group.
Note: All templates must have a condition to have a priority. - Content type
- Format of the message content, either:
-
Plain text — No styling or formatting, just text. This option activates the Plain text body editor with the Plain-text properties.
-
HTML only — Uses HTML formatting and styling. This option activates the HTML body editor with the HTML properties.
-
Plain text and HTML — Message contains both formats. This option activates both editors, and sends both formats in the message. The content application then determines which format to display.
Plain text is the most portable format and should be viewable by any content application. However, most modern email applications can render both formats.
-
- Condition
- Tells Experience Cloud when to chose this template when one is not specifically named in the Distributions, Actions, or Rapid Response emails specifications. Important: This property does not apply to User account notifications.
When the specification does not include a named template, Experience Cloud picks a one by testing each template, starting with the lowest Priority, in the following order:
-
Templates with a matching Condition expression.
- When no Condition is present, the group selected in the Scope property.
The condition expression is often a test to see if the Unit in the survey record is associated with a specific Unit group, or if the recipient belongs to a special class or group.
Tip: To keep a template from being selected, set the Condition value tofalse. Similarly, to create a default template, assign a high Template priority and a Condition oftrue.See Conditional expressions for detail about how to specify a condition.
In the following example, the invitation type is an E-field whose a value provided by the company. This condition is
truewhen the value of that field is 2 or 3:e_example_invitationtype_alt in {2,3}. -
- Scope
- Specifies when to use the template for a survey invitation or reminder, when an Email inviter is set to Based on EmailTemplate UnitGroup/ Condition. Otherwise, this scope has no meaning.
See Condition, above, for details.
Warning: This feature is deprecated and will be removed in the future. Minimal support is available. - Email subject
- Text of the email subject field. The Email subject line allows for conditioning, which should follow the format
$if field$text$endif$. This is displayed only if the field value is non-null. - Available tags
- Tags are placeholders for information from Experience Cloud or from the survey record to include in the message. The value of the tags is determined when the message is rendered. The list of available tags begins with ones appropriate for the type of template, such as Alert-specific tags for Alert notifications, and User-specific tags for messages to Users. The rest of the list is all the A-fields in Experience Cloud.
Plain-text properties
- Plain text body
- Message to use for plain-text template. The text can include Tags to insert values when the message is rendered.
HTML properties
- HTML body
-
Content and source for HTML format messages. Like plain text, the content can include Tags to insert values when the message is rendered. Any valid HTML code can be included. Additionally, the message can include any of the images defined in Survey designs as shown below.
For a collection of templates for various scenarios and formats, see HTML templates.
- Customization
- A design variation that includes images to be made available for inclusion in the template.
- Available images
- Images defined in the Variation, and which may be included in the template. See HTML image references, below, for details.
HTML format
HTML messages can include simple formatting, like this:
Or more complex, like this message that uses a table to organize the elements, and includes text styling directives:
If the styling you apply includes setting a font, Medallia strongly recommends using cross-platform-safe fonts, that are guaranteed to be available natively and supported by most email clients.
-
This increases load-times and can impact the performance of surveys, especially on mobile devices. Be sure to test performance on the target devices, and consolidate and reduce the number of fonts in use.
-
If the survey taker's browser is unable to download the web font, it falls back to another font to render. Be sure to set a web-safe font as a fallback, otherwise some browsers might get stuck and not display the content at all.
-
If the font you want to use belongs to a third party, make sure you have a license that allows you to use it commercially.
-
Make sure the location where you are hosting the custom fonts is well maintained. If you need to move the location where you keep the font, you must coordinate this with Medallia beforehand to avoid quality incidents.
HTML image references
Include images by referencing them with standard HTML elements. You can reference an image from your company's web server, or use an image associated with the company's brand. Survey designs defines the images available as part of a variation.
For example, to reference the email header logo, use the $img_Email_Header_logo$ tag:
<td><img border="0" alt="Acme Co" src="$img_Email_Header_logo$"/></td>
Preview and test
The Preview and test feature shows a general sample of how the template looks when rendered, including content from a survey record. When viewing the sample you can:
-
Change the survey record used to populate the tags by either entering specific ID in the upper right, or clicking the refresh button next to the ID field.
-
Send the preview to an email address.
| Platform | E-mail Client | Version |
|---|---|---|
| Desktop | Apple Mail | Apple Mail 9 OS X 10.11 |
| Desktop | Apple Mail | Apple Mail 10 OS X 10.12 |
| Desktop | Outlook | Outlook 2007 Win 7 |
| Desktop | Outlook | Outlook 2011 OS X 10.10 |
| Desktop | Outlook | Outlook 2013 Win 7 |
| Desktop | Outlook | Outlook 2016 OS X 10.10 |
| Desktop | Outlook | Outlook 2016 Win 7 |
| Desktop | Outlook | Windows 10 Mail Win 10 |
| Desktop | Lotus Notes | Lotus Notes 8.5 Win 7 |
| Desktop | Lotus Notes | IBM Notes 9 Win 7 |
| Desktop | Other | Color Blindness Simulated |
| Desktop | Other | Plain Text Text-only view |
| Mobile/Tablet Clients | Android | Android 4.4 Android 4.4 |
| Mobile/Tablet Clients | Android | Gmail App (Android) Android 4.4 |
| Mobile/Tablet Clients | Android | Android 5.1 Android 5.1 |
| Mobile/Tablet Clients | Android | Android 6.0 Android 6.0 |
| Mobile/Tablet Clients | iOS | iPhone 6s iOS 9 |
| Mobile/Tablet Clients | iOS | iPhone 6s Plus iOS 9 |
| Mobile/Tablet Clients | iOS | iPhone 7 iOS 10.1 |
| Mobile/Tablet Clients | iOS | iPhone 7 Plus iOS 10.1 |
| Mobile/Tablet Clients | iOS | iPad (Retina) iOS 9 |
| Mobile/Tablet Clients | iOS | iPad Mini iOS 9 |
| Web Based Clients | Gmail | Gmail Explorer |
| Web Based Clients | Gmail | Gmail Firefox |
| Web Based Clients | Gmail | Gmail Chrome |
| Web Based Clients | Gmail | Inbox by Gmail Chrome |
| Web Based Clients | Office 365 | Office 365 Explorer |
| Web Based Clients | Outlook.com | Outlook.com Explorer |
| Web Based Clients | Yahoo! Mail | Yahoo! Mail Explorer |
Language property and translations
The message in a template may be any language, as identified by the Language property of the template. Additionally, a template may be translated into one or more additional languages using the Translations. These two features are not directly related.
The Language property is used when the company has preferred languages. The invitation module compiles an ordered list of preferred languages for the recipient or unit, and then uses that list when evaluating the Language property, with preference given to the first languages in the ordered list. When no templates have a Language in the list, then just the Condition and Scope properties determine the template to use.
Once a template has been identified, and when there is a list of preferred languages, Experience Cloud picks a translation corresponding to the first language it finds in the ordered list. If none are found, Experience Cloud uses the original template. When multiple translations match multiple languages in the list, Experience Cloud uses the Multi-language template to wrap each of those translations into a single message. See Multi-language templates below for details.
In summary, the template and translations are selected as follows:
-
Select a language.
-
Collect the ordered list of preferred languages, if any.
-
Select a template, attempt to use the Language if there is a preferred list.
-
If there is a language list, attempt to pick a translation of the template that matches a language in the list.
-
When multiple translations match languages in the list, use a Multi-language template to wrap the translations into one message.
Multi-language templates
Experience Cloud uses the Multi-language template to wrap each of those translations into a single message after the invitation module selects an email template and when:
- There is a list of preferred languages.
- Multiple translations match multiple languages in the list.
Depending on the content type, the recipients can:
- For HTML content, recipients may select the language translation to use.
- For plain-text content, the translations appear one after the other in the message: the recipient scrolls to read the translations.
<HTML> or <body> tags in it, as the multi-language template wrapping it already provides these. Note that templates that don't have these tags can't be used on their own in a single language email.If a multi-language template has the full HTML code (including opening and closing <HTML> and <body> tags), this generates an email with invalid HTML, which might not be accepted by some email clients.
Setting multi-language templates
To use multi-language templates:
- Define a template for the default target language:
- The Content Type must be either HTML only or Plain text and html.
- The HTML Body must include this anchor near the top of the content:
<a name="$LANGUAGE.id$"></a>
- Define one or more translations for the template. See Localization for details:
- Each translation must have an HTML Body that includes this anchor:
<a name="$LANGUAGE.id$"></a>. Note that you should not update the markup itself of the translation strings.
- Each translation must have an HTML Body that includes this anchor:
- Define a multi-language template wrapper:
- The Content Type must be either HTML only or Plain text and HTML.
- The HTML Body and optional Plain Text Body properties must include variables to insert the translated messages.
When the message is rendered, Experience Cloud combines each of the templates and translations into one message. For HTML content, each template and each translation include the <a name="$LANGUAGE.id$"></a> tag, which each become HTML anchor links in the final HTML message. The anchor name value is the ID of the language.
The multi-language template is a wrapper that tells Experience Cloud how to format the combined output. It should follow this best practice format:
$if(HAS_MULTIPLE_LANGUAGES)$
<center>
Choose your language: $LANGUAGES:{<a href="#$it.id$">$it.name$</a>}; separator=" | "$
<br/><br/>
<center>
$endif$
$HTML_BODIES; separator="<hr/>"$
In the template:
-
$HTML_BODIES$ — Inserts the contents of a
<body>portion of the template and translations. The separator attribute is text to place between each translation. In the example above, the text uses an<hr/>HTML tag. Any valid HTML can be specified. -
$LANGUAGE$ — Inserts links to the individual translated messages. For each message and translation, insert the language ID in the
href, and the language name in the text of the link.
This illustration demonstrates how it all works. This example has an template in English, and it has two translations: French and Swedish.
When the Experience Cloud renders the message, it creates a single HTML message using the Multi-language template as a wrapper. It then inserts the rendered template, and then each of the translations, in the order defined by the preferred languages list.
Plain-text output is similar, except there are no anchors and links.
Notes
- For languages that are written from right to left, include direction tags in the HTML code. The HTML templates screen includes examples in the template comments.
- When a translated choice set is piped into the template, template uses the In report property value of the translation, not the In survey version of the translation. When sending emails in a language not being used for report translations, you need to temporarily:
-
Turn on Reporting translations for that locale.
-
Populate the In Report value of the choice set.
-
Turn off reporting translations for that locale.
-
-
If you make changes to an template code after carrying out a translation, keep in mind that the translations must be updated too, even those in the same language as the original text. For example, if the original text is in English, any changes you make need to be pushed to the English translation before they become visible in emails.
-
Avoid using the same templates for multi-language messages and for single-language messages. Templates for single language messages must contain the full HTML code (including opening and closing
<HTML>and<body>tags). Templates for multi language messages ideally should not contain<HTML>or<body>tags, as these tags are provided by the wrapping multi-language template, and otherwise the message that is produced contains invalid HTML.
