Your AMP Email Wrapper

Now, copy the below code and paste it into your ActionKit instance. Find the email wrapper called "AMP Template With Sidebar" and paste this code into the "AMP Template" field in that wrapper.

<!doctype html>
<html amp4email>
    <head>
        <meta charset="utf-8">
        <style amp4email-boilerplate>body{visibility:hidden}</style>
        <style amp-custom>
            p { margin: 1em 0;line-height: 150%; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-wrap: break-word;}
            li, code { margin: 1em 0;line-height: 150%; }
            code { color: #8c0404; }
            .appleLinks a { color:#dd0000; text-decoration: none; }
            .appleLinks a:hover { text-decoration: underline; color: #be0000; }
            [class="ak-pagemargins"] { width: 30px; }
            [class="ak-mainbody"]{
                color: #4b4b4b;
                line-height: 150%;
                overflow-wrap: break-word;
                }
            [class="ak-mainbody"] a, [class="ak-innerbody"] a, a {
                color: #dd0000;
                text-decoration: none;
                }
            [class="ak-mainbody"] a:hover,[class="ak-innerbody"] a:hover, a:hover {
                text-decoration: underline;
                color: #be0000;
                }
            [class="ak-mainbody"] a[class="ak-button"] {
                -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; background-color: #dd0000; display: inline-block; padding: 0 22px; margin-bottom: 10px; line-height: 200%; height: 32px; color: #fff; font-size: 16px; font-weight: bold; text-transform: uppercase; font-family: Helvetica, Arial, sans-serif; text-align: center; text-decoration: none;
                }
            [class="ak-mainbody"] a[class="ak-button"]:hover {
                background-color: #be0000;
                }
            [class="ak-sidebar"] {
                width:280px;
                color: #4b4b4b;
                overflow-wrap: break-word;
                margin-left: 15px;
                }
            [class="ak-sidebar"] p {
                line-height:125%;
                }
            [class="ak-mainbody"] a img {
                border: 0;
                }
            [class="ak-sidebar"] img {
                max-width: 260px;
            /*    {% if custom_fields.sidebar_text|is_nonblank %}{% else %}margin-top: 15px;{% endif %} */
                }
            [class="ak-social"] {
                border: 0;
                height: 25px;
                padding: 0;
                margin: 0;
                }
            sup { vertical-align: top; position: relative; top: -0.5em; }
            sub { vertical-align: baseline; position: relative; top: 0.4em; }

@media only screen and (max-device-width: 480px), (max-width: 640px){
                [class="ak-mainbody"],[class="ak-innerbody"] {
                    font-size: 16px;
                    line-height: 150%;
                    }
                [class="ak-pagemargins"] {
                    width: 20px;
                    }
                [class="ak-mainbody"] {
                    border-top: 0;
                    }
                [class="ak-sidebar"] {
                    width: 100%;
                    max-width: 100%;
                    margin: 10px 0;
                    display: block;
                    }
                [class="ak-header-logo"] {
                    max-width: 80%;
                    padding: 0;
                    }
                td[class="ak-topmargin"] {
                    height: 8px;
                    line-height: 0%;
                    font-size: 0;
                    }
                img { max-width: 100%; }
                }
        </style>
        
        <script async src="https://cdn.ampproject.org/v0.js"></script>

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
        <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>    </head>
<body on="tap:openform.submit" tabIndex=1 role="tabpanel" style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 150%; height: 100%; width: 100%; margin: 0; padding: 0;color:#4b4b4b;">{% if preview_text %}<span style="display:none; font-size:0px; color:#fff; line-height:0%; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">{{ preview_text }}</span>{% endif %}
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #e7ebed; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%; margin: 0 auto; padding:0;"><tbody><tr><td width="5%" style="min-width:5px; font-size:0px;"> </td><td width="90%"><table width="700" cellspacing="0" cellpadding="0" border="0" style="background-color: #e7ebed; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%; max-width: 700px; margin: 0 auto; line-height:150%; border-collapse: collapse;">
<tbody><tr><td style="background-color: #e7ebed; width:30px; font-size: 0; margin: 0; padding: 0;" class="ak-pagemargins" width="30"> </td>
<td valign="top" style="background-color: #e7ebed; margin: 0 auto; padding: 12px 0 8px 0; text-align: center; line-height:100%;">
{% if wrapper_custom_fields.header_logo %}<amp-img src="{{ wrapper_custom_fields.header_logo }}" width="168" height="37" style="margin: 0; padding: 0; max-width: 100%; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 24px; font-weight: bold; line-height: 100%; text-align: center; height: 37px; width: 168px;" alt="logo" class="ak-header-logo" />{% endif %}</td><td style="background-color: #e7ebed; width: 30px; font-size: 0; margin: 0; padding: 0;" class="ak-pagemargins" width="30"> </td></tr><tr class="ak-mainbody"><td style="background-color: #ffffff; width: 30px;" class="ak-pagemargins" width="30"> </td><td valign="top" align="center"><table cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; max-width: 700px; min-width: 100%; width: 100%;" class="ak-innerbody">
<tbody><tr><td valign="top" style="background-color: #ffffff; height: 12px;" class="ak-topmargin"> </td></tr><tr><td valign="top" style="background-color: #ffffff;color: #4b4b4b; font-size: 15px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: left; line-height: 150%;" class="ak-mainbody">

{% if custom_fields.sidebar_text|is_nonblank or custom_fields.featured_image %}
    <table class="ak-sidebar" style="max-width: 300px; width: 300px;" cellspacing="0" cellpadding="0" align="right">
        <tbody>
            <tr>
                <td>
                    <table style="box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; margin-bottom: 5px; min-width: 220px;" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">
                        <tbody>
                            <tr>
                                <td style="padding: 0 16px; text-align: center; line-height: 125%; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow-wrap: break-word;">
{% include_tmpl custom_fields.sidebar_text %}
                                
{% if custom_fields.featured_image %}{% if custom_fields.link_url %}<a href="{% include_tmpl custom_fields.link_url %}">{% endif %}<amp-img src="{% include_tmpl custom_fields.featured_image %}" alt="Take Action!" width="260" height="183" />{% if custom_fields.link_url %}</a>{% endif %}<br>{% endif %}
                                    <p>{% if custom_fields.link_url %}<a class="ak-button" style="-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; background-color: #dd0000; display: inline-block; padding: 0 22px; margin-bottom: 10px; line-height: 200%; height: 32px; color: #fff; font-size: 16px; font-weight: bold; text-transform: uppercase; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; text-decoration: none;" href="{% include_tmpl custom_fields.link_url %}"> Take Action! </a>{% endif %}</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
{% endif %}

{% block content %}{% endblock content %}

{% if custom_fields.link_url %}<p style="text-align: center;"><a class="ak-button" style="-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; background-color: #dd0000; display: inline-block; padding: 0 22px; margin-bottom: 10px; line-height: 200%; height: 32px; color: #fff; font-size: 16px; font-weight: bold; text-transform: uppercase; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; text-decoration: none;" href="{% include_tmpl custom_fields.link_url %}"> Take Action! </a></p>{% endif %}

{% if custom_fields.signature %}
    <p>Sincerely,<br>
{% include_tmpl custom_fields.signature %}
    </p>
{% endif %}

{% if custom_fields.references|is_nonblank %}<br>{% include_tmpl custom_fields.references %}{% endif %}
                    </td></tr><tr><td style="background-color:#ffffff; height: 30px;" colspan="3"> </td></tr></tbody></table>
                    </td>
                    <td style="background-color: #ffffff; width: 40px; width: 30px;" class="ak-pagemargins" width="30"> </td>
                </tr>
                <tr>
                    <td valign="top" style="background-color: #e7ebed; height: 30px;"> </td>
                    <td valign="top" style="background-color: #e7ebed;"> </td>
                    <td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
                </tr>
                <tr>
                    <td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
                    <td style="background-color: #e7ebed; text-align: center;">
                        {% if wrapper_custom_fields.header_logo %}<amp-img src="{{ wrapper_custom_fields.header_logo }}" class="ak-header-logo" width="107" height="24" alt="logo" style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px;">{% endif %}</td>
                    <td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
                </tr>
                <tr>
                    <td style="background-color: #e7ebed; width: 30px; height: 30px;" class="ak-pagemargins" width="30"> </td>
                    <td valign="top" style="background-color: #e7ebed;"> </td>
                    <td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
                </tr><tr>
                    <td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
                    <td style="background-color: #e7ebed; text-align: center;">
    <p style="font-family: font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: #4b4b4b;">
{% block unsubscribe %}{% endblock %}</p>
                    </td>
                    <td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
                </tr>
                <tr>
                    <td style="background-color: #e7ebed; width: 30px; height: 30px;" class="ak-pagemargins" width="30"> </td>
                    <td valign="top" style="background-color: #e7ebed;"> </td>
                    <td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
                </tr>
            </tbody>
        </table>
    </td><td width="5%" style="min-width: 5px; font-size: 0px;"> </td></tr></tbody></table>
    <br>
<template type="amp-mustache">{% comment %}An empty amp-mustache template will silence any errors if an amp-mustache template isnt used in the AMP HTML Body.{% endcomment %}</template>
 </body>
</html>

Getting Started with AMP Emails in ActionKit

Your AMP Email Wrapper

Your AMP Email Body