Interactive email template
Flight status lookup
Allow travelers to submit flight number and get live departure updates.
Flight-status modules reduce friction for travel users checking delay risk.
Inbox preview
Static HTML rendering of the email body. Use it to check the layout before sending the live AMP version to a test inbox.
Mailneo demo <hello@mailneo.co>
10:42 AM (2 min ago)
Flight status lookup
to me · interactive email
code snippets
<!doctype html>
<html amp4email>
<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>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
body { margin: 0; padding: 16px; font-family: Arial, Helvetica, sans-serif; background: #fff7ed; color: #1f2937; }
.card { max-width: 560px; margin: 0 auto; padding: 16px; border: 1px solid #fed7aa; border-radius: 12px; background: #ffffff; }
h1 { margin: 0 0 8px; font-size: 24px; line-height: 30px; }
.muted { color: #6b7280; font-size: 13px; line-height: 18px; }
.btn { display: inline-block; margin-top: 10px; padding: 10px 14px; border: 0; border-radius: 8px; background: #f97316; color: #ffffff; text-decoration: none; font-weight: 700; cursor: pointer; }
.pill { display: inline-block; margin-right: 8px; margin-bottom: 8px; padding: 4px 9px; border-radius: 999px; border: 1px solid #fdba74; background: #fff7ed; font-size: 12px; }
.item { padding: 10px; border: 1px solid #fed7aa; border-radius: 10px; margin-top: 8px; }
</style>
<title>Flight status lookup</title>
</head>
<body>
<section class="card">
<h1>Track your flight</h1>
<p class="muted">Enter a flight code for departure and gate updates.</p>
<form method="post" action-xhr="https://amp.mailneo.co/demo/flight-status" target="_top">
<input type="text" name="flightCode" required placeholder="Example: AI302" style="padding:8px;border:1px solid #d6d3d1;border-radius:6px;" />
<input type="submit" value="Check status" class="btn" style="margin-left:8px;" />
<div submit-success>
<template type="amp-mustache">
<div class="item">
<p style="margin:0;font-weight:700;">{{flightCode}} · {{status}}</p>
<p class="muted" style="margin:6px 0 0;">Gate {{gate}} · Departs {{departureTime}}</p>
</div>
</template>
</div>
</form>
<amp-accordion disable-session-states style="margin-top:10px;">
<section>
<h4>Travel note</h4>
<div><p class="muted">Arrive at terminal at least 90 minutes before departure.</p></div>
</section>
</amp-accordion>
</section>
</body>
</html>AMP components used
use cases
Travel itinerary mail
Attach live status checks to booking confirmation emails.
Industry: Travel
Airline updates
Send proactive disruption notices with instant lookup.
gotchas
Data source SLA
Use providers with reliable gate and delay updates during peak hours.
Code validation
Normalize flight-code format before passing it to status APIs.
conversion uplift data
No conversion benchmark was attached to this template yet.