Interactive email template

Live news feed module

Pull latest headlines at open time so content stays timely without resend.

Newsletters with live modules can stay relevant even when open times vary by hours.

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)

Live news feed module

to me · interactive email

Top headlines right now

Render latest stories when email opens.

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-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>Live news feed module</title>
  </head>
  <body>
    <section class="card">
  <h1>Latest headlines</h1>
  <p class="muted">This block updates from your newsroom feed.</p>
  <amp-list width="auto" height="260" layout="fixed-height" src="https://amp.mailneo.co/demo/news-feed">
    <template type="amp-mustache">
      <div class="item">
        <p style="margin:0;font-weight:700;">{{title}}</p>
        <p class="muted" style="margin:6px 0;">{{source}} · {{publishedAt}}</p>
      </div>
    </template>
    <div placeholder class="muted">Loading headlines...</div>
  </amp-list>
</section>
  </body>
</html>

AMP components used

amp-list

use cases

  • Media newsletter

    Display top stories with timestamps and source names.

    Industry: Publishing

  • Executive brief

    Provide morning updates from internal or public feeds.

gotchas

  • Feed uptime

    Use a reliable endpoint and fallback placeholders for outages.

  • Editorial safety

    Sanitize headline payloads before serving into templates.

conversion uplift data

No conversion benchmark was attached to this template yet.

citations

related templates