Auto-resize & Events

An iframe has a fixed height by default, which can leave awkward empty space or clip a success message. The Subscribeam widget solves this by posting messages to the parent page: it reports its height so you can resize the iframe, and it emits an event when someone subscribes. This guide shows how to listen for both.

Listening for messages

The widget communicates with the parent page using the browser's postMessage API. Add a listener that checks the message origin and reacts accordingly:

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

<script>
  window.addEventListener("message", (event) => {
    // Only trust messages from the widget's origin.
    if (event.origin !== "https://cdn.subscribeam.com") return;

    const data = event.data || {};

    // Auto-resize: match the iframe height to the widget's content.
    if (data.type === "resize" && typeof data.height === "number") {
      document.getElementById("subscribe-widget").style.height =
        data.height + "px";
    }

    // React to a successful subscription.
    if (data.type === "subscribed") {
      console.log("New subscriber:", data.email);
      // e.g. hide the form, show a thank-you, fire an analytics event.
    }
  });
</script>

Always check the origin

The event.origin check is important. Any page can post messages to your window, so verifying that the message came from https://cdn.subscribeam.com before acting on it keeps a malicious page from spoofing a subscribed event. Never skip this check.

What the widget sends

• resize — includes a numeric height in pixels whenever the widget's content changes size (for example, when it swaps the form for a success message). Use it to keep the iframe snug.
• subscribed — fired after a successful signup. Use it to update your UI or record a conversion in your analytics.

React example

In a component, attach and clean up the listener in an effect:

useEffect(() => {
  function onMessage(event) {
    if (event.origin !== "https://cdn.subscribeam.com") return;
    if (event.data?.type === "resize") {
      setHeight(event.data.height);
    }
  }
  window.addEventListener("message", onMessage);
  return () => window.removeEventListener("message", onMessage);
}, []);

If you don't need any of this

Auto-resize and events are optional. A plain iframe with a fixed height works perfectly well — see the quick start. Add the listener only when you want the iframe to adapt or you want to react to signups.