Interactive email template
Mystery-box reveal
Use collapsible boxes so users open one section to reveal an offer or bundle.
Mystery-box layouts are simple to run and still feel interactive in AMP inboxes.
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)
Mystery-box reveal
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-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.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>Mystery-box reveal</title>
</head>
<body>
<section class="card">
<h1>Open one mystery box</h1>
<p class="muted">Each panel reveals one reward. Terms apply at checkout.</p>
<amp-accordion disable-session-states>
<section>
<h4>Box A</h4>
<div><p>10% off accessories</p></div>
</section>
<section>
<h4>Box B</h4>
<div><p>Free expedited shipping</p></div>
</section>
<section>
<h4>Box C</h4>
<div><p>Bundle upgrade at no extra cost</p></div>
</section>
</amp-accordion>
<amp-fit-text width="320" height="60" layout="fixed">Open one box only. Reward activates at checkout.</amp-fit-text>
</section>
</body>
</html>AMP components used
use cases
Product launch teaser
Hide multiple promo options until the subscriber opens one box.
Industry: Beauty
New subscriber welcome
Turn first purchase perks into an inbox interaction.
gotchas
Content length
Keep accordion panel copy short so layout remains stable on narrow screens.
Legal copy
Add expiration and exclusion notes next to each reward panel.
conversion uplift data
No conversion benchmark was attached to this template yet.