Pop-up Modal Embeds

Open a demo in a full-screen modal overlay instead of embedding it inline. This is useful when you want to trigger a demo from a button click, like a “Watch demo” CTA in your hero section or a feature card on a marketing page.

The modal automatically fetches the demo’s recording dimensions and sizes itself to fit. Viewers can close it by clicking the overlay background, the close button, or pressing Escape.

Opening a demo in a modal

Install the SDK, then open a demo by ID:

howdygo.openModal({ id: "your-demo-id" });

To identify the viewer, call identify() before opening the modal. The SDK supplies the stored identity and its replacements when the demo registers:

howdygo.identify({
  externalUserId: "customer-123",
  email: "jane@example.com",
  replacements: [{ token: "welcomeName", value: "Jane" }],
});
howdygo.openModal({ id: "your-demo-id" });

Closing the demo modal

Close the modal programmatically.

howdygo.closeModal();

Listening for modal events

On the page hosting the modal, subscribe to demo-event before opening it:

function onDemoEvent(payload) {
  if (payload.eventName === "howdygo_player_end") {
    console.log("Demo completed:", payload.properties.demo_id);
    console.log("Viewer email:", payload.email);
  }
}
 
howdygo.on("demo-event", onDemoEvent);
howdygo.openModal({ id: "your-demo-id" });
 
// Remove the listener when your page no longer needs it.
// howdygo.off("demo-event", onDemoEvent);

The payload uses the custom event format, including optional top-level email and properties.demo_session_id. External user IDs are not included. For inline embeds, use the window message listener shown in that guide.

Getting the code

The fastest way to set up a pop-up embed is from the share modal in the HowdyGo editor.

Cross-origin support

If your SDK runs inside an iframe (for example, a HowdyGo embed sitting inside a third-party CMS or documentation tool), modal requests forward to the top-level page automatically as long as the parent page also has the SDK loaded. The modal opens on the parent so the overlay can fill the whole viewport instead of being trapped inside the child iframe.

If the parent page doesn’t have the SDK, the modal opens locally inside the iframe.

When the parent hosts the modal, run identification and demo-event listeners on that parent page.