Interactive email template
Order tracking status lookup
Let customers check shipment status in-email with an order or tracking code.
In-email tracking can cut support load for where-is-my-order questions.
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)
Order tracking 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>Order tracking status lookup</title>
</head>
<body>
<section class="card">
<h1>Track your shipment</h1>
<p class="muted">Enter your order ID to get the latest shipping event.</p>
<form method="post" action-xhr="https://amp.mailneo.co/demo/order-track" target="_top">
<input type="text" name="orderId" required placeholder="Order ID" 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;">Order {{orderId}}</p>
<p class="muted" style="margin:6px 0 0;">Status: {{status}}</p>
<p class="muted" style="margin:6px 0 0;">Last update: {{updatedAt}}</p>
</div>
</template>
</div>
</form>
<amp-accordion disable-session-states style="margin-top:10px;">
<section>
<h4>Need help?</h4>
<div><p class="muted">Reply to this email with your order ID for support.</p></div>
</section>
</amp-accordion>
</section>
</body>
</html>AMP components used
use cases
Post-purchase service
Reduce support tickets by surfacing shipment milestones.
Industry: Ecommerce
Carrier delay updates
Send proactive notices during weather or network disruptions.
gotchas
PII control
Mask sensitive address data and expose only essential tracking details.
Rate limits
Protect tracking APIs with per-user throttling to avoid abuse.
conversion uplift data
No conversion benchmark was attached to this template yet.