How to Build AMP Emails with Stripo

Wanna keep up with the times and send AMP-powered emails over to your recipients?

Gmail in its AMP emails guidelines specified that when building such emails with an email playground, you will need to add some code elements to email header and to its doctype! Stripo does it all for you — no coding skills needed at all.

Google also offers its Gmail AMP for Email Playground where you can code AMP emails from header to footer. But the emails you build with it, render in the Gmail’s desktop clients only. Eventually, Yahoo, Outlook.com, Mail.ru will also support AMP for emails. But what about the rest of your customers?

Today, we’re gonna show you how to build AMP emails with Stripo that render correctly in all email clients.

Let us remind you that in order to be allowed to send out AMP emails, you need to get registered with Google. In the previous post, we shared our personal experience on how we got whitelisted with Google.

How to build AMP-powered email with Stripo

Currently, there are three ways of building AMP emails with Stripo:

Way 1. Using the Stripo's AMP blocks

Today, we offer image AMP-carousel block. This means that you do not need to make any changes to codes. No HTML skills required. 

You just drag and drop this block into your HTML email template.

So, to build AMP carousel, you need to:

• drag the AMP-carousel block into your HTML email template;
• then set the "preview" image width. Preview images are the small images under your carousel. They annotate how many slides there are in the carousel and what they are;

• add as many slides in your carousel as you need;
• remember to add links to all slides. By clicking them, your users will be directed to respective pages on your website.

Important to note:

This element by default will be shown only to those recipients whose email clients do support AMP for emails. For other users, you need to build a fallback: this could be a banner and a bunch of product cards aka product content modules.

Remember to enable them for the HTML version of your email only.

Please, find the full manual in this dedicated blog post.

All other elements of your emails should be enabled for both versions of your email.

This summer, we'll release two more AMP-blocks.

Way 2. Using the code from Gmail Playground.

This way requires just a few steps:

Step 1. Building a traditional HTML email template.

To do so, you may either build one from scratch by dragging blocks, or you may use any of our 300 ready-to-use email templates

Step 2. Building AMP element with Gmail AMP for Email Playground.

Google offers a wide variety of prepared AMP elements.

We’re going to use the AMP-carousel element.

• in the Gmail playground, click the dropdown menu to choose AMP-carousel;

• once you’ve clicked it, to the left in the code editor, you will see the AMP-carousel code. Find the following line in the code:

<amp-img src="https://www.google.com/images/background/p1.jpg" width="800" height="600" layout="responsive"></amp-img>” line and remove it, as it just specifies the source of the images used below

• now, in this code sample, please edit the image width, that was set by default, from 800 to 600 pixels as this is the most common width size;

• change the height from 600 to 480 pixels to save the image ratio;

• now, replace all the links wrapped in the <href> attributes with the links to the necessary images you host on your website or any other image hosting site;

• highlight and copy the embed code with 4 images in AMP-image carousel;

<div class="images">

    <amp-carousel width="600" height="480" layout="responsive" type="slides">

       <amp-img src="https://image.freepik.com/free-photo/school-backpack-school-supplies-with-chalkboard-background_53476-528.jpg" width="600" height="480" alt="a sample image"></amp-img>

       <amp-img src="https://image.freepik.com/free-photo/stylish-teenage-workspace-with-yellow-backpack-reading-lamp_23-2147878350.jpg" width="600" height="480" alt="another sample image"></amp-img>

       <amp-img src="https://image.freepik.com/free-photo/father-leads-little-child-school-boy-go-hand-hand-parent-son-with-backpack-back_90791-15.jpg" width="600" height="480" alt="and another sample image"></amp-img>

       <amp-img src="https://image.freepik.com/free-photo/rear-view-group-diverse-kids-wearing-backpack_53876-75383.jpg" width="600" height="480" alt="and another sample image"></amp-img>

   </amp-carousel>

</div>

Step 3. Pasting the embed code in Stripo

In Stripo, drag the 1-column structure in your prepared template;

• in the setting panel, in the “include in” section, set “⚡HTML”;

This means that AMP image carousel will be shown only in those email clients that support AMP;

• drop the HTML block in it;

• double click it to open the “HTML code editor”;

• replace the “Insert your HTML code” with the embed code;

• in Google Gmail Playground, copy the script that specifies what AMP element you’re about to use. It’s located in email head below the <style> attributes before the closing</head> tag;

• if you, like us, are going to use AMP-carousel, here’s the script to embed:

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

• open HTML code editor of entire email template by clicking the “Code Editor” button above the template;

• insert the embed script right above the closing </head> attribute;

• close the code editor. Done!

Those recipients whose email clients support AMP, will see this AMP image carousel, while others — will not. Hence, we need to create a perfect banner for them, too, as a fallback.

