Ambassify default email template
<html xmlns="http://www.w3.org/1999/xhtml"><head> | |
<meta charset="utf-8"> <!-- utf-8 works for most cases --> | |
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary --> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine --> | |
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely --> | |
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. --> | |
<!-- Web Font / @font-face : BEGIN --> | |
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. --> | |
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. --> | |
<!--[if mso]> | |
<style> | |
* { | |
font-family: sans-serif !important; | |
} | |
</style> | |
<![endif]--> | |
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ --> | |
<!--[if !mso]><!--> | |
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> --> | |
<!--<![endif]--> | |
<!-- Web Font / @font-face : END --> | |
<!-- CSS Reset --> | |
<style> | |
/* What it does: Remove spaces around the email design added by some email clients. */ | |
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */ | |
html, | |
body { | |
margin: 0 auto !important; | |
padding: 10px 0 !important; | |
height: 100% !important; | |
width: 100% !important; | |
} | |
/* What it does: Make sure Outlook does not increase line-height */ | |
body { | |
mso-line-height-rule: exactly; | |
} | |
/* What it does: Stops email clients resizing small text. */ | |
* { | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
} | |
/* What is does: Centers email on Android 4.4 */ | |
div[style*="margin: 16px 0"] { | |
margin:0 !important; | |
} | |
/* What it does: Stops Outlook from adding extra spacing to tables. */ | |
table, | |
td { | |
mso-table-lspace: 0pt !important; | |
mso-table-rspace: 0pt !important; | |
} | |
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */ | |
table { | |
border-spacing: 0 !important; | |
border-collapse: collapse !important; | |
table-layout: fixed !important; | |
margin: 0 auto !important; | |
} | |
table table table { | |
table-layout: auto; | |
} | |
/* What it does: Uses a better rendering method when resizing images in IE. */ | |
img { | |
-ms-interpolation-mode:bicubic; | |
} | |
/* What it does: A work-around for iOS meddling in triggered links. */ | |
a[x-apple-data-detectors] { | |
color:inherit !important; | |
text-decoration: underline !important; | |
} | |
/* What it does: Prevents underlining the button text in Windows 10 */ | |
.button-link { | |
text-decoration: none !important; | |
} | |
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */ | |
/* Create one of these media queries for each additional viewport size you'd like to fix */ | |
/* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */ | |
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */ | |
.email-container { | |
min-width: 375px !important; | |
} | |
} | |
</style> | |
<!-- Progressive Enhancements --> | |
<style> | |
/* What it does: Hover styles for buttons */ | |
.button-td, | |
.button-a { | |
transition: all 100ms ease-in; | |
} | |
.button-td:hover, | |
.button-a:hover { | |
background: #555555 !important; | |
border-color: #555555 !important; | |
} | |
</style> | |
<!-- General styling --> | |
<style> | |
* { | |
font-family: sans-serif; | |
} | |
.full-width { | |
width: 100%; | |
} | |
.max-width { | |
max-width: 635px; | |
} | |
.center { | |
text-align: center; | |
} | |
.email-container { | |
max-width: 635px; | |
margin: auto; | |
} | |
.header { | |
padding: 40px 0; | |
} | |
.main-container { | |
border-radius: 0 0 3px 3px; | |
} | |
.main { | |
padding:40px 40px 30px; | |
text-align: left; | |
font-size: 15px; | |
line-height: 22px; | |
} | |
.footer { | |
padding: 40px 10px; | |
font-size: 11px; | |
line-height: 12px; | |
} | |
table { | |
border: none; | |
padding: 0; | |
margin: 0; | |
} | |
td { | |
padding: 0; | |
} | |
img { | |
border: 0; | |
font-size: 15px; | |
line-height: 22px; | |
} | |
p { | |
margin: 0 0 25px 0; | |
} | |
a { | |
text-decoration: underline; | |
word-break: break-word; | |
} | |
ul li, ol li { | |
font-size: 14px; | |
line-height: 1.5; | |
} | |
.h1, .h2, .h3, .h4, .h5, .h6, .head { | |
line-height: 1.5; | |
margin: 0 0 25px 0; | |
word-wrap: break-word; | |
} | |
.h1 { font-size: 22px; } | |
.h2 { font-size: 18px; } | |
.h3 { font-size: 16px; } | |
.h4, .h5, .h6 { font-size: 14px; } | |
.button { | |
border-radius: 3px; | |
border: 1px solid rgba(0,0,0,0.2); | |
display: inline-block; | |
font-size: 15px; | |
font-weight: bold; | |
min-height: 20px; | |
padding: 9px 15px; | |
text-decoration: none; | |
} | |
.item { | |
margin: 0 0 30px 0 !important; | |
} | |
.item__title-cell { | |
word-wrap: break-word; | |
} | |
.item__content-cell p { | |
margin-bottom: 15px; | |
font-size: 15px; | |
} | |
.item__image-cell img { | |
margin: 0; | |
text-align: center; | |
font-size: 16px; | |
color: #434343; | |
max-width: 425px; | |
} | |
@media only screen and (max-width: 4000px){ | |
.item__image-cell img { | |
max-width: 425px; | |
} | |
} | |
@media only screen and (max-width: 600px){ | |
.hide-mobile { | |
display: none !important; | |
} | |
.button { | |
padding: 15px 25px; | |
} | |
.item__image-cell img { | |
height:auto !important; | |
max-width:600px !important; | |
width: 100% !important; | |
padding: 0 !important; | |
margin: 0 !important; | |
border: none !important; | |
} | |
} | |
</style> | |
<!-- Colors --> | |
<style> | |
body, .wrapper { | |
background-color: #E0E9E7; | |
} | |
.content { | |
background-color: #FFFFFF; | |
} | |
.top-border { | |
border-top: 3px solid {{ settings.color1 }}; | |
} | |
.header { | |
border-bottom: 2px solid #EFEFEF; | |
} | |
.footer { | |
color: #888888; | |
line-height: 14px; | |
} | |
.content, .content p, .content td, img { | |
color: #525252; | |
} | |
.h1, .h2, .h3, .h4, .h5, .h6, .head { | |
color: {{ settings.color1 }}; | |
} | |
a { | |
color: {{ settings.color1 }}; | |
} | |
.button { | |
background-color: {{ settings.color2 }} !important; | |
color: #FFFFFF; | |
} | |
.footer-link { | |
color: #94ada7; | |
} | |
</style> | |
</head> | |
<body> | |
<center class="wrapper full-width"> | |
<!-- extra whitespace on top --> | |
<br class="hide-mobile"> | |
<br class="hide-mobile"> | |
<!-- Visually Hidden Preheader Text : BEGIN | |
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;"> | |
(Optional) This text will appear in the inbox preview, but not the email body. | |
</div> | |
Visually Hidden Preheader Text : END --> | |
<!-- | |
Set the email width. Defined in two places: | |
1. .max-width: max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 635px. | |
2. MSO tags for Desktop Windows Outlook enforce a 635px width. | |
--> | |
<div class="email-container max-width"> | |
<!--[if mso]> | |
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="635" align="center"> | |
<tr> | |
<td> | |
<![endif]--> | |
<!-- Email Body : BEGIN --> | |
{% if settings.logo or subject or title %} | |
{% endif %} | |
<table class="center full-width max-width top-border" role="presentation" cellspacing="0" cellpadding="0" border="0"> | |
<!-- Hero Image, Flush : BEGIN --><tbody><tr> | |
<td class="content"> | |
<table class="full-width" role="presentation" cellspacing="0" cellpadding="0" border="0"> | |
<tbody><tr> | |
<td class="header center"> | |
{% if settings.logo is not empty %} | |
<img src="{{ settings.logo }}" alt="Logo" border="0" width="274" height="auto" align="center" style="width:274px;height:auto;max-width:274px;"> | |
{% elseif subject is not empty %} | |
<span class="h1">{{ subject }}</span> | |
{% elseif title is not empty %} | |
<span class="h1">{{ title }}</span> | |
{% endif %} | |
</td> | |
</tr> | |
</tbody></table> | |
</td> | |
</tr><!-- Hero Image, Flush : END --> | |
<!-- 1 Column Text + Button : BEGIN --> | |
<tr> | |
<td class="content main-container"> | |
<table class="full-width" role="presentation" cellspacing="0" cellpadding="0" border="0"> | |
<tbody><tr> | |
<td class="main"> | |
{{ text|raw }} | |
{% if items %} | |
{% for item in items %} | |
<table class="item"> | |
<tbody> | |
<tr> | |
<td class="item__title-cell"> | |
<p class="h2"><a href="{{ item.url }}">{{ item.name }}</a></p> | |
</td> | |
</tr> | |
<tr> | |
<td class="item__image-cell" align="center"> | |
<p><img src="{{ item.image }}" border="0" alt="Entry image" width="425"></p> | |
</td> | |
</tr> | |
<tr> | |
<td class="item__content-cell"> | |
<p>{{ item.description|raw }}</p> | |
</td> | |
</tr> | |
<tr> | |
<td class="item__cta-cell"> | |
<a class="button" href="{{ item.url }}"> | |
{{ item.ctaLabel|default(settings.ctaLabel)|default('Read More') }} | |
</a> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
{% endfor %} | |
{% endif %} | |
</td> | |
</tr> | |
</tbody></table> | |
</td> | |
</tr> | |
</tbody></table> | |
<!-- Email Body : END --> | |
<!-- Email Footer : BEGIN --> | |
<table class="center full-width max-width" role="presentation" cellspacing="0" cellpadding="0" border="0"> | |
<tbody><tr> | |
<td class="footer full-width center"> | |
{% if profile.email %} | |
{{ settings.sendTo }} <a href="mailto:{{ profile.email }}" class="footer-link">{{ profile.email }}</a> <br> | |
{% endif %} | |
{{ settings.copyright }} <br> | |
{{ settings.reason }} <br> | |
{{ settings.companyDetails }} <br><br> | |
<a href="{{ web_archive().url }}" class="footer-link web-link">{{ settings.webarchiveLabel|default('View as Web Page') }}</a> | |
{% if unsubscribeLink %} | |
<br> | |
<a href="{{ unsubscribeLink }}" class="footer-link unsubscribe">{{ settings.unsubscribeLabel|default('Unsubscribe') }}</a> | |
{% endif %} | |
</td> | |
</tr> | |
</tbody></table> | |
<!-- Email Footer : END --> | |
<!--[if mso]> | |
</td> | |
</tr> | |
</table> | |
<![endif]--> | |
</div> | |
</center> | |
<!-- extra whitespace at bottom --> | |
<br class="hide-mobile"> | |
<br class="hide-mobile"> | |
<script type="application/x-amb-template-config">[ | |
{ | |
"id": "color1", | |
"type": "color", | |
"label": "Key color", | |
"description": "Main color of the template", | |
"language": false, | |
"value": "#1BBD8D" | |
}, | |
{ | |
"id": "color2", | |
"type": "color", | |
"label": "Accent color", | |
"description": "Secondary color of the template", | |
"language": false, | |
"value": "#7b4faf" | |
}, | |
{ | |
"id": "logo", | |
"type": "image", | |
"label": "Header logo", | |
"description": "Logo to use in the header", | |
"language": false, | |
"value": "" | |
}, | |
{ | |
"id": "ctaLabel", | |
"type": "text", | |
"label": "Button call to action", | |
"description": "The text to show on a read more button", | |
"language": false, | |
"value": "Read More" | |
}, | |
{ | |
"id": "unsubscribeLabel", | |
"type": "text", | |
"label": "Unsubscribe text", | |
"description": "The text shown on the unsubscribe link", | |
"language": false, | |
"value": "Unsubscribe" | |
}, | |
{ | |
"id": "webarchiveLabel", | |
"type": "text", | |
"label": "Webpage version text", | |
"description": "The text shown on the link to the web page version of the email", | |
"language": false, | |
"value": "View as Web Page" | |
}, | |
{ | |
"id": "copyright", | |
"type": "text", | |
"label": "Copyright message", | |
"description": "Footer copyright message", | |
"language": false, | |
"value": "Copyright © 2017 Company, All rights reserved." | |
}, | |
{ | |
"id": "reason", | |
"type": "text", | |
"label": "Reason message", | |
"description": "Footer reason message why user is receiving emails", | |
"language": false, | |
"value": "You are receiving this e-mail because you registered through our website." | |
}, | |
{ | |
"id": "companyDetails", | |
"type": "text", | |
"label": "Company address", | |
"description": "Show company address in the footer", | |
"language": false, | |
"value": "Your company address here" | |
}, | |
{ | |
"id": "sendTo", | |
"type": "text", | |
"label": "Send To", | |
"description": "Text to indicate that this message was sent to a specific email address", | |
"language": false, | |
"value": "This email was sent to" | |
} | |
]</script> | |
{{ trackingPixel|raw }} | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment