All Collections
Templates
How to create AMP emails
How to create AMP emails

Learn more about how to set up your account and templates to use AMP elements and send interactive, dynamic emails.

Support Team avatar
Written by Support Team
Updated over a week ago

What is AMP?

AMP (Accelerated Mobile Pages) is a new technology that allows you to embed interactive elements (eg. carousel, accordion menus, confirmations, purchase buttons) into your email messages. Your recipients will no longer have to be redirected to your website in order to interact with such content.

It will allow you to personalize your emails even more by accessing a wider range of dynamic content other than a regular HTML-only email. AMP emails, in addition to supporting HTML, include a limited JavaScript markup that allows adding the AMP elements.

Most of the main email providers like Gmail, Yahoo Mail, Outlook or Mail.ru support AMP.

Converting to AMP

Converting your email HTML body to AMP will require some code changes, e.g. changing an <img> tag to <amp-img>. More information about how specific code should be modified for AMP compatibility can be found in the official AMP documentation: https://amp.dev/documentation/components/

Requirements

There are several requirements that have to be fulfilled in order for AMP emails to be displayed properly in the recipient's inbox:

  • Your sender domain has to be fully verified with Elastic Email's SPF, DKIM and DMARC. Learn more here.

  • All links need to begin with "HTTPS" - this includes tracking links, so make sure that HTTPS is set on your tracking domain - alternatively, you can disable tracking for these emails, so the non-https tracking links are not included. (Note! This will stop opens and clicks tracking, so use with caution.)

  • Your email must contain a fallback HTML version (text/html) or a plain text version (text/plain) in addition to the AMP MIME part (text/x-amp-html).

  • Some email providers require a whitelisting process before they allow AMP emails to be displayed for their clients, for example Gmail: https://developers.google.com/gmail/ampemail/ 

It's recommended to test your AMP content to see if it converts correctly for your own Gmail inbox before continuing with Elastic Email's AMP implementation (or whitelisting process): https://amp.gmail.dev/playground/

Using AMP with Elastic Email

There are two methods for AMP elements to be included in your email's body:

Via dashboard

Enter your template, click on the "Advanced options" button and choose "Edit AMP body":

A popup will appear where you can enter your AMP body. It will now be available for every recipient that is able to view AMP content. Everybody else will see the fallback HTML or plain text version you have implemented as an alternative.

Via API

There are two API Calls that utilize AMPs: email/send and template/add. Both of these calls use the "bodyAmp" parameter - AMP code of your email (needs escaping).


Did this answer your question?