Design de e-mails HTML para notificações

Personalize as notificações de status de entregas com e-mails criados em HTML
Agora você pode inserir código HTML nos seus emails de notificações de entrega. Basta criar o código e colá-lo na caixa de design de mensagens de Comunicação.
O código HTML permite inserir imagens, escrever textos em diferentes formatos (negrito, itálico, sublinhado, etc.). É compatível com as etiquetas de informação que você pode inserir (por exemplo, Notas ou ID).
Um exemplo do resultado seria este:
Para obter esta mensagem, utilizamos o código que segue abaixo. Combinamos com as etiquetas de ID, VisitAddress e Tracking URL. Você pode copiá-lo e adaptá-lo ao seu gosto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /><!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!--<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {width: 600px;margin: 0 auto;}
table {border-collapse: collapse;}
table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
img {-ms-interpolation-mode: bicubic;}
</style>
<![endif]-->
<style type="text/css">
body, p, div {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
}
body {
color: #000000;
}
body a {
color: #1188E6;
text-decoration: none;
}
p { margin: 0; padding: 0; }
table.wrapper {
width:100% !important;
table-layout: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img.max-width {
max-width: 100% !important;
}
.column.of-2 {
width: 50%;
}
.column.of-3 {
width: 33.333%;
}
.column.of-4 {
width: 25%;
}
@media screen and (max-width:480px) {
.preheader .rightColumnContent,
.footer .rightColumnContent {
text-align: left !important;
}
.preheader .rightColumnContent div,
.preheader .rightColumnContent span,
.footer .rightColumnContent div,
.footer .rightColumnContent span {
text-align: left !important;
}
.preheader .rightColumnContent,
.preheader .leftColumnContent {
font-size: 80% !important;
padding: 5px 0;
}
table.wrapper-mobile {
width: 100% !important;
table-layout: fixed;
}
img.max-width {
height: auto !important;
max-width: 480px !important;
}
a.bulletproof-button {
display: block !important;
width: auto !important;
font-size: 80%;
padding-left: 0 !important;
padding-right: 0 !important;
}
.columns {
width: 100% !important;
}
.column {
display: block !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
</style>
<!--user entered Head Start-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<style>
.body{font-family: 'Open Sans', sans-serif;}
.h1{
font-family: 'Open Sans', sans-serif;
font-size: 60px
font-weight: 800;
color: #586BA4;
line-height: 40px;
text-transform: uppercase;
}
.p{
font-family: 'Open Sans', Sans-Serif;
font: 16px, normal, #333;
}
</style>
<!--End Head user entered-->
</head>
<body>
<center class="wrapper" data-link-color="#1188E6" data-body-style="font-size: 14px; font-family: arial,helvetica,sans-serif; color: #000000; background-color: #efefef;">
<div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#efefef">
<tr>
<td valign="top" bgcolor="#efefef" width="100%">
<table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--[if mso]>
<center>
<table><tr><td width="600">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center">
<tr>
<td role="modules-container" style="padding: 0px 0px 0px 0px; color: #000000; text-align: left;" bgcolor="#ffffff" width="100%" align="left">
<table class="module preheader preheader-hide" role="module" data-type="preheader" border="0" cellpadding="0" cellspacing="0" width="100%"
style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
<tr>
<td role="module-content">
<p></p>
</td>
</tr>
</table>
<table class="module"
role="module"
data-type="spacer"
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
style="table-layout: fixed;">
<tr>
<td style="padding:0px 0px 15px 0px;"
role="module-content"
bgcolor="#efefef">
</td>
</tr>
</table>
<table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="font-size:6px;line-height:10px;padding:0px 0px 0px 0px;background-color:#efefef;" valign="top" align="left">
<a href="http://simpleroute.com"><img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;padding-left:18px;max-width:30% !important;width:30%;height:auto !important;" src="https://marketing-image-production.s3.amazonaws.com/uploads/90648e7b5a747e72a0bc1129cad1465521dffd1034f31ef5f3f9bfe23e685b6fc7f19caec76211477c2f8c14c644742f21d553e468a379eea47a911cce98a626.png" alt="logo-simpliroute" width="180"></a>
</td>
</tr>
</table>
<table class="module"
role="module"
data-type="spacer"
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
style="table-layout: fixed;">
<tr>
<td style="padding:0px 0px 15px 0px;"
role="module-content"
bgcolor="#efefef">
</td>
</tr>
</table>
<table class="module"
role="module"
data-type="spacer"
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
style="table-layout: fixed;">
<tr>
<td style="padding:0px 0px 30px 0px;"
role="module-content"
bgcolor="">
</td>
</tr>
</table>
<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="padding:0px 18px 0px 18px;line-height:16px;text-align:inherit;"
height="100%"
valign="top"
bgcolor="">
<p><span style="font-size: 15px; text-align: inherit; background-color: transparent;">Estimado cliente,</span></p>
<p><span style="font-size: 15px; text-align: inherit; background-color: transparent;">Tu pedido con número de identificación {ID_REFERENCE} ha sido programado y<strong> ser&aacute; entregado ma&ntilde;ana</strong> en la dirección {VISIT_ADDRESS}. </span></p>
<p></p>
<p>Para m&aacute;s informaci&oacute;n, puede escribirnos a <strong>[email protected]</strong> o consultar el siguiente enlace: {TRACKING_URL}</p>
</td>
</tr>
</table>
<p></p>
<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td style="padding:0px 18px 0px 18px;line-height:16px;text-align:inherit;"
height="100%"
valign="top"
bgcolor="">
<p style="color: rgb(51, 51, 51); font-size: 12px; font-style: italic; text-align: center;">Est&aacute;s recibiendo este correo porque te suscribiste a nuestras notificaciones de entrega.</p>
</td>
</tr>
</table>
<table class="module"
role="module"
data-type="spacer"
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
style="table-layout: fixed;">
<tr>
<td style="padding:0px 0px 30px 0px;"
role="module-content"
bgcolor="">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>