We're excited for you to be among the first to send AMP messages with Customer.io. This doc contains some quick instructions for getting started.

How to get started

In order to send an AMP message, you need to be sending from a domain that:

Once your domain is passing, you will be able to configure the AMP part of your emails:

  1. Create the email in Customer.io. That content will be the version used as the fallback if AMP isn't supported.
  2. Add the AMP version of the message via our beta-api. Note, you will not see the AMP content anywhere in your account.
  3. Ensure that ALL linked items in your message use the HTTPS (https://...) protocol. Enabling HTTPS Link Tracking per the instructions above will ensure all TRACKED links use HTTPS but you will need to ensure any untracked links also use HTTPS.
  4. Send the message like any other. People who allow dynamic content will see your AMP version and everyone else will see your fallback content.

Add the AMP MIME part via API

You can modify existing message templates using the PUT endpoint for either a newsletter body:

curl -XPUT <https://beta-api.customer.io/v1/api/newsletters/2/contents/7> -H"Authorization: Bearer YOUR-APP-API-KEY" -H"Content-Type: application/json" -d'{"body_amp": "<!doctype html>\\n<html ⚡4email>\\n<head>\\n  <meta charset=\\"utf-8\\">\\n  <script async src=\\"<https://cdn.ampproject.org/v0.js\\>"></script>\\n  <script async custom-element=\\"amp-carousel\\" src=\\"<https://cdn.ampproject.org/v0/amp-carousel-0.1.js\\>"></script>\\n  <style amp4email-boilerplate>body{visibility:hidden}</style>\\n  <style amp-custom>\\n    h1 {\\n      margin: 1rem;\\n    }\\n  </style>\\n</head>\\n<body>\\n <h1>New Year, New AMP {{ customer.email }}\\n <amp-carousel id=\\"carousel-with-preview\\"\\n    width=\\"800\\"\\n    height=\\"400\\"\\n    layout=\\"responsive\\"\\n    type=\\"slides\\"\\n    on=\\"slideChange:AMP.setState({currentCat: event.index})\\">\\n  <amp-img layout=\\"fill\\" src=\\"<https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg\\>"  alt=\\"photo courtesy of Unsplash\\"></amp-img>\\n  <amp-img layout=\\"fill\\" src=\\"<https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg\\>"  alt=\\"photo courtesy of Unsplash\\"></amp-img>\\n  <amp-img layout=\\"fill\\" src=\\"<https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg\\>"  alt=\\"photo courtesy of Unsplash\\"></amp-img>\\n  <amp-img layout=\\"fill\\" src=\\"<https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg\\>"  alt=\\"photo courtesy of Unsplash\\"></amp-img>\\n </amp-carousel>\\n</body>\\n</html>\\n"}' | jq

or a message in a campaign: