HTML templates

Important: Admin Suite Distributions offers a much more convenient way to create Invitation, Reminder, and Thank-you emails, featuring a visual editor, easier steps and and preview functionality.

Use these HTML code templates as the starting point for your messages. They have been optimized across browsers and platforms (desktop and mobile), and they employ web and email best practices:

Warning: Changing the code in these templates risks the email not rendering properly on all platforms and devices. The more you change, the greater the risk. Try to leverage the provided code as much as possible rather than writing your own HTML. Note that issues arising from custom HTML in email templates cannot be solved via Medallia Support. since any custom code is Medallia Experience Cloud's administrator responsibility. For more information, contact your Medallia expert.0

Full Email templates

These templates include both the underlying code and a screenshot of what the template looks like.

  • Click the links to see a full-size image and a listing of the HTML code.

  • Copy the code listing use it as the starting point for your template by updating the content and images.

Thumbnail screen capture of the template rendered without values filled in Single-column, header image, text + button in body
Thumbnail screen capture of the template rendered without values filled in Multi-column, header image, image in left column, text in right column
Thumbnail screen capture of the template rendered without values filled in Multi-column, header image, text + button in left column, image in right column
Thumbnail screen capture of the template rendered without values filled in Quick Start email
Thumbnail screen capture of the template rendered without values filled in Accessible Quick Start email

Full-width image template

Example of the full-width image

Code

<!-- FULL-WIDTH COLUMN HEADER OR FOOTER IMAGE 
  for spacing or linebreaks use <br />
  -->
<tr>
  <td align="center" valign="top">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td align="center" valign="top">
          <!---- HEADER IMAGE 
          Images need to have the width and height specified. The style property 
          "display:block" is necessary to get rid of unwanted margins in some older email 
          clients. Remember that email clients have images turned off by default,  
          alternate text "alt-text" is necessary. The color, background-color and font  
          styles are for the alt text in case images are turned off. ---->
          <img src="http://placehold.it/600x200" width="600px" height="120px" border="0" alt="some text" border="0" alt="some text" style="display:block; color:#efefef; text-align:center; font-family:Arial; font-size:28px; font-weight:bold; background-color:#2A80B9;" />
        </td>
      </tr>
    </table>
  </td>
</tr>

Full-width column template

Example of the full-width

Code

<!-- FULL-WIDTH COLUMN 
for spacing or linebreaks use <br /> -->
<tr>
  <td align="center" valign="top"><!-- Set main horizontal and vertical alignment. Horizontal: left, center, right; Vertical: top, middle, bottom. -->
    <span style="font-family:Arial; font-size:16px; color:#888888;">
      This text will be center aligned
    </span>
    <br />
    <br />
    <div style="text-align:left;"><!-- Use div with text-align to change main alignment. The text inside this div will be left aligned. -->
      <span style="font-family:Arial; font-size:16px; color:#888888;">
        <b>Dear Someone</b><br />
        This text will be left aligned.
      </span>
      <br />
      <br />
      <span style="font-family:Arial; font-size:16px; color:#888888;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor sed dolor ultrices, a viverra nulla ullamcorper. Quisque tortor ligula, molestie et enim sit amet, vehicula ornare purus. Aliquam a libero mi. Nunc sem orci, ullamcorper nec ipsum sit amet, pellentesque vestibulum velit. Curabitur condimentum orci a erat dapibus vestibulum. 
      </span>
    </div>
    <br />
    <br />
    <span style="font-family:Arial; font-size:16px; color:#888888;">
      This text will be center aligned.
    </span>
  </td>
</tr>

Full-width column that spans two columns below it template

Example of the full-width spanning two columns

Code

<!-- FULL-WIDTH COLUMN FOR SECTIONS THAT HAVE TWO RESPONSIVE COLUMNS 
  for spacing or linebreaks use <br /> -->
<tr>
  <td colspan="2" align="center" valign="top"><!-- Set main horizontal and vertical alignment. Horizontal: left, center, right; Vertical: top, middle, bottom -->
    <span style="font-family:Arial; font-size:16px; color:#888888;">
      This text will be center aligned
    </span>
    <br />
    <br />
    <div style="text-align:left;"><!-- Use div with text-align to change main alignment. The text inside this div will be left aligned -->
      <span style="font-family:Arial; font-size:16px; color:#888888;">
        <b>Dear Someone</b><br />
        This text will be left aligned
      </span>
      <br />
      <br />
      <span style="font-family:Arial; font-size:16px; color:#888888;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor sed dolor ultrices, a viverra nulla ullamcorper. Quisque tortor ligula, molestie et enim sit amet, vehicula ornare purus. Aliquam a libero mi. Nunc sem orci, ullamcorper nec ipsum sit amet, pellentesque vestibulum velit. Curabitur condimentum orci a erat dapibus vestibulum. 
      </span>
    </div>
    <br />
    <br />
    <span style="font-family:Arial; font-size:16px; color:#888888;">
      This text will be center aligned.
    </span>
  </td>
</tr>