How to create an AMP for Email template

In this tutorial, you'll learn how to make use of custom config files in Maizzle to create interactive AMP for Email templates.

For a syntax refresher, checkout the AMP Email docs or AMP Email examples.

Want to dive right in? Checkout our AMP for Email Starter.

Layout

AMP for Email requires some special markup, so let's create an amp.html Layout and save it under src/layouts:

<!doctype html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <if condition="page.googleFonts">
    <link href="https://fonts.googleapis.com/css?family={{ page.googleFonts }}" rel="stylesheet" media="screen">
  </if>
  <if condition="page.css">
    <style amp-custom>{{{ page.css }}}</style>
  </if>
  <block name="head"></block>
</head>
<body>
  <block name="template"></block>
</body>
</html>

Template

For this tutorial, we'll use the AMP Carousel component.

Create src/templates/amp-carousel.html and add a basic AMP carousel:

<extends src="src/layouts/amp.html">
  <block name="head">
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
  </block>

  <block name="template">
    <div class="p-16">
      <div class="max-w-full">
        <amp-carousel width="600" height="400" layout="responsive" type="slides">
          <amp-img src="https://ampbyexample.com/img/image1.jpg" width="600" height="400" alt="a sample image"></amp-img>
          <amp-img src="https://ampbyexample.com/img/image2.jpg" width="600" height="400" alt="another sample image"></amp-img>
          <amp-img src="https://ampbyexample.com/img/image3.jpg" width="600" height="400" alt="and another sample image"></amp-img>
        </amp-carousel>
      </div>
    </div>
  </block>
</extends>

AMP components are initialized by adding their <script> tag inside the <block name="head"> element, as shown above.

You can then use their markup inside the <block name="template">.

CSS inlining

Inline style attributes are not allowed in AMP, so you need to disable CSS inlining.

Do it either globally, in your environment config:

// config.amp.js
module.exports = {
  inlineCSS: false
}

... or locally, in the Template's Front Matter:

---
inlineCSS: false
---

!important

AMP for Email doesn't support !important in CSS, either.

This can be easily turned off in your Tailwind config:

// tailwind.config.js
module.exports = {
  important: false,
}

However, you probably want to turn it off only for AMP templates.

You can do this with a custom build environment:

  1. Create a folder at src/templates/amp to store your ⚡4email templates

  2. Create config.amp.js:

    module.exports = {
  build: {
    destination: {
      path: 'build_amp'
    },
    templates: {
      source: 'src/templates/amp'
    },
    tailwind: {
      config: 'tailwind.amp.js'
    }
  }
}

  3. Duplicate tailwind.config.js to tailwind.amp.js and disable important :

    module.exports = {
  important: false
}

  4. Run maizzle build amp to build your ⚡4email templates.

Resources