Interactive email template
Subscription renewal selector
Give subscribers renewal options with updated totals before confirming billing.
Renewal emails work better when users can switch cadence and see new prices immediately.
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)
Subscription renewal 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-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-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-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>Subscription renewal selector</title>
</head>
<body>
<section class="card">
<h1>Your plan renews soon</h1>
<p class="muted">Choose billing cadence before your renewal date.</p>
<amp-state id="renewState">
<script type="application/json">
{"term": "Monthly", "amount": "$29", "nextDate": "2026-06-01"}
</script>
</amp-state>
<amp-selector layout="container" on="select:AMP.setState({renewState: {term: event.targetOption, amount: event.targetOption == 'Monthly' ? '$29' : '$290', nextDate: '2026-06-01'}})">
<span option="Monthly" class="pill">Monthly</span>
<span option="Yearly" class="pill">Yearly</span>
</amp-selector>
<amp-fit-text width="280" height="62" layout="fixed" [text]="renewState.amount">$29</amp-fit-text>
<p class="muted">Term: <span [text]="renewState.term">Monthly</span> · Next charge: <span [text]="renewState.nextDate">2026-06-01</span></p>
<form method="post" action-xhr="https://amp.mailneo.co/demo/subscription-renew" target="_top">
<input type="hidden" name="term" value="Monthly" [value]="renewState.term" />
<input type="submit" value="Confirm renewal" class="btn" />
<div submit-success>
<template type="amp-mustache">
<p class="muted">Renewal updated to {{term}} billing.</p>
</template>
</div>
</form>
</section>
</body>
</html>AMP components used
use cases
SaaS billing reminders
Reduce churn by showing clear term options before charge date.
Industry: SaaS
Membership renewals
Let members switch cadence without opening account settings.
gotchas
Charge timing
Sync renewal date and timezone with billing provider records.
Consent logs
Store confirmation events with timestamp for audit trails.
conversion uplift data
No conversion benchmark was attached to this template yet.