Interactive email template
Spin-the-wheel discount reveal
Let subscribers spin inside the email and claim a reward code in one interaction.
Spin-to-win mechanics can lift click intent because users see a direct payoff in the inbox.
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)
Spin-the-wheel discount 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>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-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>Spin-the-wheel discount reveal</title>
</head>
<body>
<section class="card">
<h1>Spin and unlock your coupon</h1>
<p class="muted">One spin per subscriber. Reward expires in 24 hours.</p>
<amp-state id="spinState">
<script type="application/json">
{"revealed": false, "prize": "Tap spin to reveal"}
</script>
</amp-state>
<p class="pill" [text]="spinState.prize">Tap spin to reveal</p>
<p [hidden]="!spinState.revealed"><strong>Use code SPIN15 at checkout.</strong></p>
<button class="btn" on="tap:AMP.setState({spinState: {revealed: true, prize: '15% off unlocked'}})">Spin the wheel</button>
<form method="post" action-xhr="https://amp.mailneo.co/demo/spin-claim" target="_top" style="margin-top:12px;">
<input type="email" name="email" placeholder="you@example.com" required style="padding:8px;border:1px solid #d6d3d1;border-radius:6px;" />
<input type="submit" value="Send code" class="btn" style="margin-left:8px;" />
<div submit-success>
<template type="amp-mustache">
<p class="muted">Code sent to {{email}}.</p>
</template>
</div>
</form>
</section>
</body>
</html>AMP components used
use cases
Seasonal sale push
Use gamified rewards for weekend and holiday campaigns.
Industry: Ecommerce
Dormant list reactivation
Give inactive subscribers a simple reason to return.
gotchas
Reward parity
Keep coupon value and expiry aligned between AMP and fallback HTML.
Claim control
Deduplicate claims server-side so users cannot collect codes repeatedly.
conversion uplift data
No conversion benchmark was attached to this template yet.