AMP Carousel

  1. What is AMP for Email?
  2. How AMP for email works
  3. Activating the AMP Carousel in BEE
  4. Using workspaces for AMP
  5. How to use the AMP carousel
  6. Creating the HTML fallback
  7. FAQs on the AMP Carousel
  8. Disable the AMP Carousel for specific customers
  9. What you need to do to send AMP emails
  10. What your end users need to do to send AMP emails

What is AMP for Email?

AMP is an open source, web component framework, maintained by the OpenJS Foundation with significant support by Google. Its goal is to create great experiences across the web, focusing on interactivity and speed.

 

One of the most innovative parts in this framework is the addition of interactive elements in emails, to enable readers to take action directly in the inbox. It can also be used to fetch up-to-date information and present it each time an email is opened.

How AMP for email works

Traditionally, a marketing or a transactional email is a multipart message, with two different parts delivered as different MIME types.

  • HTML: this is what the vast majority of email clients support. It is also the usual output of the BEE Plugin.
  • Text: Originally, this was the only way to send emails. When the HTML MIME type was rolled out, not all email clients supported HTML, or readers could set their client to stick to the Text version. The text part still acts as a fallback for the HTML part. BEE Plugin does not produce this MIME type.

AMP for Email works by creating AMP markup that looks like HTML but is a new specification. That code is written in a separate email file, delivered using a third, additional MIME type (on top of existing HTML and text types). We’ll provide a second, AMPHTML document when there’s AMP content in the email saved in BEE Plugin.

The AMPHTML version will be delivered only to the inboxes of service providers that support AMP (currently Gmail and mail.ru). All other clients will fallback to the HTML version.

Please note that adding AMP content in BEE is only possible through our AMP-powered widgets. This means that we currently do not support adding AMPHTML markup directly into the message. Our first AMP content block is the AMP Carousel.

The AMP Carousel is made available to BEE Plugin customers as OFF by default, and must be activated in the BEE Plugin developer portal.

To do so:

  • Login into the developer portal
  • Click Details next to the application you want to configure
    • We recommend you first try the AMP carousel under a DEV or QA application
  • Click view more under Application configuration.
  • In the AMP Content section, toggle Enable AMP Carousel ON and click the Save button to activate Commenting for the application.

 

Next, to activate the AMP Carousel when launching BEE Plugin, you will need to initialize the editor with an AMP-compatible workspace.

Using workspaces for AMP

We recommend you start by initializing BEE with a “mixed” workspace, which is the most straightforward way of testing out the AMP Carousel. This is a simple parameter that will:

  • activate the AMP Carousel block, in the Content tab;
  • add a Hide on AMP/HTML property in the “block options” section of content blocks. This will be essential when creating AMP emails, to manage content visibility and fallbacks.

In addition, when the message contains AMP content, you will:

  • see an additional switch between the HTML and the AMP version in the message preview;
  • receive an additional AMPHTML document when the OnSave method is fired.

Here is how to load BEE Plugin with a “mixed” workspace:

 




type ClientConfig = {
  workspace?: {
    type:'default'|'mixed'|'amp_only'|'html_only'
  }
  // ....
}

const beeConfig: ClientConfig = {
  workspace:{
    type:'mixed'
  }
  // ....
}


