# AMP for email

Engage your audience with dynamic content and reduce the amount of times you have to link your customers out. [AMP](https://amp.dev/about/email) lets your customers complete surveys, RSVP to events, respond to comments, and more from within your emails.

**You can craft AMP components directly in the [code editor of Design Studio](/journeys/code-editor-overview/) or in the [advanced code editor](/journeys/email-code-editor/).** Send test emails to ensure those with the ability to [view dynamic content](#requirements-sending-receiving), and those without, will see what you expect. You also have the option to send AMP content through our App API.

## Requirements for sending and receiving AMP content[](#requirements-sending-receiving)

To send an AMP message, you need to send from a domain that:

*   Passes SPF
*   Passes DKIM
*   Has a [DMARC that passes DKIM](https://www.mailgun.com/blog/deliverability/implement-dmarc/) (optional, but recommended)
*   Has [HTTPS Link Tracking enabled](/journeys/https-link-verification/) in Customer.io
*   Supports HTTPS delivery per [Google’s requirements](https://developers.google.com/gmail/ampemail/security-requirements)
*   Is [registered with to send AMP](https://amp.dev/documentation/guides-and-tutorials/email/start/email_sender_distribution#create-and-send-production-ready-amp-email); this sets you up to send AMP emails to Gmail, Yahoo, and Mail.ru users.

Keep in mind, you can complete all of the above, but that doesn’t mean all of your customers will be able to view AMP content. These are the [ESPs](https://amp.dev/support/faq/email-support) that currently support AMP for email.

**To view AMP content in an email, the recipient must also enable dynamic content in their settings.** Consult ESPs, like [Gmail](https://developers.google.com/gmail/ampemail/testing-dynamic-email), for exact guidelines.

## Register to send AMP[](#register-to-send-amp)

To send AMP emails, you need to fill out a sender registration form and make sure you follow policies for providers that support AMP—Google, Yahoo, and Mail.ru. See [Register to send AMP](https://amp.dev/documentation/guides-and-tutorials/email/start/email_sender_distribution#create-and-send-production-ready-amp-email) for more information.

## Add AMP content to email[](#add-amp-content-to-email)

Once your domain passes, you can configure AMP within the code editor of your Customer.io emails or via API. To create an AMP version of an email that uses our drag-n-drop or rich text editors, you will need to utilize our App API.

### Create AMP content in workflows[](#create-amp-content-in-workflows)

Use the [code editor of Design Studio](/journeys/code-editor-overview/) or the [advanced code editor](/journeys/email-code-editor/) to create AMP within your workspace.

 Enable the experimental feature AMP for Email if you use the advanced code editor

To create AMP within the advanced code editor, you must have both of these experimental features enabled in [Account Settings](https://fly.customer.io/settings/experimental-features): Advanced Code Editor and AMP for Email. You do not need to enable experimental features to use AMP in Design Studio.

[![In the center of the page is the code editor for an email. There are two tabs at the top of the editor: HTML and AMP. AMP is selected and the editor shows an AMP template with the preview displaying on the right hand panel.](https://docs.customer.io/images/amp-for-email-1.png)](#a86c614e4604eafadec96f9580df6bea-lightbox)

The AMP tab in the advanced code editor

You can preview your AMP components on the right of the editor as well as [send test emails](/journeys/amp-for-email/#send-test-emails) to your account.

AMP uses its own language as well as HTML. Most HTML tags are supported with AMP but some, like [images](https://amp.dev/documentation/guides-and-tutorials/email/start/create_email?redirected#include-an-image), have exceptions. Inserting an image in our code editor will format it properly with `<amp-img>`.

**If you are new to AMP, check out the [playground and templates](https://playground.amp.dev/) at Amp.dev to save yourself time!** Otherwise, this is the minimum template you’ll need to get started:

```fallback
<!doctype html>
<html amp4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>
    body {
      visibility:hidden
    }
  </style>
</head>
<body>
  <all message content>
</body>
</html>
```

Before sending an email with AMP components:

*   **Validate your links.** Customer.io validates [tracked links](#requirements-sending-receiving), so check that any untracked links (those that do not utilize your domain) are also valid and secure.
*   **Create an HTML fallback.** People who [allow dynamic content](#requirements-sending-receiving) will see your AMP version and everyone else will see your fallback content. Select the HTML tab beside the AMP tab to get started. The HTML and AMP editors are separate, meaning, the content you make in one tab does not generate content in the other tab.

You’ll find this email, like any other, within your message library. You’ll have the option to copy it to other campaigns, broadcasts, and transactional emails, as well. At this time, AMP does not support Customer.io’s Layouts, but you can craft the body or styling of the message as you see fit.

 Need to track personalized links?

Add [the `data-cio-tag` attribute to your links](/journeys/link-tracking#counting-link-clicks). This lets you track different individualized links in the same category, so you can gather useful metrics about clicks to things like personalized product recommendations, password reset links, customer dashboards, etc. The `data-cio-tag` takes a string representing the “group” you want to track—`<a href="http://mydomain.com?token=123abc" data-cio-tag="YOUR-LINK-GROUP-NAME">CLICK HERE</a>`

### Create AMP content via API[](#create-amp-content-via-api)

To create and update AMP content via API:

1.  Create the email in your workspace using any editor. This will be the fallback for anyone who cannot view dynamic content in their inbox.
2.  Create the AMP version of your message. Use tools like Amp.dev’s [playground](https://playground.amp.dev/) to try out components and templates and ensure they’re rendering properly.
    1.  Validate your links. Customer.io validates [tracked links](#requirements-sending-receiving), so check that any untracked links (those that do not utilize your domain) are also valid and secure.
3.  Send the request using the `body_amp` field. You can update an email through this [newsletter endpoint](/integrations/api/app/#operation/updateNewsletterVariant), this [campaign endpoint](/integrations/api/app/#operation/updateCampaignAction), or this [transactional message endpoint](/integrations/api/app/#operation/sendEmail).
    
    ```JSON
    {
     "body_amp":
       "<!doctype html>
         <html amp4email data-css-strict>
           <head>
             <meta charset=\"utf-8\">
             <script async src=\"https://cdn.ampproject.org/v0.js\"></script>
             <script async custom-element=\"amp-carousel\" src=\"https://cdn.ampproject.org/v0/amp-carousel-0.1.js\"></script>
             <style amp4email-boilerplate>
               body {
                 visibility:hidden
               }
             </style>
             <style amp-custom>
               h1 {
                 margin: 1rem
               }
             </style>
           </head>
           <body>
             <h1>
               New Year, New AMP {{ customer.email }}
             </h1>
             <amp-carousel id=\"carousel-with-preview\" width=\"800\" height=\"400\" layout=\"responsive\" type=\"slides\"     on=\"slideChange:AMP.setState({currentCat: event.index})\"> 
               <amp-img layout=\"fill\" src=\"https://amp.dev/static/img/tutorials/firstemail/photo_by_caleb_woods.jpg\"  alt=\"photo courtesy of Unsplash\"></amp-img> 
               <amp-img layout=\"fill\" src=\"https://amp.dev/static/img/tutorials/firstemail/photo_by_craig_mclaclan.jpg\"  alt=\"photo courtesy of Unsplash\"></amp-img> 
               <amp-img layout=\"fill\" src=\"https://amp.dev/static/img/tutorials/firstemail/photo_by_lightscape.jpg\"  alt=\"photo courtesy of Unsplash\"></amp-img> 
               <amp-img layout=\"fill\" src=\"https://amp.dev/static/img/tutorials/firstemail/photo_by_nick_karvounis.jpg\"  alt=\"photo courtesy of Unsplash\"></amp-img> 
             </amp-carousel> 
           </body> 
         </html>"
    }
    ```
    
4.  Send the message like any other - start your campaign, broadcast your newsletter, send your transactional email, etc.

 AMP content created via API will not appear in your workspace.

The AMP tab of the code editor only displays the content saved through the UI, not the API.

## Send test emails[](#send-test-emails)

To [send test emails](/journeys/testing-emails/) with AMP, you must first allowlist the from address in your email settings.

Test emails will display AMP content added via the code editor or the API.

## Report on interactions with AMP[](#report-on-interactions-with-amp)

Currently, there are no native metrics specifically tracking engagement with AMP content. Your metrics will, however, reflect *clicks* on AMP content if click tracking is not [disabled](/journeys/link-tracking/#how-to-disable-link-click-tracking).