Interactive email template
Slot-machine reward reel
Use reel slides and a spin action to reveal a promo outcome in email.
Slot mechanics work when you need one high-energy campaign with instant reward feedback.
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)
Slot-machine reward reel
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-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-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-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-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>Slot-machine reward reel</title>
</head>
<body>
<section class="card">
<h1>Spin the slot machine</h1>
<p class="muted">Tap spin to move the reel and reveal your outcome.</p>
<amp-state id="slotState">
<script type="application/json">
{"result": "Tap spin to reveal"}
</script>
</amp-state>
<amp-carousel id="slotCarousel" width="320" height="120" layout="fixed" type="slides" controls>
<div class="item" style="text-align:center;font-size:30px;">🍊 🍊 🍊</div>
<div class="item" style="text-align:center;font-size:30px;">🍊 ⭐ 🍊</div>
<div class="item" style="text-align:center;font-size:30px;">⭐ ⭐ ⭐</div>
</amp-carousel>
<button class="btn" on="tap:slotCarousel.goToSlide(index=2),AMP.setState({slotState: {result: 'You unlocked 2x loyalty points'}})">Spin</button>
<amp-fit-text width="360" height="60" layout="fixed" [text]="slotState.result">Tap spin to reveal</amp-fit-text>
</section>
</body>
</html>AMP components used
use cases
Festival campaign
Run high-attention reward emails around peak shopping dates.
Industry: Fashion
Loyalty milestone
Map spin outcomes to point multipliers and bonuses.
gotchas
Fallback consistency
Mirror the same win conditions in HTML to avoid customer confusion.
Animation limits
Keep carousel slide count low so rendering stays fast in inbox clients.
conversion uplift data
No conversion benchmark was attached to this template yet.