Interactive email template
Dynamic pricing selector
Let subscribers choose a plan or quantity and instantly see updated pricing.
Dynamic pricing emails reduce decision time because totals update before the click.
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)
Dynamic pricing selector
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-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>Dynamic pricing selector</title>
</head>
<body>
<section class="card">
<h1>Select your pricing plan</h1>
<p class="muted">Switch between plans without opening a landing page.</p>
<amp-state id="pricingState">
<script type="application/json">
{"plan": "Starter", "price": "$19/mo", "seats": "5 seats"}
</script>
</amp-state>
<amp-selector layout="container" on="select:AMP.setState({pricingState: {plan: event.targetOption, price: event.targetOption == 'Starter' ? '$19/mo' : event.targetOption == 'Growth' ? '$49/mo' : '$99/mo', seats: event.targetOption == 'Starter' ? '5 seats' : event.targetOption == 'Growth' ? '20 seats' : 'Unlimited seats'}})">
<span option="Starter" class="pill">Starter</span>
<span option="Growth" class="pill">Growth</span>
<span option="Pro" class="pill">Pro</span>
</amp-selector>
<amp-fit-text width="320" height="64" layout="fixed" [text]="pricingState.price">$19/mo</amp-fit-text>
<p class="muted"><span [text]="pricingState.plan">Starter</span> · <span [text]="pricingState.seats">5 seats</span></p>
<a class="btn" href="https://www.mailneo.co/tools/roi-calculator">Start free trial</a>
</section>
</body>
</html>AMP components used
use cases
SaaS upgrade path
Show monthly and annual options during trial-to-paid nudges.
Industry: SaaS
Volume pricing
Display quantity breaks for wholesale and B2B offers.
gotchas
Expression testing
Validate AMP bind expressions in major mailbox clients before send.
Pricing drift
Sync price data with backend billing to avoid mismatch complaints.
conversion uplift data
No conversion benchmark was attached to this template yet.