Accelerated Mobile Pages In ZeptoMail

AMP is proprietary Google technology built to speed up the loading time of mobile websites. The Accelerated Mobile Pages prioritises certain contents over third-party assets like ads and displays them first. This is done using AMP-specific tags for elements that require the said preference over the rest. This way, the contents load faster without compromising the wait time. The rest will be displayed gradually

Email AMP

AMP has been incorporated to suit for emails to improve interactivity and include dynamic content for the users. This involves adding carousels, accordions and other responsive elements to help users dynamically change and access content within the emails. This way, you can leverage the functionality of AMP for the emails you send. Given below are some of the features you can add using AMP :

Use dynamic content :
Content that will be updated according to the user action is called a dynamic content. For example, if you add a poll within your emails, you will be able to see the number of participants of the poll. This value will be updated whenever a new candidate takes part in it. This way, you can add forms which can be filled out, use multiple widgets, fetch and render JSON data and so on.
Change email structure :
The format of an email body can be quite rigid. You can use AMP to customise it by adding side-bars, accordions, carousels and so on.

Google's document on AMP for emails gives you information on email markup, structure and various HTML components available for AMP emails.

To start sending emails using AMP, you need to register with Google. Follow the instructions provided here to get started.

Using AMP to send emails in ZeptoMail

You can include dynamic components within the transactional emails you send using AMP. By simply including the AMP HTML code within your email API, along with the corresponding tags, you can add the dynamic elements within your email body. It should be noted that you can use AMP only while sending emails using APIs.

The mandatory parameters to be included within your AMP code are :

Rule	Description
Starts with <!doctype html>	Standard HTML format.
<html ⚡4email> or <html amp4email>	Used to identify that the page has AMP content.
<head> and <body>	These tags are mandatory in AMP although they are optional in HTML.
<meta charset="utf-8">	Should be added immediately after the <head> tag.
<script async src="https: // cdn.ampproject.org/v0.js"></script>	Should be included inside the <head> tag.
<style amp4email-boilerplate>body{visibility:hidden}</style>	This boiler plate should be added to hide content until AMP JS is loaded.

Here is an example showing how you can include AMP within your code:

Copiedcurl "https://api.zeptomail.com/v1.1/email" \
-X POST \
-H "Accept: application/json" \
-H "Content-Type: application/json" \
-H "Authorization:Zoho-enczapikey ***" \
-d '{
	"bounce_address":"bounces@info.zylker.com",
	"from": { "address": "accounts@info.zylker.com",  "name": "Paula"},
	"to": [{"email_address": {"address": "rudra.d@zylker.com","name": "Rudra"}}],
	"subject":"Account Confirmation",
	"htmlbody":"<div><b> Kindly click on Verify Account to confirm your account </b></div>",
	"ampbody" : "<!doctype html> <html ⚡4email 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> Kindly click on Verify Account to confirm your account. </body> </html>"
	}'

The details about request body parameters can be found here.

Further, you can test the emails you send using the steps mentioned here.