Interactive email template
Content quality rating
Measure content usefulness with a compact score and optional improvement tags.
Use recurring content ratings to guide editorial and campaign direction.
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)
Content quality rating
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>
<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: 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>Content quality rating</title>
</head>
<body>
<div class="email-card">
<amp-state id="contentState">
<script type="application/json">
{"score": ""}
</script>
</amp-state>
<div class="header">
<h1>Help us improve this issue</h1>
<p>Rate quality and tell us what to cover next.</p>
</div>
<div class="section">
<amp-fit-text width="560" height="44" layout="fixed" max-font-size="26">
Was this issue useful for your next campaign?
</amp-fit-text>
<form method="post" action-xhr="https://example.com/api/content-quality" target="_top">
<amp-selector
layout="container"
on="select:AMP.setState({contentState: {score: event.targetOption}})"
>
<div option="1" class="chip">Poor</div>
<div option="2" class="chip">Fair</div>
<div option="3" class="chip">Good</div>
<div option="4" class="chip">Great</div>
</amp-selector>
<input type="hidden" name="score" [value]="contentState.score" />
<label>
<input class="inline-checkbox" type="checkbox" name="topic_deliverability" value="yes" />
More deliverability playbooks
</label>
<label>
<input class="inline-checkbox" type="checkbox" name="topic_copy" value="yes" />
More copy examples
</label>
<label>
<input class="inline-checkbox" type="checkbox" name="topic_automation" value="yes" />
More automation recipes
</label>
<button class="button" type="submit">Submit rating</button>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-formamp-selectoramp-bindamp-fit-text
use cases
Newsletter optimization
Editorial teams can score each issue to refine topic mix.
Industry: Media
Documentation quality checks
Product docs teams can prioritize updates by reader signal.
Industry: Developer tools
gotchas
Actionability
Without open-text prompts, scores alone may not point to clear improvements.
Topic bias
Heavy promotion issues can drag scores and hide content quality trends.
conversion uplift data
No conversion benchmark was attached to this template yet.