Interactive email template
Dice-roll reward picker
Submit a single action and return a dice result with a mapped incentive.
Dice-roll templates are useful for daily streak emails and short promotions.
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)
Dice-roll reward 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-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>Dice-roll reward picker</title>
</head>
<body>
<section class="card">
<h1>Roll the dice for a surprise</h1>
<p class="muted">Your roll decides the perk. One roll per account.</p>
<form method="post" action-xhr="https://amp.mailneo.co/demo/dice-roll" target="_top">
<input type="hidden" name="campaign" value="daily-dice" />
<input type="submit" value="Roll the dice" class="btn" />
<div submit-success>
<template type="amp-mustache">
<p><strong>You rolled {{roll}}</strong></p>
<p class="muted">Reward: {{reward}}</p>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<p class="muted">We could not complete your roll. Try again in a minute.</p>
</template>
</div>
</form>
</section>
</body>
</html>AMP components used
use cases
Daily streak campaigns
Encourage repeat opens with one daily roll mechanic.
Industry: Gaming
Win-back drip
Pair each roll with a fresh discount cap.
gotchas
API latency
Keep response times low so form submissions do not time out in inboxes.
Fraud handling
Bind rewards to account IDs so forwarded emails cannot duplicate claims.
conversion uplift data
No conversion benchmark was attached to this template yet.