Interactive email template
Roulette choice and reward
Let users pick red, black, or green and return the matching reward in email.
Roulette-style prompts are clear because users make one visible choice first.
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)
Roulette choice and reward
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>
<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>Roulette choice and reward</title>
</head>
<body>
<section class="card">
<h1>Choose your roulette color</h1>
<p class="muted">Pick first, then submit your draw.</p>
<amp-state id="rouletteState">
<script type="application/json">
{"choice": "red"}
</script>
</amp-state>
<amp-selector layout="container" on="select:AMP.setState({rouletteState: {choice: event.targetOption}})">
<span option="red" class="pill">Red</span>
<span option="black" class="pill">Black</span>
<span option="green" class="pill">Green</span>
</amp-selector>
<p class="muted">Current pick: <span [text]="rouletteState.choice">red</span></p>
<form method="post" action-xhr="https://amp.mailneo.co/demo/roulette" target="_top">
<input type="hidden" name="choice" value="red" [value]="rouletteState.choice" />
<input type="submit" value="Reveal result" class="btn" />
<div submit-success>
<template type="amp-mustache">
<p><strong>{{result}}</strong></p>
<p class="muted">Reward: {{reward}}</p>
</template>
</div>
</form>
</section>
</body>
</html>AMP components used
use cases
Weekend push
Drive clicks with a quick selection mechanic before checkout.
Industry: Ecommerce
Segment challenge
Test different reward maps by region or loyalty tier.
gotchas
Result fairness
Store draw outcomes server-side and expose audit logs for compliance teams.
Small-screen layout
Keep selector options large enough for touch targets on mobile clients.
conversion uplift data
No conversion benchmark was attached to this template yet.