Interactive email template
Weather widget by city
Switch city views and fetch local weather details in the inbox.
Weather blocks help travel, retail, and event campaigns stay location-aware.
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)
Weather widget by city
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-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-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>Weather widget by city</title>
</head>
<body>
<section class="card">
<h1>Weather where you are</h1>
<p class="muted">Pick a city to load updated forecast details.</p>
<amp-state id="weatherState">
<script type="application/json">
{"city": "Mumbai"}
</script>
</amp-state>
<amp-selector layout="container" on="select:AMP.setState({weatherState: {city: event.targetOption}})">
<span option="Mumbai" class="pill">Mumbai</span>
<span option="London" class="pill">London</span>
<span option="Austin" class="pill">Austin</span>
</amp-selector>
<amp-list width="auto" height="160" layout="fixed-height" [src]="'https://amp.mailneo.co/demo/weather?city=' + weatherState.city" src="https://amp.mailneo.co/demo/weather?city=Mumbai">
<template type="amp-mustache">
<div class="item">
<p style="margin:0;font-weight:700;">{{city}} · {{temp}}</p>
<p class="muted" style="margin:6px 0 0;">{{condition}} · Wind {{wind}}</p>
</div>
</template>
<div placeholder class="muted">Loading weather...</div>
</amp-list>
</section>
</body>
</html>AMP components used
amp-selectoramp-bindamp-list
use cases
Local retail promo
Adjust product blocks by rain, heat, or cold conditions.
Industry: Retail
Travel planning
Surface destination weather ahead of booking windows.
gotchas
Location consent
Use explicit city selection instead of inferred personal location.
Units
Offer local units such as C or F depending on audience locale.
conversion uplift data
No conversion benchmark was attached to this template yet.