Sample HTML email
This HTML email sample is provided to help testing as explained in the developer guide to using the campaign create API.
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">
<head>\r\n
<!--[if gte mso 9]><xml>\r\n <o:OfficeDocumentSettings>\r\n <o:AllowPNG/>\r\n <o:PixelsPerInch>96</o:PixelsPerInch>\r\n </o:OfficeDocumentSettings>\r\n </xml><![endif]-->\r\n
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\r\n
<meta name=\"viewport\" content=\"width=device-width\" />\r\n
<!--[if !mso]><!-->
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
<!--<![endif]-->\r\n <title></title>\r\n \r\n \r\n <style type=\"text/css\" id=\"media-query\">
\r\n body {
\r\n margin: 0;
\r\n padding: 0;
}
\r\n\r\ntable,
tr,
td {
\r\n vertical-align: top;
\r\n border-collapse: collapse;
}
\r\n\r\n.ie-browser table,
.mso-container table {
\r\n table-layout: fixed;
}
\r\n\r\n* {
\r\n line-height: inherit;
}
\r\n\r\na[x-apple-data-detectors=true] {
\r\n color: inherit !important;
\r\n text-decoration: none !important;
}
\r\n\r\n[owa] .img-container div,
[owa] .img-container button {
\r\n display: block !important;
}
\r\n\r\n[owa] .fullwidth button {
\r\n width: 100% !important;
}
\r\n\r\n[owa] .block-grid .col {
\r\n display: table-cell;
\r\n float: none !important;
\r\n vertical-align: top;
}
\r\n\r\n.ie-browser .num12,
.ie-browser .block-grid,
[owa] .num12,
[owa] .block-grid {
\r\n width: 500px !important;
}
\r\n\r\n.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
\r\n line-height: 100%;
}
\r\n\r\n.ie-browser .mixed-two-up .num4,
[owa] .mixed-two-up .num4 {
\r\n width: 164px !important;
}
\r\n\r\n.ie-browser .mixed-two-up .num8,
[owa] .mixed-two-up .num8 {
\r\n width: 328px !important;
}
\r\n\r\n.ie-browser .block-grid.two-up .col,
[owa] .block-grid.two-up .col {
\r\n width: 250px !important;
}
\r\n\r\n.ie-browser .block-grid.three-up .col,
[owa] .block-grid.three-up .col {
\r\n width: 166px !important;
}
\r\n\r\n.ie-browser .block-grid.four-up .col,
[owa] .block-grid.four-up .col {
\r\n width: 125px !important;
}
\r\n\r\n.ie-browser .block-grid.five-up .col,
[owa] .block-grid.five-up .col {
\r\n width: 100px !important;
}
\r\n\r\n.ie-browser .block-grid.six-up .col,
[owa] .block-grid.six-up .col {
\r\n width: 83px !important;
}
\r\n\r\n.ie-browser .block-grid.seven-up .col,
[owa] .block-grid.seven-up .col {
\r\n width: 71px !important;
}
\r\n\r\n.ie-browser .block-grid.eight-up .col,
[owa] .block-grid.eight-up .col {
\r\n width: 62px !important;
}
\r\n\r\n.ie-browser .block-grid.nine-up .col,
[owa] .block-grid.nine-up .col {
\r\n width: 55px !important;
}
\r\n\r\n.ie-browser .block-grid.ten-up .col,
[owa] .block-grid.ten-up .col {
\r\n width: 50px !important;
}
\r\n\r\n.ie-browser .block-grid.eleven-up .col,
[owa] .block-grid.eleven-up .col {
\r\n width: 45px !important;
}
\r\n\r\n.ie-browser .block-grid.twelve-up .col,
[owa] .block-grid.twelve-up .col {
\r\n width: 41px !important;
}
\r\n\r\n@media only screen and (min-width: 520px) {
\r\n .block-grid {
\r\n width: 500px !important;
}
\r\n .block-grid .col {
\r\n vertical-align: top;
}
\r\n .block-grid .col.num12 {
\r\n width: 500px !important;
}
\r\n .block-grid.mixed-two-up .col.num4 {
\r\n width: 164px !important;
}
\r\n .block-grid.mixed-two-up .col.num8 {
\r\n width: 328px !important;
}
\r\n .block-grid.two-up .col {
\r\n width: 250px !important;
}
\r\n .block-grid.three-up .col {
\r\n width: 166px !important;
}
\r\n .block-grid.four-up .col {
\r\n width: 125px !important;
}
\r\n .block-grid.five-up .col {
\r\n width: 100px !important;
}
\r\n .block-grid.six-up .col {
\r\n width: 83px !important;
}
\r\n .block-grid.seven-up .col {
\r\n width: 71px !important;
}
\r\n .block-grid.eight-up .col {
\r\n width: 62px !important;
}
\r\n .block-grid.nine-up .col {
\r\n width: 55px !important;
}
\r\n .block-grid.ten-up .col {
\r\n width: 50px !important;
}
\r\n .block-grid.eleven-up .col {
\r\n width: 45px !important;
}
\r\n .block-grid.twelve-up .col {
\r\n width: 41px !important;
}
}
\r\n\r\n@media (max-width: 520px) {
\r\n .block-grid,
.col {
\r\n min-width: 320px !important;
\r\n max-width: 100% !important;
\r\n display: block !important;
}
\r\n .block-grid {
\r\n width: calc(100% - 40px) !important;
}
\r\n .col {
\r\n width: 100% !important;
}
\r\n .col>div {
\r\n margin: 0 auto;
}
\r\n img.fullwidth,
img.fullwidthOnMobile {
\r\n max-width: 100% !important;
}
\r\n .no-stack .col {
\r\n min-width: 0 !important;
\r\n display: table-cell !important;
}
\r\n .no-stack.two-up .col {
\r\n width: 50% !important;
}
\r\n .no-stack.mixed-two-up .col.num4 {
\r\n width: 33% !important;
}
\r\n .no-stack.mixed-two-up .col.num8 {
\r\n width: 66% !important;
}
\r\n .no-stack.three-up .col.num4 {
\r\n width: 33% !important;
}
\r\n .no-stack.four-up .col.num3 {
\r\n width: 25% !important;
}
\r\n .mobile_hide {
\r\n min-height: 0px;
\r\n max-height: 0px;
\r\n max-width: 0px;
\r\n display: none;
\r\n overflow: hidden;
\r\n font-size: 0px;
}
}
\r\n\r\n
</style>\r\n<script async src='/cdn-cgi/bm/cv/669835187/api.js'></script>
</head>\r\n
<body class=\"clean-body\" style=\"margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #464c4f\">\r\n <style type=\"text/css\" id=\"media-query-bodytag\">
\r\n @media (max-width: 520px) {
\r\n .block-grid {
\r\n min-width: 320px !important;
\r\n max-width: 100% !important;
\r\n width: 100% !important;
\r\n display: block !important;
\r\n
}
\r\n\r\n .col {
\r\n min-width: 320px !important;
\r\n max-width: 100% !important;
\r\n width: 100% !important;
\r\n display: block !important;
\r\n
}
\r\n\r\n .col>div {
\r\n margin: 0 auto;
\r\n
}
\r\n\r\n img.fullwidth {
\r\n max-width: 100% !important;
\r\n
}
\r\n\t\t\timg.fullwidthOnMobile {
\r\n max-width: 100% !important;
\r\n
}
\r\n .no-stack .col {
\r\n\t\t\t\tmin-width: 0 !important;
\r\n\t\t\t\tdisplay: table-cell !important;
\r\n\t\t\t
}
\r\n\t\t\t.no-stack.two-up .col {
\r\n\t\t\t\twidth: 50% !important;
\r\n\t\t\t
}
\r\n\t\t\t.no-stack.mixed-two-up .col.num4 {
\r\n\t\t\t\twidth: 33% !important;
\r\n\t\t\t
}
\r\n\t\t\t.no-stack.mixed-two-up .col.num8 {
\r\n\t\t\t\twidth: 66% !important;
\r\n\t\t\t
}
\r\n\t\t\t.no-stack.three-up .col.num4 {
\r\n\t\t\t\twidth: 33% !important;
\r\n\t\t\t
}
\r\n\t\t\t.no-stack.four-up .col.num3 {
\r\n\t\t\t\twidth: 25% !important;
\r\n\t\t\t
}
\r\n .mobile_hide {
\r\n min-height: 0px !important;
\r\n max-height: 0px !important;
\r\n max-width: 0px !important;
\r\n display: none !important;
\r\n overflow: hidden !important;
\r\n font-size: 0px !important;
\r\n
}
\r\n
}
\r\n
</style>\r\n
<!--[if IE]><div class=\"ie-browser\"><![endif]-->\r\n
<!--[if mso]><div class=\"mso-container\"><![endif]-->\r\n <table class=\"nl-container\" style=\"border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width:
320px;Margin: 0 auto;background-color: #464c4f;width: 100%\" cellpadding=\"0\" cellspacing=\"0\">\r\n\t<tbody>\r\n\t<tr style=\"vertical-align: top\">\r\n\t\t<td style=\"word-break: break-word;border-collapse: collapse !important;vertical-align:
top\">\r\n
<!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color: #464c4f;\"><![endif]-->\r\n\r\n <div style=\"background-color:#0F0D0D;\">\r\n <div style=\"Margin:
0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;\" class=\"block-grid two-up \">\r\n <div style=\"border-collapse: collapse;display:
table;width: 100%;background-color:transparent;\">\r\n
<!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"background-color:#0F0D0D;\" align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: 500px;\"><tr class=\"layout-full-width\" style=\"background-color:transparent;\"><![endif]-->\r\n\r\n
<!--[if (mso)|(IE)]><td align=\"center\" width=\"250\" style=\" width:250px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><![endif]-->\r\n
<div class=\"col num6\" style=\"max-width: 320px;min-width: 250px;display: table-cell;vertical-align: top;\">\r\n <div style=\"background-color: transparent; width: 100% !important;\">\r\n
<!--[if (!mso)&(!IE)]><!-->
<div style=\"border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left:
0px;\">
<!--<![endif]-->\r\n\r\n \r\n <div align=\"left\" class=\"img-container left autowidth \" style=\"padding-right: 0px; padding-left: 0px;\">\r\n
<!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr style=\"line-height:0px;line-height:0px;\"><td style=\"padding-right: 0px; padding-left: 0px;\" align=\"left\"><![endif]-->\r\n <img
class=\"left autowidth \" align=\"left\" border=\"0\" src=\"https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/5f31cabf-16c2-4052-9f5b-d56ecc263451/19d6011e77a68eb06404e2a9c880f02d63fb23f0/logo_1.png\"
alt=\"Image\" title=\"Image\" style=\"outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: 0;height: auto;float: none;width: 100%;max-width: 200px\"
width=\"200\" />\r\n
<!--[if mso]></td></tr></table><![endif]-->\r\n
</div>\r\n\r\n \r\n
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->\r\n
</div>\r\n </div>\r\n
<!--[if (mso)|(IE)]></td><td align=\"center\" width=\"250\" style=\" width:250px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><![endif]-->\r\n
<div class=\"col num6\" style=\"max-width: 320px;min-width: 250px;display: table-cell;vertical-align: top;\">\r\n <div style=\"background-color: transparent; width: 100% !important;\">\r\n
<!--[if (!mso)&(!IE)]><!-->
<div style=\"border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left:
0px;\">
<!--<![endif]-->\r\n\r\n \r\n <div class=\"\">\r\n\t
<!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;\"><![endif]-->\r\n\t<div
style=\"color:#555555;font-family:Arial, 'Helvetica Neue' , Helvetica, sans-serif;line-height:120%; padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;\">\t\r\n\t\t<div
style=\"font-size:12px;line-height:14px;color:#555555;font-family:Arial, 'Helvetica Neue' , Helvetica, sans-serif;text-align:left;\">
<p style=\"margin: 0;font-size: 14px;line-height: 17px;text-align: right\">Editor 2.0 now available</p>
</div>\t\r\n\t</div>\r\n\t
<!--[if mso]></td></tr></table><![endif]-->\r\n
</div>\r\n \r\n
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->\r\n
</div>\r\n </div>\r\n
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\r\n
</div>\r\n </div>\r\n </div>
<div style=\"background-color:transparent;\">\r\n <div style=\"Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;\" class=\"block-grid \">
\r\n <div style=\"border-collapse: collapse;display: table;width: 100%;background-color:transparent;\">\r\n
<!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"background-color:transparent;\" align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: 500px;\"><tr class=\"layout-full-width\" style=\"background-color:transparent;\"><![endif]-->\r\n\r\n
<!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\" width:500px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px dotted transparent; border-left: 0px dotted transparent; border-bottom: 0px dotted transparent; border-right: 0px dotted transparent;\" valign=\"top\"><![endif]-->\r\n
<div class=\"col num12\" style=\"min-width: 320px;max-width: 500px;display: table-cell;vertical-align: top;\">\r\n <div style=\"background-color: transparent; width: 100% !important;\">\r\n
<!--[if (!mso)&(!IE)]><!-->
<div style=\"border-top: 0px dotted transparent; border-left: 0px dotted transparent; border-bottom: 0px dotted transparent; border-right: 0px dotted transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px;
padding-left: 0px;\">
<!--<![endif]-->\r\n\r\n \r\n <div class=\"\">\r\n\t
<!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;\"><![endif]-->\r\n\t<div
style=\"color:#555555;font-family:Arial, 'Helvetica Neue' , Helvetica, sans-serif;line-height:120%; padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;\">\t\r\n\t\t<div
style=\"font-size:12px;line-height:14px;color:#555555;font-family:Arial, 'Helvetica Neue' , Helvetica, sans-serif;text-align:left;\">
<p style=\"margin: 0;font-size: 14px;line-height: 17px;text-align: center\"><span style=\"color: rgb(255, 255, 255); font-size: 24px; line-height: 28px;\">The New Drag and Drop Editor is Here!</span></p>
<p style=\"margin: 0;font-size: 14px;line-height: 17px;text-align: center\"><span style=\"color: rgb(255, 255, 255); font-size: 24px; line-height: 28px;\"><br data-mce-bogus=\"1\" /></span></p>
<p style=\"margin: 0;font-size: 14px;line-height: 17px;text-align: center\"><span style=\"color: rgb(153, 153, 153); font-size: 12px; line-height: 14px;\">Our amazing email editor with built in responsive design has now
become even better, giving you full control over rows and columns</span></p>
</div>\t\r\n\t</div>\r\n\t
<!--[if mso]></td></tr></table><![endif]-->\r\n
</div>\r\n \r\n
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->\r\n
</div>\r\n </div>\r\n
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\r\n
</div>\r\n </div>\r\n </div>
<div style=\"background-color:transparent;\">\r\n <div style=\"Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;\" class=\"block-grid \">
\r\n <div style=\"border-collapse: collapse;display: table;width: 100%;background-color:transparent;\">\r\n
<!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"background-color:transparent;\" align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: 500px;\"><tr class=\"layout-full-width\" style=\"background-color:transparent;\"><![endif]-->\r\n\r\n
<!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\" width:500px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><![endif]-->\r\n
<div class=\"col num12\" style=\"min-width: 320px;max-width: 500px;display: table-cell;vertical-align: top;\">\r\n <div style=\"background-color: transparent; width: 100% !important;\">\r\n
<!--[if (!mso)&(!IE)]><!-->
<div style=\"border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left:
0px;\">
<!--<![endif]-->\r\n\r\n \r\n <div align=\"center\" class=\"img-container center autowidth \" style=\"padding-right: 0px; padding-left: 0px;\">\r\n
<!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr style=\"line-height:0px;line-height:0px;\"><td style=\"padding-right: 0px; padding-left: 0px;\" align=\"center\"><![endif]-->\r\n <img
class=\"center autowidth \" align=\"center\" border=\"0\"
src=\"https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/5f31cabf-16c2-4052-9f5b-d56ecc263451/19d6011e77a68eb06404e2a9c880f02d63fb23f0/Screen%20Shot%202018-07-26%20at%2015.24.15.png\" alt=\"Image\"
title=\"Image\" style=\"outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: 0;height: auto;float: none;width: 100%;max-width: 290px\" width=\"290\" />\r\n
<!--[if mso]></td></tr></table><![endif]-->\r\n
</div>\r\n\r\n \r\n
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->\r\n
</div>\r\n </div>\r\n
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\r\n
</div>\r\n </div>\r\n </div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->\r\n\t\t
</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n
<!--[if (mso)|(IE)]></div><![endif]-->\r\n\r\n\r\n<div style=\"font-size: 0\"><img src=\"{{ system.url.open }}\" width=\"1\" height=\"1\" alt=\"\" /></div>
<script type="text/javascript">
(function() {
window['__CF$cv$params'] = {
r: '6687c8e3de4bff5c',
m: 'db8b985a09bc15203ac561fea2216eb08d726e7f-1625227971-1800-AQvlpXDUbQREv7TVIu0htHTwTtDVg169iOSRMsaGazI4IJCVi7SOjrqvWSENT2aBXYj6ot/R3ugyNd3sHHpK7DG3qylnl8x0YVxuDxveoIh/k9rsMC7WFA6xT1V+E+m+zGzWiJKBVE8gQ68OZ0gh6HqULPmUTPw7ynqG3E6I0cy0WcDTJWyKfXPv4v5etuPmYmy74nG7L6iXMJCnE7qlSjg=',
s: [0x34a3fec001, 0x7fcd524cd3],
}
})();
</script>
</body>
</html>