Interactive email template
Podcast episode list
Render newest episodes with expandable notes for each show drop.
Podcast newsletters stay current when episodes are pulled from a live feed.
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)
Podcast episode list
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-list" src="https://cdn.ampproject.org/v0/amp-list-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-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>Podcast episode list</title>
</head>
<body>
<section class="card">
<h1>Latest episodes</h1>
<p class="muted">Updated from your podcast feed when opened.</p>
<amp-list width="auto" height="220" layout="fixed-height" src="https://amp.mailneo.co/demo/podcast-episodes">
<template type="amp-mustache">
<div class="item">
<p style="margin:0;font-weight:700;">{{title}}</p>
<p class="muted" style="margin:6px 0 0;">{{duration}} · {{publishedAt}}</p>
</div>
</template>
<div placeholder class="muted">Loading episodes...</div>
</amp-list>
<amp-accordion disable-session-states style="margin-top:10px;">
<section>
<h4>Episode notes</h4>
<div><p class="muted">This week covers AMP implementation patterns and fallback testing steps.</p></div>
</section>
</amp-accordion>
</section>
</body>
</html>AMP components used
use cases
Weekly podcast newsletter
Auto-populate latest episodes with publish metadata.
Industry: Media
Course or webinar recap
Reuse audio-feed style blocks for recurring educational series.
gotchas
Audio links
Include direct episode URLs in both AMP and fallback variants.
Feed pagination
Cap the number of returned episodes to keep content readable.
conversion uplift data
No conversion benchmark was attached to this template yet.