//Create the instance 
function BeePlugin.create(token, beeConfig, (beePluginInstance) => { 
  //.... 
}


If the workspace is loaded successfully, a onLoadWorkspace(workspace) callback is triggered.




//SUCCESS 
onLoadWorkspace: function (workspace) {
  console.log(`workspace: ${workspace} has been loaded`);
},


Click here to learn more about what workspaces are, and the additional workspaces you can use for AMP content.

Loading a template with AMP content

If no workspace is set when loading the editor, AMP widgets are not visible in the Content tab. However, if a message or template containing AMP is loaded, BEE sends an onWarning callback to your application. At that point, you may decide to switch to an AMP-compatible workspace, using the loadWorkspace method.

The Carousel content tile will appear in the Content tab after enabling it in the Developer portal and loading the editor with an AMP-compatible workspace, as described above.

 

To start creating a carousel, users need to drag and drop the carousel block to the stage. By clicking on “browse” or dropping an image file in the block, they can start adding images, or as they are called in this context, “slides”.

The carousel looks best using images with the same size. However, it is possible to mix sizes in the slides: in that case, the logic that drives how the carousel is rendered is that the first slide will determine the ratio of the entire carousel. The slides that follow will be adapted to that ratio.

Beyond this, remember that images will be adapted to fill the width of the carousel block, so if users choose an image less wide than the carousel, it will be stretched to fill it.

For each slide, users can:

  • set an alternate text, in case the slide doesn’t load or email client blocks images;
  • set a link, so that clicking or tapping on the slide takes recipients to a specific destination;
  • rearrange the slides position in the carousel, by dragging the slide card inside the content properties panel;
  • Change image or delete the slide, by using the controls in the slide card.

There are two additional properties for a carousel:

  • Autoplay, to enable automatic scrolling between slides, setting the inverval in seconds between each slide (the autoplay stops if the recipient interacts with the carousel).
  • Dot navigation, to add a dot for each slide, so that the subscriber can jump to different images without the need to scroll using the arrows. The color of the dots can be defined by the user.

The carousel can be previewed right inside the editing stage, using the left and right arrows in the AMP carousel block:

 

 

For a full preview, using real AMPHTML, users just need to hit Preview, and they can switch between the AMP and the HTML version, both on mobile and desktop.

Creating the HTML fallback

When using AMP content, it’s important to create fallback for email clients that don’t support AMP. This can be easily obtained by using the new “Hide on AMP/HTML” widget, available on all blocks as a content property.

It is very similar to the “Hide on Desktop/Mobile” control. Users can add the content for the HTML fallback and mark it as “Hide on AMP”. Inside the stage, a visual cue in the outline of the block will identify the block as hidden on AMP.

 

If there’s any other part of the email that they want to keep only for AMP readers, besides the AMP carousel, they can mark it as “Hide on HTML”.

What image formats are supported?

There are no particular limitations. You can use any type of image that already works with the standard Image block (GIFs included). Please note that if you have a custom file system provider that limits the image types that can be loaded in BEE, it will reflect on the AMP carousel as well.

Can I edit an image used as a carousel slide?

No, at the moment it’s not possible to use the image editor. You might work around this limitation by editing the image in a standard Image block and then adding it to the carousel.

Are there any suggestions for image sizes?

The best way to build a carousel is to use images with the same size, or at least respecting the same image ratio. In addition, the first slide should be large at least as the carousel block, to avoid image stretching.

Why am I getting an INVALID_AMP email in the inbox when I send a test email with AMP content?

AMP is a versatile, but pretty strict framework, and it will not render messages that don’t respect its validation protocol. The most common validation error is related to invalid HREF value in links (e.g., no URL, invalid or missing protocol, or incorrect URL composition).

To validate an AMP message before sending it out, it is necessary that all post-processing steps are performed (e.g., substitution of text variables that may impact link validation). Since BEE uses a replacement syntax and doesn’t handle substitutions, we can’t currently provide a built-in validation without triggering false positives. However, nothing prevents you from adding a validation service in your application before sending out AMP emails.

Once you turn on the feature in the developer portal, you may want to disable AMP Carousel for some customers. You can do so via the client-side configuration document that you feed to BEE Plugin when initializing the editor.

Why? Because you may decide to make the feature available to customers of your application:

  • depending on the subscription plan that they are on (i.e. you could push users to a higher plan based on the ability to use AMP);
  • depending on the purchase of an optional feature (same);
  • only if they are “beta” customers, so they see it while keeping it hidden from the rest of your users.

Here’s how to do so:

  • Enable AMP Carousel in the developer portal, as mentioned above.
  • Configure the ‘default’ workspace in the beeConfig document, so that AMP cannot be used (more details here). As an alternative, if you don’t configure a workspace BEE will be loaded with the default workspace as well.

What you need to do to send AMP emails

  • Your app must save the additional AMPHTML version of the email, when returned by BEE, the same way it already saves the HTML version.
  • Your sending infrastructure must handle delivering an additional MIME type for AMP – this typically involves also becoming an authorized sender for dynamic emails.
    • In alternative, you can leverage one of the existing ESPs that already support sending AMP emails via SMTP or API, such as Amazon SES, Mailgun and Sparkpost. See the full list list here.
  • You should advise end-users on creating fallback for AMP content, due to limited client support for AMP – optional, but highly recommended.
    • For example, if they create an image carousel with AMP, they should also add some images for the HTML version. BEE will allow to hide content for the AMP version with a new “Hide on AMP” content property.

What your end users need to do to send AMP emails

The email sender – i.e. the end user of your application – needs to:

    • Have domain authentication in place (SPF, DKIM, DMARC) for the domain they use to send emails with your app.
    • Register with Google and mail.ru as an authorized sender for dynamic emails, so that AMP emails will be rendered in the inbox of recipients who use these clients.
      • Each email client has a separate registration process.
      • Each email address that will be used to send AMP emails address needs to be authorized individually.
      • These registration processes usually involve
        • Meeting the client’s bulk sender guidelines
        • Sending a real, production-quality AMP email, from your production servers to a registration address.
        • Filling out a registration form after sending the email.