Menu
I've been trying to create a html template for Mandrill, but I don't have the faintest clue on how to create dynamic content. I would like to send Wordpress and Woocommerce e-mails through Mandrill, but firstly need to be able to create a working html template.
Can anyone help or give me a working example of a Mandrill html template?
235
The Mandrill docs, even the section on templates, aren't particularly helpful, as they assume you know how to code templates.
The easiest way to make a template (especially if you have no idea what you're doing) is to sign up with Mailchimp (free). Use the drag and drop template editor to make the desired template, then copy the code and paste it into the Mandrill template editor. Or connect your Mandrill and Mailchimp accounts and let Mandrill copy your templates over for you.
Here's a very basic example template anyway:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Facebook sharing information tags -->
<meta property="og:title" content="*|SUBJECT|*">
<title>*|SUBJECT|*</title>
<style type="text/css">
#outlook a{
padding:0;
}
body{
width:100% !important;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
body{
-webkit-text-size-adjust:none;
}
body{
margin:0;
padding:0;
}
img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
table td{
border-collapse:collapse;
}
#backgroundTable{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
/*
@tab Page
@section background color
@tip Set the background color for your email. You may want to choose one that matches your company's branding.
@theme page
*/
body,#backgroundTable{
/*@editable*/background-color:#ffffff;
}
/*
@tab Page
@section email border
@tip Set the border for your email.
*/
#templateContainer{
/*@editable*/border:1px solid #f6f6f6;
}
/*
@tab Page
@section heading 1
@tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
@style heading 1
*/
h1,.h1{
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:34px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Page
@section heading 2
@tip Set the styling for all second-level headings in your emails.
@style heading 2
*/
h2,.h2{
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:30px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Page
@section heading 3
@tip Set the styling for all third-level headings in your emails.
@style heading 3
*/
h3,.h3{
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:26px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Page
@section heading 4
@tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
@style heading 4
*/
h4,.h4{
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:22px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Header
@section preheader style
@tip Set the background color for your email's preheader area.
@theme page
*/
#templatePreheader{
/*@editable*/background-color:#FAFAFA;
}
/*
@tab Header
@section preheader text
@tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent div{
/*@editable*/color:#505050;
/*@editable*/font-family:Arial;
/*@editable*/font-size:10px;
/*@editable*/line-height:100%;
/*@editable*/text-align:left;
}
/*
@tab Header
@section preheader link
@tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent div a:link,.preheaderContent div a:visited,.preheaderContent div a .yshortcuts {
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Header
@section header style
@tip Set the background color and border for your email's header area.
@theme header
*/
#templateHeader{
/*@editable*/background-color:#FFFFFF;
/*@editable*/border-bottom:0;
}
/*
@tab Header
@section header text
@tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent{
/*@editable*/color:#202020;
/*@editable*/font-family:Arial;
/*@editable*/font-size:34px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
/*@editable*/padding:0;
/*@editable*/text-align:center;
/*@editable*/vertical-align:middle;
}
/*
@tab Header
@section header link
@tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
.headerContent a:link,.headerContent a:visited,.headerContent a .yshortcuts {
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px !important;
}
/*
@tab Body
@section body style
@tip Set the background color for your email's body area.
*/
#templateContainer,.bodyContent{
/*@editable*/background-color:#FFFFFF;
}
/*
@tab Body
@section body text
@tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
@theme main
*/
.bodyContent div{
/*@editable*/color:#505050;
/*@editable*/font-family:Arial;
/*@editable*/font-size:14px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Body
@section body link
@tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent div a:link,.bodyContent div a:visited,.bodyContent div a .yshortcuts {
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
}
/*
@tab Footer
@section footer style
@tip Set the background color and top border for your email's footer area.
@theme footer
*/
#templateFooter{
/*@editable*/background-color:#FFFFFF;
/*@editable*/border-top:0;
}
/*
@tab Footer
@section footer text
@tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
@theme footer
*/
.footerContent div{
/*@editable*/color:#707070;
/*@editable*/font-family:Arial;
/*@editable*/font-size:12px;
/*@editable*/line-height:125%;
/*@editable*/text-align:left;
}
/*
@tab Footer
@section footer link
@tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts {
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.footerContent img{
display:inline;
}
/*
@tab Footer
@section social bar style
@tip Set the background color and border for your email's footer social bar.
@theme footer
*/
#social{
/*@editable*/background-color:#FAFAFA;
/*@editable*/border:0;
}
/*
@tab Footer
@section social bar style
@tip Set the background color and border for your email's footer social bar.
*/
#social div{
/*@editable*/text-align:center;
}
/*
@tab Footer
@section utility bar style
@tip Set the background color and border for your email's footer utility bar.
@theme footer
*/
#utility{
/*@editable*/background-color:#FFFFFF;
/*@editable*/border:0;
}
/*
@tab Footer
@section utility bar style
@tip Set the background color and border for your email's footer utility bar.
*/
#utility div{
/*@editable*/text-align:center;
}
#monkeyRewards img{
max-width:190px;
}
</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div mc:edit="std_preheader_content">Preheader content</div>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="190">
<div mc:edit="std_preheader_links">
Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="">
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div mc:edit="std_content00">Hi *|FNAME|*<strong>,</strong><br>
<br>
Content goes here<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" style="width: 370px;" width="408">
<tbody>
<tr>
<td nowrap="nowrap" style="width: 152px; height: 20px;">Login ID:</td>
<td nowrap="nowrap" style="width: 217px; height: 20px;"> *|LOGINID|*</td>
</tr>
<tr>
<td nowrap="nowrap" style="width: 152px; height: 20px;">Password:</td>
<td nowrap="nowrap" style="width: 217px; height: 20px;"> *|PASSWORD|*</td>
</tr>
<tr>
<td nowrap="nowrap" style="width: 152px; height: 20px;">Account number:</td>
<td nowrap="nowrap" style="width: 217px; height: 20px;"> *|ACCNUM|*</td>
</tr>
</tbody>
</table>
<br>
<br>
Kind regards,<br>
<br>
<strong></strong></div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top" width="350">
<div mc:edit="std_footer">
<em>Footer Content</em>
<br>
</div>
</td>
<td valign="top" width="190" id="monkeyRewards">
<div mc:edit="monkeyrewards">
*|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" id="utility">
<div mc:edit="std_utility">
<a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</center>
</body>
</html>
The bits starting with *| and ending with |* are merge tags. See the Mandrill help page for assistance with them
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
