Interactive email template
Preference center
Let subscribers tune frequency and content topics directly in email.
Reduce unsubscribes by offering granular control over what gets sent.
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)
Preference center
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-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>
<style amp4email-boilerplate>
body {
visibility: hidden;
}
</style>
<style amp-custom>
body {
margin: 0;
padding: 20px;
background: #f8fafc;
font-family: Arial, Helvetica, sans-serif;
color: #1f2937;
}
.email-card {
max-width: 640px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
}
.header {
background: #fff7ed;
border-bottom: 1px solid #fed7aa;
padding: 20px 24px;
}
.header h1 {
margin: 0;
font-size: 22px;
line-height: 1.3;
color: #9a3412;
}
.header p {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.5;
color: #7c2d12;
}
.section {
padding: 20px 24px;
}
label {
display: block;
margin: 0 0 6px;
font-size: 13px;
line-height: 18px;
font-weight: 700;
color: #334155;
}
input,
textarea,
select {
width: 100%;
box-sizing: border-box;
margin: 0 0 12px;
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 14px;
color: #1f2937;
background: #ffffff;
}
textarea {
min-height: 90px;
resize: vertical;
}
.inline-checkbox {
width: auto;
margin: 0 8px 0 0;
vertical-align: middle;
}
.button {
display: inline-block;
border: 0;
border-radius: 8px;
background: #f97316;
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: 700;
line-height: 1;
padding: 12px 16px;
cursor: pointer;
}
.button.alt {
background: #ea580c;
}
.button.ghost {
background: #ffffff;
color: #9a3412;
border: 1px solid #fdba74;
}
.muted {
margin: 10px 0 0;
font-size: 12px;
line-height: 18px;
color: #64748b;
}
.chip {
display: inline-block;
border: 1px solid #fdba74;
border-radius: 999px;
padding: 8px 12px;
margin: 0 8px 8px 0;
font-size: 13px;
line-height: 1;
color: #9a3412;
background: #fff7ed;
}
amp-selector [option][selected] {
background: #f97316;
color: #ffffff;
border-color: #f97316;
}
.score-grid [option] {
min-width: 40px;
text-align: center;
}
.step-nav {
margin-bottom: 14px;
}
.step-pill {
display: inline-block;
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid #cbd5e1;
color: #475569;
text-align: center;
line-height: 28px;
font-size: 12px;
margin-right: 8px;
}
.step-pill.active {
border-color: #f97316;
background: #f97316;
color: #ffffff;
}
.note-box {
border: 1px dashed #fdba74;
border-radius: 10px;
padding: 10px 12px;
margin: 12px 0;
background: #fff7ed;
font-size: 13px;
line-height: 1.5;
color: #7c2d12;
}
.session-card {
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 14px;
background: #ffffff;
}
</style>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<title>Preference center</title>
</head>
<body>
<div class="email-card">
<amp-state id="prefState">
<script type="application/json">
{"frequency": "weekly"}
</script>
</amp-state>
<div class="header">
<h1>Choose what you want from us</h1>
<p>Set frequency and topics so each send is more relevant.</p>
</div>
<div class="section">
<form method="post" action-xhr="https://example.com/api/preferences" target="_top">
<label>Send frequency</label>
<amp-selector
layout="container"
on="select:AMP.setState({prefState: {frequency: event.targetOption}})"
>
<div option="weekly" selected class="chip">Weekly</div>
<div option="bi-weekly" class="chip">Bi-weekly</div>
<div option="monthly" class="chip">Monthly</div>
</amp-selector>
<input type="hidden" name="frequency" [value]="prefState.frequency" />
<label>
<input class="inline-checkbox" type="checkbox" name="topic_amp" value="yes" />
AMP templates
</label>
<label>
<input class="inline-checkbox" type="checkbox" name="topic_deliverability" value="yes" />
Deliverability tips
</label>
<label>
<input class="inline-checkbox" type="checkbox" name="topic_benchmarks" value="yes" />
Industry benchmarks
</label>
<button class="button" type="submit">Save preferences</button>
<p class="muted">If you hide unsubscribe links, this can trigger spam complaints.</p>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-formamp-selectoramp-bind
use cases
Newsletter retention
Media teams can keep list health steady by letting readers tune cadence.
Industry: Media
Lifecycle controls
Product teams can route users to streams based on explicit content interests.
Industry: SaaS
gotchas
Choice overload
Large option sets can reduce completion and increase no-change submits.
Sync delays
ESP and CRM sync lag can send one extra email before new preferences apply.
conversion uplift data
No conversion benchmark was attached to this template yet.