Custom Events
In pages where you've embedded a HowdyGo demo, it's possible to pick up events from the demo. This allows you to customize event handling as per your own requirements.
Setup
- Add an event listener to your page and identify the
howdygo-demo-event
message:
window.addEventListener('message', function (event) {
try {
if (event.data.message === 'howdygo-demo-event') {
const payload = event.data.payload;
// Handle the custom event here
}
} catch (error) {
console.error({ error });
}
});
- Within the condition for the
howdygo-demo-event
message, you can access thepayload
which contains details about the event. For instance:
const eventName = payload.eventName;
const properties = payload.properties;
- Based on the event name and properties, you can customize your JavaScript actions:
// To log the event in the console
console.log(`Received event: ${eventName} with properties:`, { properties });
// To log the event on your own analytics system
myCustomAnalytics.sendEvent(eventName, properties);ƒ
Events
Session start
When a prospect starts a session
{
"eventName": "howdygo_session_start",
"properties": {
"demo_id": {
"type": "string",
"format": "uuid"
},
"demo_title": {
"type": "string"
},
"demo_url": {
"type": "string",
"format": "uuid"
}
}
}
Step Viewed
When a prospect views a step of a demo
{
"eventName": "howdygo_step_viewed",
"properties": {
"demo_id": {
"type": "string",
"format": "uuid"
},
"demo_title": {
"type": "string"
},
"demo_url": {
"type": "string",
"format": "uuid"
},
"step_id": {
"type": "string",
"format": "uuid"
},
"step_index": {
"type": "number"
}
}
}
Demo Engagement
When a prospect engages with a demo (clicks next on the first step)
{
"eventName": "howdygo_demo_engagement",
"properties": {
"demo_id": {
"type": "string",
"format": "uuid"
},
"demo_title": {
"type": "string"
},
"demo_url": {
"type": "string",
"format": "uuid"
}
}
}
CTA Click
When a prospect clicks on a call to action
{
"eventName": "howdygo_cta_click",
"properties": {
"demo_id": {
"type": "string",
"format": "uuid"
},
"demo_title": {
"type": "string"
},
"demo_url": {
"type": "string",
"format": "uuid"
},
"cta_id": {
"type": "string",
"format": "uuid"
},
"cta_url": {
"type": "string",
"format": "uuid"
}
}
}
Player end
When a prospect completes a demo
{
"eventName": "howdygo_player_end",
"properties": {
"demo_id": {
"type": "string",
"format": "uuid"
},
"demo_title": {
"type": "string"
},
"demo_url": {
"type": "string",
"format": "uuid"
}
}
}