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.
    Important: Admin Suite Distributions are single language. See Multi-language templates for details.
  • 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:

Creating a template

When dealing with the requirement from a company to build a template, iterate through the following processes.

Note: Always include a design for a Plain-text format; avoid creating just an HTML format. Including a plain-text format:
  • 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

  1. 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:

      Email template detailed specification including pixels and font types.

  2. 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.

  3. 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

  1. Start from either:

  2. 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 @media queries 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 &copy;

    • 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.

  3. Validate the HTML periodically using an online tool. For example, on validator.w3.org:

    1. Select the Validate by Direct Inputs tab.

    2. Paste the HTML code for the template in the text box.

    3. 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:

    Settings to configured infohound.net/tidy

    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.
  4. 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.
  5. Update HTML template translations.

  6. 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

  1. Send the template to yourself and test all click-through functionality across multiple email clients and browsers (mobile and desktop).

  2. 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:

  1. Templates with a matching Condition expression.

  2. 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 to false. Similarly, to create a default template, assign a high Template priority and a Condition of true.

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 true when 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:

Note: See HTML templates for a collection of templates for various scenarios and formats.

HTML text in an HTM Body property, and the resulting HTML email message

Or more complex, like this message that uses a table to organize the elements, and includes text styling directives:

Complex HTML text in an HTM Body property, and the resulting HTML email message

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.

Note: If you want to use a font that might not be natively available in the survey taker's device, keep the following in mind:
  • 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.

Preview of a template

The following combination of platforms and content clients are supported by default when testing in Litmus:
PlatformE-mail ClientVersion
DesktopApple MailApple Mail 9 OS X 10.11
DesktopApple MailApple Mail 10 OS X 10.12
DesktopOutlookOutlook 2007 Win 7
DesktopOutlookOutlook 2011 OS X 10.10
DesktopOutlookOutlook 2013 Win 7
DesktopOutlookOutlook 2016 OS X 10.10
DesktopOutlookOutlook 2016 Win 7
DesktopOutlookWindows 10 Mail Win 10
DesktopLotus NotesLotus Notes 8.5 Win 7
DesktopLotus NotesIBM Notes 9 Win 7
DesktopOtherColor Blindness Simulated
DesktopOtherPlain Text Text-only view
Mobile/Tablet ClientsAndroidAndroid 4.4 Android 4.4
Mobile/Tablet ClientsAndroidGmail App (Android) Android 4.4
Mobile/Tablet ClientsAndroidAndroid 5.1 Android 5.1
Mobile/Tablet ClientsAndroidAndroid 6.0 Android 6.0
Mobile/Tablet ClientsiOSiPhone 6s iOS 9
Mobile/Tablet ClientsiOSiPhone 6s Plus iOS 9
Mobile/Tablet ClientsiOSiPhone 7 iOS 10.1
Mobile/Tablet ClientsiOSiPhone 7 Plus iOS 10.1
Mobile/Tablet ClientsiOSiPad (Retina) iOS 9
Mobile/Tablet ClientsiOSiPad Mini iOS 9
Web Based ClientsGmailGmail Explorer
Web Based ClientsGmailGmail Firefox
Web Based ClientsGmailGmail Chrome
Web Based ClientsGmailInbox by Gmail Chrome
Web Based ClientsOffice 365Office 365 Explorer
Web Based ClientsOutlook.comOutlook.com Explorer
Web Based ClientsYahoo! MailYahoo! 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.

Example of an English template with four translations, and a French template with two translations

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:

  1. Select a language.

  2. Collect the ordered list of preferred languages, if any.

  3. Select a template, attempt to use the Language if there is a preferred list.

  4. If there is a language list, attempt to pick a translation of the template that matches a language in the list.

  5. When multiple translations match languages in the list, use a Multi-language template to wrap the translations into one message.

Flow chart outlining the language selection process

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.
Note: Some mobile devices do not support anchor links, which prevents multi-language templates from being used on those devices.
Warning: For a message to be fully compatible with multi-language templates, it must have no opening or closing <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:

  1. Define a template for the default target language:
    1. The Content Type must be either HTML only or Plain text and html.
    2. The HTML Body must include this anchor near the top of the content: <a name="$LANGUAGE.id$"></a>
  2. Define one or more translations for the template. See Localization for details:
    1. 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.
  3. Define a multi-language template wrapper:
    1. The Content Type must be either HTML only or Plain text and HTML.
    2. 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.

Four templates: multi-lang, email, and two email translations

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.

Example of the generate HTML and how it looks when rendered: all three languages on the same screen, consecutively

Plain-text output is similar, except there are no anchors and links.

Four template generating one plain-text message in three languages

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:
    1. Turn on Reporting translations for that locale.

    2. Populate the In Report value of the choice set.

    3. 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.