Interactive email template
Claw-machine prize picker
Offer a toy-machine style picker where a subscriber chooses and confirms one prize.
Claw-machine patterns feel familiar and can boost interaction for younger segments.
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)
Claw-machine prize picker
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-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.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>Claw-machine prize picker</title>
</head>
<body>
<section class="card">
<h1>Drop the claw and pick a prize</h1>
<p class="muted">Select one option to prepare your reward.</p>
<amp-state id="clawState">
<script type="application/json">
{"pick": "none"}
</script>
</amp-state>
<amp-selector layout="container" on="select:AMP.setState({clawState: {pick: event.targetOption}})">
<span option="wireless-earbuds" class="pill">Earbuds</span>
<span option="gift-wrap" class="pill">Gift wrap</span>
<span option="bonus-points" class="pill">Bonus points</span>
</amp-selector>
<p class="muted">Selected: <span [text]="clawState.pick">none</span></p>
<button class="btn" on="tap:AMP.setState({clawState: {pick: 'bonus-points'}})">Drop claw</button>
</section>
</body>
</html>AMP components used
use cases
Loyalty retention
Use prize choice to reactivate members before points expire.
Industry: Retail
App engagement
Map each prize to a deep link into your mobile app.
gotchas
Prize mapping
Keep option labels aligned with backend prize IDs for reliable redemption.
Forwarded emails
Validate user identity at redemption to avoid shared-inbox abuse.
conversion uplift data
No conversion benchmark was attached to this template yet.