Mailmodo: Build Interactive Emails With AMP To Increase Engagement
Our inboxes are overflowing with terrible emails… so if your business has an extensive subscriber base and really hopes to take your email open and click-through rates (CTR) up a notch, interactivity is critical. One solution that’s building momentum is the use of Accelerated Mobile Page technology in HTML email.
AMP for Email
The ability to use AMP technology to create more dynamic and interactive email content is a huge advancement in email technology. AMP for email is not the same as regular AMP for websites, and there are some restrictions on what can be done in email (eg. video and audio are not currently supported).
AMP support in email is not widely available across all email clients, but it is supported by some of the major email clients such as Gmail, Outlook.com, and Yahoo! Mail. It’s also important to note that even if an email client supports AMP, it may not be enabled by default or may require the recipient to take some action to enable it.
AMP for Email works by providing a set of pre-built components that can be used to create interactive and dynamic email content. These components include things like forms, quizzes, image carousels, and more, and they can be used to create engaging and interactive emails that provide a better user experience for recipients.
Example AMP HTML Email
Here’s an example of an AMP email that includes a subscription form. Note that the script embeds are NOT included when sending this email, it’s just for building and testing the solution outside your email marketing platform.
<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp4email>
.subscribe-form {
display: none;
}
</style>
</head>
<body>
<amp-img src="https://example.com/amp-header.jpg" alt="Header image"></amp-img>
<div amp4email>
<p>Please enable AMP for Email to view this content.</p>
</div>
<form method="post"
action-xhr="https://example.com/subscribe"
target="_top"
class="subscribe-form"
id="subscribe-form"
novalidate
[submit-error]="errorMessage.show"
[submit-success]="successMessage.hide">
<h2>Subscribe to our newsletter</h2>
<label>
Email:
<input type="email"
name="email"
required>
</label>
<div submit-success>
<template type="amp-mustache">
Success! Thank you for subscribing.
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Error: {{message}}
</template>
</div>
<input type="submit" value="Subscribe">
</form>
<amp4email fallback="https://example.com/non-amp-email.html">
<p>View the non-AMP version of this email.</p>
</amp4email>
</body>
</html>The form uses the amp-form custom element to handle form submission and validation. When the user submits the form, the form data is sent to the URL specified in the action-xhr attribute, which should be a server endpoint that handles the form submission. In the form tag, we’ve added the novalidate attribute to disable client-side form validation, and we’ve used the [] syntax to set the submit-success and submit-error templates dynamically. The submit-success and submit-error sections define templates that are displayed to the user when the form submission succeeds or fails, respectively.
Fallback HTML When There’s NO AMP Support
You can provide alternative content for users who do not have AMP enabled or who are using an email client that does not support it. To do this, you can use the amp4email attribute to specify a fallback URL that points to a non-AMP version of the email. In the example above, you can see both a style tag that will hide the AMP HTML if it’s not supported as well as a fallback URL where HTML content can be retrieved and displayed.
Mailmodo: Code-Free AMP Email Marketing and Automation
Mailmodo is designed to help you leverage the power of AMP Emails for creating a better user experience with a simplified email marketing setup so that you can increase engagement and conversion rates… some directly out of the inbox!
Mailmodo Features Include:
- Easy & Coding Free AMP Emails – drag & drop AMP blocks in a WYSIWYG editor to design emails. You can personalize the content for each user and even upload your own HTML file or other code snippets.
- Email Automation – Automate drip sequences based on user behavior and market data to send emails. Visual journey builder to help you design user journey maps with drag and drop. Analyze user behavior and optimize drip sequences and journey maps.
- High Deliverability – Send bulk emails with Mailmodo’s SMTP or add your own delivery service. Integrations with AWS SES, Sendgrid, or Pepipost. You can also get managed and dedicated IPs.
- Auto trigger transactional emails – Trigger emails automatically by user action like signup, purchase, or cart abandonment. You can segment users based on opens, clicks, and submissions. Mailmodo enables you to manage and update all of your transitional emails directly on their platform.
- All reports on a single dashboard – visualize opens, clicks, unsubscribes, submissions, and subject line A/B testing, with the ability to export all your data in CSV format.
Productized integrations with external e-commerce, customer relationship management (CRM), and other platforms are available as well… including Shopify, Salesforce, MoEngage, Netcore, CleverTap, Pipedrive, WebEngage, and more.
Sign Up For Mailmodo For Free!
Disclosure: Martech Zone is an affiliate of Mailmodo and we are using affiliate links throughout this article.
