| Note |
|---|
The ESN template provided, has been tested across multiple email clients to optimize readability across hardware and applications
(Gmail, Outlook, Telstra Mail, Applle Mail, Samsung Mail) ; (Phone, Tablet, Computer)To ensure this user experience is prioritised and that your customers receive a business centered design we offer the below customisation)How can an ESN be customised?
Logo
We can add a logo of choice to the ESN, preferably with a transparent background and around 600px wide. A logo of any height will fit in the ESN.
The buttons are usually changed to match the logo or compliment it if the logo is too light for the text.
The contact button content can be changed. This can be set to send and email to your enquiries email or ours. The button will start an email with the consignment number in the subject line.
The Track My Order button will take the customer to our tracking page, and auto-populate the consignment number, for easy tracking.
The contact us section can have additional contact information, phone number, an alternative email address, etc.
Tags are the words, on the ESN template, that are surrounded by the curly brackets { }. They are used to extract the consignment data and automatically add them to the ESN. The below table are the tags that can be used and what they are used for.
Name | Tag | Details |
|---|
All References: | {AllRefs} | If you have multiple references, they will display with this tag |
Carrier Name: | {CarrierName} | Carrier name |
Consignment Number: | {Connote} | Connote number |
Description: | {Description} | Number of items, weight and volume, usually displayed 1@7kg (0.013m3) |
ETA: | {ETA} | The Estimated Time of Arrival of the consignment, if there are no ETAs loaded into the system, that are provided by the carrier, this will just show as {ETA} |
Instructions: | {Instructions} | The delivery instructions |
Receiver Address: | {Receiver} | Receiver Details |
Reference: | {Reference} | For single reference numbers |
Sender Name: | {Sender} | The account the consignment was created under |
ESN Template
Image Removed
ESN Template Code
| Code Block |
|---|
| language | xml |
|---|
| theme | RDark |
|---|
| linenumbers | true |
|---|
| collapse | true |
|---|
|
<html>
<style type="text/css">
/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell {
height: 100% !important;
margin: 0;efm
padding: 0;
width: 100% !important;
}
table {
border-collapse: collapse;
}
img, a img {
border: 0;
outline: none;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
p {
margin: 1em 0;
}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
/* Force Hotmail/Outlook.com to display line heights normally. */
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up. */
#outlook a {
padding: 0;
}
/* Force Outlook 2007 and up to provide a "view in browser" message. */
img {
-ms-interpolation-mode: bicubic;
}
/* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell {
padding-top: 20px;
padding-Right: 20px;
padding-Left: 20px;
}
.flexibleImage {
height: auto;
}
.bottomShim {
padding-bottom: 20px;
}
.imageContent, .imageContentLast {
padding-bottom: 20px;
}
.nestedContainerCell {
padding-top: 20px;
padding-Right: 20px;
padding-Left: 20px;
}
/*////// GENERAL STYLES //////*/
body, #bodyTable {
background-color: #F5F5F5;
}
#bodyCell {
padding-top: 40px;
padding-bottom: 40px;
}
#emailBody {
background-color: #F7F7F7;
border: 1px solid #DDDDDD;
border-collapse: separate;
border-radius: 4px;
}
h1, h2, h3, h4, h5, h6 {
color: #202020;
font-family: Helvetica;
font-size: 20px;
line-height: 125%;
text-align: Left;
}
.textContent, .textContentLast {
color: #404040;
font-family: Helvetica;
font-size: 16px;
line-height: 125%;
text-align: Left;
padding-bottom: 20px;
}
.textContent a, .textContentLast a {
color: #2C9AB7;
text-decoration: underline;
}
.nestedContainer {
background-color: #E5E5E5;
border: 1px solid #CCCCCC;
}
.emailButton {
background-color: #442983;
border-collapse: separate;
border-radius: 4px;
}
.buttonContent {
color: #FFFFFF;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
line-height: 100%;
padding: 15px;
text-align: center;
}
.buttonContent a {
color: #FFFFFF;
display: block;
text-decoration: none;
}
.emailCalendar {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}
.emailCalendarMonth {
background-color: #2C9AB7;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.emailCalendarDay {
color: #2C9AB7;
font-family: Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: bold;
line-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
/*////// MOBILE STYLES //////*/
@media only screen and (max-width: 600px) {
/*////// CLIENT-SPECIFIC STYLES //////*/
body {
width: 100% !important;
min-width: 100% !important;
}
/* Force iOS Mail to render the email at full width. */
/*////// FRAMEWORK STYLES //////*/
/*
CSS selectors are written in attribute
selector format to prevent Yahoo Mail
from rendering media query styles on
desktop.
*/
table[id="emailBody"], table[class="flexibleContainer"] {
width: 100% !important;
}
/*
The following style rule makes any
image classed with 'flexibleImage'
fluid when the query activates.
Make sure you add an inline max-width
to those images to prevent them
from blowing out.
*/
img[class="flexibleImage"] {
height: auto !important;
width: 100% !important;
}
/*
Make buttons in the email span the
full width of their container, allowing
for left- or right-handed ease of use.
*/
table[class="emailButton"] {
width: 100% !important;
}
td[class="buttonContent"] {
padding: 0 !important;
}
td[class="buttonContent"] a {
padding: 15px !important;
}
td[class="textContentLast"], td[class="imageContentLast"] {
padding-top: 20px !important;
}
/*////// GENERAL STYLES //////*/
td[id="bodyCell"] {
padding-top: 10px !important;
padding-Right: 10px !important;
padding-Left: 10px !important;
}
}
</style>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- EMAIL CONTAINER // -->
<!--
The table "emailBody" is the email's container.
Its width can be set to 100% for a color band
that spans the width of the page.
-->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="emailBody">
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The table cell imageContent has padding
applied to the bottom as part of the framework,
ensuring images space correctly in Android Gmail.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="imageContent">
<img src="http://enodo-ftp.cloudapp.net/Distributors/Images/ESN/efm_logo_purple_small.png"class="flexibleImage" style="max-width:560px;" />
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<!--
To move or duplicate any of the design patterns
in this email, simply move or copy the entire
MODULE ROW section for each content block.
-->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<!--
The centering table keeps the content
tables centered in the emailBody table,
in case its width is set to 100%.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<!--
The flexible container has a set width
that gets overridden by the media query.
Most content tables within can then be
given 100% widths.
-->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Success!</h3>
<br />
Your recent purchase has been despatched today and is on its way.
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<!--
To move or duplicate any of the design patterns
in this email, simply move or copy the entire
MODULE ROW section for each content block.
-->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td align="center" valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Shipping To:</h3>
<br />
{Receiver}
<br />
{Instructions}
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td align="center" valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Tracking:</h3>
<br />
Your recent order will be delivered to you by {CarrierName} under tracking number {Connote}.
</td>
</tr>
<tr>
<td align="center" valign="top" class="bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="260" class="emailButton">
<tr>
<td align="center" valign="middle" class="buttonContent">
<a href="https://trackingtool.efmlogistics.com.au/?id={Connote}&account=118562" target="_blank">Track My Order</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
<tr>
<td align="center" valign="top" class="nestedContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
<h3>Questions:</h3>
<br />
Contact Us:<br/>
</td>
</tr>
<tr>
<td align="center" valign="top" class="bottomShim">
<table border="0" cellpadding="0" cellspacing="0" width="260" class="emailButton">
<tr>
<td align="center" valign="middle" class="buttonContent">
<a href="mailto:Aus.Sales@AFLglobal.com?subject=Consignment Enquiry">Email Us</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<!--
To move or duplicate any of the design patterns
in this email, simply move or copy the entire
MODULE ROW section for each content block.
-->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<!--
The centering table keeps the content
tables centered in the emailBody table,
in case its width is set to 100%.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<!--
The flexible container has a set width
that gets overridden by the media query.
Most content tables within can then be
given 100% widths.
-->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="textContent">
Thank you for your recent transaction. Your order has been despatched.
<br /><br />
<h3>{Sender}</h3>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="600" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The table cell imageContent has padding
applied to the bottom as part of the framework,
ensuring images space correctly in Android Gmail.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="imageContent">
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
</table>
<!-- // EMAIL CONTAINER -->
</td>
</tr>
</table>
</center>
</body>
</html>