Interactive email template
Scratch-card reveal
Mimic a scratch card with a tap reveal so subscribers see an instant prize.
A scratch-card interaction feels quick and playful, which helps promos stand out.
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)
Scratch-card 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-bind" src="https://cdn.ampproject.org/v0/amp-bind-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>Scratch-card reveal</title>
</head>
<body>
<section class="card">
<h1>Scratch to reveal today's reward</h1>
<p class="muted">Subscribers can reveal one offer in a single tap.</p>
<amp-state id="scratchState">
<script type="application/json">
{"revealed": false}
</script>
</amp-state>
<div style="padding:18px;border:2px dashed #fdba74;border-radius:10px;text-align:center;background:#fff7ed;">
<p [hidden]="scratchState.revealed" style="margin:0;font-size:20px;font-weight:700;">### ### ###</p>
<p [hidden]="!scratchState.revealed" style="margin:0;font-size:20px;font-weight:700;">Free shipping unlocked</p>
</div>
<button class="btn" on="tap:AMP.setState({scratchState: {revealed: true}})">Scratch now</button>
<p class="muted">Offer valid on orders above $50.</p>
</section>
</body>
</html>AMP components used
use cases
Flash sales
Reveal limited rewards to lift same-day revenue.
Industry: Retail
Loyalty perk
Give repeat buyers a playful perk before launch drops.
gotchas
Accessible copy
Keep reward text outside visual overlays so screen readers can announce it.
Inventory checks
If reward maps to a product, validate stock in the redemption flow.
conversion uplift data
No conversion benchmark was attached to this template yet.