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. For server-side event delivery, see webhooks. For pre-built analytics integrations, see Google Analytics or Heap.

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 the payload 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"
    }
  }
}