Custom Events
An embedded HowdyGo demo sends events to its parent page as the viewer moves through it. Use these events to update your page or connect your own analytics. For server-side delivery, use webhooks. For GA4 or Google Tag Manager, you can enable the Tracking Script’s event bridge.
Setup
Add a message listener to the page containing your demo. Use the origin of your demo iframe; change demoOrigin if you use a custom domain.
const demoOrigin = "https://app.howdygo.com";
window.addEventListener("message", (event) => {
if (event.origin !== demoOrigin) return;
if (event.data?.message !== "howdygo-demo-event") return;
const payload = event.data.payload;
if (!payload || typeof payload.eventName !== "string") return;
const { eventName, email, properties } = payload;
console.log("Demo event:", eventName, properties);
if (eventName === "howdygo_player_end") {
console.log("Demo completed by:", email ?? "an unidentified viewer");
}
});The listener receives this message shape:
{
"message": "howdygo-demo-event",
"payload": {
"eventName": "howdygo_demo_engagement",
"email": "jane@example.com",
"properties": {
"demo_id": "your-demo-id",
"demo_title": "Product tour",
"demo_url": "https://app.howdygo.com/embed/your-demo-id",
"demo_session_id": "viewing-session-id"
}
}
}For demos opened through howdygo.openModal(), the SDK also exposes a demo-event listener.
Common properties
| Property | Type | Description |
|---|---|---|
demo_id | string | ID of the demo. |
demo_title | string | Title of the demo. |
demo_url | string | URL of the demo player, including any query parameters. |
demo_session_id | string | ID shared by events from the same viewing session. |
collection_id | string, optional | Collection containing the demo, when supplied by the event. |
Viewer identity
payload.email is optional and sits alongside eventName and properties. It contains the resolved viewer email when one is available and the demo’s owning organization allows viewer identification. Current player callbacks use email; they do not send the older top-level userId field.
The callback does not include externalUserId. An external user ID alone does not produce an email. The SDK’s GA4 bridge forwards properties without copying top-level email into dataLayer.
If your app supplies identity after the demo has opened, later events use the updated values. Identification does not create an extra demo event, resend earlier events, or change demo_session_id. See SDK identity precedence for how SDK calls, forms, personalization, and URL parameters are combined.
Events
Session start
howdygo_session_start is sent when the viewer starts a demo session. It includes the common properties.
Step Viewed
howdygo_step_viewed is sent when a demo step is shown. It adds:
| Property | Type | Description |
|---|---|---|
step_id | string | ID of the step. |
step_index | number | Zero-based step index: the first step is 0. |
The analytics index is zero-based. The SDK’s goToStep() method uses one-based indices.
Demo Engagement
howdygo_demo_engagement is sent when the viewer reaches the second step. It includes the common properties.
CTA Click
howdygo_cta_click is sent when the viewer clicks a call to action. It adds:
| Property | Type | Description |
|---|---|---|
cta_id | string | ID of the call to action. |
cta_url | string, optional | Destination URL, when the action has one. |
Player end
howdygo_player_end is sent when the viewer reaches the end of the demo. It includes the common properties.