To do so, you need to:

• drag the one-column structure into your template;

• in the settings panel in the “Include in” section, choose the “HTML” version of your email — by doing this, your banner will be enabled only to those recipients, whose email clients do not support AMP;

• build the banner.

In the Stripo editor, you can easily see what elements are enabled for the traditional HTML version of your email, what elements are enabled for the AMP HTML version of your email, and which will be shown in both versions.

The containers/elements marked with “HTML” will be shown only to those recipients whose email clients do not support AMP for Emails. While the ⚡HTML elements will be shown only to those recipients whose email clients do support AMP.

Elements/containers that have no marks, will work for both versions of the email.

Way 3. Using Stripo's prepared AMP templates

Stripo offers a number of ready-to-use AMP email templates. They contain modules with AMP-carousel, with AMP-lightbox, with AMP-accordion. Image AMP-carousel is meant to display a few images/banners in one screen without the necessity to scroll down. The lightbox effect is meant to zoom in a certain image after clicking on it; is used in promo emails for product cards mostly. And AMP-accordion is meant to structurize email copy by tabs or other logical groups. Once you click any tab, its content drops down becomes visible. 

So, to build AMP emails by using our prepared templates, you need to:

• pick the one that meets your current campaign's needs best;
• sign in to save and to work with it;

• find this template by the creation date;

• edit emails content, such as logo, footer, etc.;

Important to note:

Please remember that you can drag the aforementioned modules into templates from your personal content library/storage to build emails easier and faster (if you've previously saved them).

• click the AMPHMTL element in the template to edit the former;

• if you work with imagery, then in the settings panel, you will be asked to replace images and include proper links to them the way you normally work with images,

• if you need to work with AMP-accordion, then by clicking it,  you will have to make some changes directly in the code, where all textual component is written in white, and styles like fonts, paddings, etc. are wrapped in the "style" attribute.

Important to note:

Not only do all the aforementioned email templates contain AMP elements, but also fallbacks to them. Which is why you may rest assured: those recipients whose email clients do not support Gmail AMP for emails, will see the full traditional HTML version of your emails. 

Now that your AMP email is built, you need to preview it.

How to preview AMP emails with Stripo

This is a very essential step at building any kind of emails: AMP HTML or traditional HTML emails.

• to preview AMP HTML email with Stripo, click the preview button above the template;

• in the settings panel in the preview email mode, click the necessary version of your email;

• to check out the other version of your email, just switch the button

Important to note:

AMP elements now render on some mobile devices. As of November 21, Gmail on Android and iOS does support AMP; Mail.ru also supports AMP on mobile devices.

For more details on how AMP emails work on mobile devices, please refer to this blog post.

How to test AMP emails with Stripo

To be able to send test emails from Stripo, you need to enable us to send test emails to your account.

If this is your personal account, you need to:

• in Gmail, go to the settings panel - click the "Settings" icon;
• in the dropdown menu, click the "Settings" section;

• in the new window, in the "General" section, find the "Dynamic content" and open the "Developer settings";

• paste this email address info@stripo-test.email;

• click save.

If this is your corporate account with G-suite, you need to:

As of July 2, all the G-suite users are also able to receive AMP emails.

Ask your manager to enable "Dynamic emails" for you. And then you will only need to add our address to receive test AMP-powered emails from Stripo.

Please, be advised: changes come into effect within 24 hours.

How to export AMP email to your ESP

Currently, only 4 ESPs support AMP for Emails:

1. eSputnik — via the API method only. The SMTP method will be added soon;
2. Amazon SES and PinPoint — via the API method only;
3. SparkPost — via the SMTP and API methods;
4. SendGrid — via the API method only.

You cannot export AMP emails from Stripo to any of the aforementioned ESPs. But you can download your email as AMP HTML file and import it into the necessary ESP.

So, how to export your AMP email from Stripo:

• click the “Export button”;

• among the multiple options, select “AMPHTML”;

• in the pop-up window, click the “HTML-file” button. Then, all images will be hosted on our servers;

• in your ESP, open the "code your own email" section;
• drag the downloaded AMP HTML file in this section;
• done!

We want to remind you that prior to sending AMP emails out to recipients, you need to get whitelisted with Google.

Email clients that support AMP emails:

• Gmail — yes;
• Mail.ru — yes;
• Outlook — coming soon;
• Yahoo and AOL are also working on it — coming this Fall.

Important:

Remember that your AMP HTML email that you've built with, contains the AMP HTML version and the traditional HTML version of your email. 

Those recipients' whose email clients do no support AMP, will see the traditional HTML email; while those whose email clients do support AMP, will see your sophisticated emails. Remember, we learned to hide AMP-elements in regular emails?

More information on how to craft featured emails, please find on our AMP email builder page.