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