Back to templates
Add a dismissable site-wide banner using a Netlify Edge Function. Visitors who dismiss it won't see it again — controlled by a cookie, no JavaScript on the page.
Using a Netlify Edge Function, add a dismissable announcement banner to the top of every page on this site.
Banner message: {{BANNER_MESSAGE}}
Link URL (optional): {{LINK_URL}}
The implementation should:
1. Create a Netlify Edge Function that intercepts all page requests and injects a banner into the HTML response.
2. The banner HTML should be injected right after the opening `<body>` tag. It should include:
- The banner message text
- A link if {{LINK_URL}} is provided (opens in same tab)
- A dismiss/close button ("x")
3. **Dismissal via cookie, not client-side JS**: The close button should be a small `<form>` that POSTs to a dismiss endpoint (e.g., `/__dismiss-banner`). The edge function handles this POST by setting a `banner-dismissed` cookie (HttpOnly, SameSite=Lax, Max-Age=2592000 for 30 days) and redirecting back to the referrer page. This means dismissal works even with JavaScript disabled.
4. If the `banner-dismissed` cookie is present, the edge function skips injection entirely — no banner HTML is added to the response.
5. **Style the banner to match the site's existing design** — inspect the site's colors, fonts, and spacing. Include the CSS inline in the injected HTML so it doesn't depend on the site's stylesheets.
6. Push the page content down so the banner doesn't overlap it (inject a `<style>` tag that adds `margin-top` to `body`).
7. Add the edge function configuration to `netlify.toml` on `/*`.
Do not modify any of the site's existing HTML, CSS, or JavaScript files. The entire banner is injected and managed at the edge.
Variables
Optional URL to link the banner text to.
The text to display in the banner.
Did you find this doc useful?
Your feedback helps us improve our docs.