Base template
Base template is single-column, and includes a header image, plus text and button in its body.
Template code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Medallia HTML Template</title>
<style type="text/css">
/* Take care of image borders and formatting */
img { max-width:600px !important; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; }
a img { border:none; }
/* Responsive Styles*/
@media only screen and (max-width:600px){
/* set column image maximum width for mobile screens */
img[class="columnImage"]{ height:auto !important; max-width:280px !important; width:100% !important; }
table[id="emailContainer"]{ width:100% !important; }
table[class="columnContainer"]{ width:100% !important; }
table[class="mobileButton"] { width:60% !important; }
td[class="columnSingle"] { display:block !important; width:100% !important; }
}
</style>
</head>
<body bgcolor="#efefef" style="background-color:#efefef; -webkit-text-size-adjust: none; padding:0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" id="emailContainer" style="display:block; max-width:600px; background-color:#ffffff; width:100%!important;">
<tr><!-- Start email header -->
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<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, and alternative 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/600x150" width="600" height="150" border="0" alt="Banner Image" style="display:block; color:#efefef; text-align:center; font-family:Arial; font-size:28px; font-weight:bold; background-color:#888888;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!-- End email header -->
<tr><!-- Start email body -->
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top">
<br />
<br />
<span style="font-family:Arial; font-size:16px; color:#888888;"><b>Dear $FIRSTNAME$,</b><br /><br />Thank you for choosing Acme Company!</span>
<br />
<br />
<span style="font-family:Arial; font-size:16px; color:#888888;">As part of our commitment to improve your experience with Acme Company, I am writing to ask for your valuable feedback regarding your recent contact center interaction. The information collected from this survey will be reviewed as part of our ongoing improvement efforts.</span>
<br />
<br />
<!-- BUTTON
The <div> surrounding the button allows you to align the button left, center or right. The commented area is for some versions of Microsoft Outlook. If colors change, they need change in both the commented and the uncommented sections of the button.-->
<div style="text-align:center;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="$SECURE_SURVEY_URL$" style="height:42px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#444444" fillcolor="#666666">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Go to survey</center>
</v:roundrect>
<--![endif]-->
<!--[if !mso]-->
<a href="$SECURE_SURVEY_URL$" class="mobileButton" style="background-color:#666666;border:1px solid #444444;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:42px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Go to survey</a>
<!--[endif]-->
</div>
<br />
<span style="font-family:Arial; font-size:16px; color:#888888;">
Thank you!<br /><br />
John Doe<br />
VP, Customer Experience<br />
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!-- End email body -->
<tr><!-- Start email footer -->
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; background-color:#F6F6F6; border-top-color:#EEEEEE; border-top-style:solid; border-top-width:1px;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" style="line-height:12px;">
<span style="font-family:Arial; font-size:12px; color:#888888;">
Please do not "Reply" to this invitation.<br /><br />
This survey invitation will expire on $EXPIRATIONDATE_PRETTY$.<br /><br />
Should you have any problems accessing or completing the survey, please visit <a href="http://surveysupport.medallia.com/s/?id=$SECURE_SURVEY_URL$" style="font-family:Arial; color:#9999ff; text-decoration:none;">surveysupport.medallia.com</a>. You received this email because you provided your email address to $COMPANY_NAME$. If you would like to opt out from receiving future surveys, please click <a href="$OPT_OUT_URL$" style="font-family:Arial; color:#9999ff; text-decoration:none;"><span style="font-family:Arial; color:#9999ff; text-decoration:none;">here</span></a>. <br /><br />
<a href="" style="font-family:Arial; color:#9999ff; text-decoration:none;">$COMPANY_NAME$ Privacy Policy</a><br /><br />
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!-- End email footer -->
</table>
</td>
</tr>
</table>
$TRACK_INVITE_EMAIL_OPEN$
</body>
</html>
