Interactive email template

Stock ticker digest

Show selected market symbols with current movement at open time.

Financial alerts in AMP can keep market subscribers engaged without extra clicks.

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)

Stock ticker digest

to me · interactive email

Market watch

Track selected symbols in one email block.

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-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-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>Stock ticker digest</title>
  </head>
  <body>
    <section class="card">
  <h1>Today's ticker watchlist</h1>
  <p class="muted">Quotes refresh from your market data endpoint.</p>
  <amp-list width="auto" height="240" layout="fixed-height" src="https://amp.mailneo.co/demo/stocks">
    <template type="amp-mustache">
      <div class="item" style="display:flex;justify-content:space-between;align-items:center;">
        <span><strong>{{symbol}}</strong> {{name}}</span>
        <span>{{price}} ({{change}})</span>
      </div>
    </template>
    <div placeholder class="muted">Loading market data...</div>
  </amp-list>
  <amp-fit-text width="360" height="48" layout="fixed">Data delayed by up to 15 minutes.</amp-fit-text>
</section>
  </body>
</html>

AMP components used

amp-listamp-fit-text

use cases

  • Investor updates

    Send daily close summaries with opening-watch context.

    Industry: Fintech

  • Trading community

    Share curated symbol lists tied to campaign topics.

gotchas

  • Data disclaimer

    Include delay and non-advisory language with each quote module.

  • Rate controls

    Throttle quote feed requests to control API costs.

conversion uplift data

No conversion benchmark was attached to this template yet.

citations

related templates