Interactive email template

Jackpot draw email

Present multiple prize tiers and let users pick one draw directly in the message.

Jackpot mechanics work well when you want a high-attention launch message.

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.

Gmail · Primary

Mailneo demo <hello@mailneo.co>

10:42 AM (2 min ago)

Jackpot draw email

to me · interactive email

Jackpot draw

Pick a tier and reveal your win.

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-selector" src="https://cdn.ampproject.org/v0/amp-selector-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>Jackpot draw email</title>
  </head>
  <body>
    <section class="card">
  <h1>Pick your jackpot tier</h1>
  <p class="muted">Select a tier to reveal today's available prize.</p>
  <amp-state id="jackpotState">
    <script type="application/json">
      {"amount": "$0", "message": "Tap a tier"}
    </script>
  </amp-state>
  <amp-fit-text width="280" height="72" layout="fixed" [text]="jackpotState.amount">$0</amp-fit-text>
  <p class="muted" [text]="jackpotState.message">Tap a tier</p>
  <amp-selector layout="container" on="select:AMP.setState({jackpotState: {amount: event.targetOption, message: 'Reward ready at checkout'}})">
    <span option="$10" class="pill">$10</span>
    <span option="$25" class="pill">$25</span>
    <span option="$50" class="pill">$50</span>
  </amp-selector>
  <a class="btn" href="https://www.mailneo.co/tools/roi-calculator">Use reward</a>
</section>
  </body>
</html>

AMP components used

amp-bindamp-selectoramp-fit-text

use cases

  • VIP launch day

    Run a tiered reward reveal for top customer segments.

    Industry: DTC

  • Milestone campaign

    Tie jackpot tiers to anniversary or birthday sends.

gotchas

  • Offer limits

    Set clear caps for high-value tiers in legal copy and checkout rules.

  • Prize transparency

    Show terms next to the reveal to avoid support disputes.

conversion uplift data

No conversion benchmark was attached to this template yet.

citations

related templates