Interactive email template
Conference agenda template
Show a swipeable agenda and expandable session details inside email.
Help attendees plan their day before the event starts.
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)
Conference agenda template
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-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-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>Conference agenda</title>
</head>
<body>
<div class="email-card">
<div class="header">
<h1>Plan your conference day</h1>
<p>Swipe tracks and save your must-attend sessions.</p>
</div>
<div class="section">
<amp-carousel width="560" height="180" layout="responsive" type="slides">
<div class="session-card">
<strong>Track A: Deliverability</strong>
<p>10:00 AM - Inbox placement in 2026</p>
</div>
<div class="session-card">
<strong>Track B: Lifecycle</strong>
<p>11:30 AM - Upgrade trial-to-paid flows</p>
</div>
<div class="session-card">
<strong>Track C: AMP email</strong>
<p>2:00 PM - Interactive templates live teardown</p>
</div>
</amp-carousel>
<amp-accordion disable-session-states>
<section>
<h4 class="chip" style="cursor: pointer; margin: 10px 0 8px;">Session details</h4>
<div>
<p class="muted">Choose sessions where your team has near-term execution plans.</p>
</div>
</section>
</amp-accordion>
<form method="post" action-xhr="https://example.com/api/conference-agenda" target="_top">
<label>
<input class="inline-checkbox" type="checkbox" name="session_deliverability" value="yes" />
Save inbox placement session
</label>
<label>
<input class="inline-checkbox" type="checkbox" name="session_lifecycle" value="yes" />
Save lifecycle session
</label>
<label>
<input class="inline-checkbox" type="checkbox" name="session_amp" value="yes" />
Save AMP teardown session
</label>
<button class="button" type="submit">Save agenda</button>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-carouselamp-accordionamp-form
use cases
Large conferences
Help attendees pre-plan across multiple tracks.
Industry: Events
Virtual summits
Guide remote attendees toward relevant sessions.
Industry: B2B
gotchas
Content density
Dense schedules can reduce readability in email clients.
Last-minute changes
Agenda updates need dynamic data or follow-up emails.
conversion uplift data
No conversion benchmark was attached to this template yet.