Add the Subscribe Widget to a Static Site or Ghost

Because the widget is a single <iframe> served from a CDN, it works anywhere you can put HTML — no build step or package to install. Here's how to add it to the most common setups. Each uses the snippet from the quick start.

Plain HTML

Paste the snippet wherever you want the form in your markup:

<iframe
  src="https://cdn.subscribeam.com/embed/<newsletter-id>.html"
  width="100%"
  height="200"
  style="border:none"
  title="Subscribe to our newsletter"
></iframe>

Static-site generators (Astro, Hugo, Eleventy, Jekyll)

These all render HTML, so the same snippet works directly in a template or content file. In Markdown-based generators, most allow raw HTML in .md files — paste the snippet inline. If your Markdown is configured to strip HTML, add it to the surrounding layout/template file instead.

React, Next.js, and other JSX frameworks

JSX requires a couple of attribute tweaks — style becomes an object and attributes are camelCased:

<iframe
  src="https://cdn.subscribeam.com/embed/<newsletter-id>.html"
  width="100%"
  height={200}
  style={{ border: "none" }}
  title="Subscribe to our newsletter"
/>

No useEffect or client-side code is needed — it's just an iframe.

Ghost

There are two good places to embed in Ghost:

• In a post or page: add an HTML card (type /html in the editor) and paste the snippet.
• Site-wide: in Settings → Code injection, or in a custom theme template, place the snippet where you want the form to appear on every page.

A note on Content Security Policy

If your site sets a Content Security Policy, allow our CDN as a frame source so the browser doesn't block the widget:

Content-Security-Policy: frame-src https://cdn.subscribeam.com;

Most sites don't set a restrictive frame-src and won't need this. If the widget shows a blank space and your browser console mentions a CSP violation, this is the fix.

Making it fit

A fixed height is the simplest option. If your form's height varies (for example after a success message), enable auto-resize so the iframe adjusts to its content — see Auto-resize & events.