Personaliza las notificaciones de estado de entregas con e-mails diseñados en HTML
Ahora puedes insertar código HTML en tus emails de notificaciones de entrega. Sólo tienes que crear el código y pegarlo en la caja de diseño de mensajes de Comunicación.
El código HTML te permitirá insertar imágenes, escribir texto en diferentes formatos (negrita, cursiva, subrayado, etc). Es compatible con las etiquetas de información que puedes insertar (por ejemplo, Notas o ID).
Un ejemplo del resultado sería este:
Para obtener este mensaje, utilizamos el código que sigue a continuación. Lo combinamos con etiquetas de ID, VisitAddress y Tracking URL. Puedes copiarlo y adaptarlo a tu gusto:
<!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á entregado mañana</strong> en la dirección {VISIT_ADDRESS}. </span></p>
<p></p>
<p>Para más informació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á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>