Embed Parent Window Events

The embedded scheduling page notifies the parent window of important events during the booking flow. As a developer, you can subscribe to these notifications to fire analytics events or change the state of your app.

We use window.postMessage() to post events to the parent window. Below are the currently supported events and their corresponding message payload.

Supported Events

1
{
2
  event: "calendly.profile_page_viewed",
3
  payload: {}
4
}

Listening for Events

This example code listens to these events and logs them to the console:

1
function isCalendlyEvent(e) {
2
  return e.data.event &&
3
         e.data.event.indexOf('calendly') === 0;
4
};
5
6
window.addEventListener(
7
  'message',
8
  function(e) {
9
    if (isCalendlyEvent(e)) {
10
      console.log(e.data);
11
    }
12
  }
13
);

Use Cases

• Analytics tracking: Fire analytics events when users view event types or complete bookings
• State management: Update your app state when bookings are completed
• Dynamic sizing: Adjust your embed container height based on the page_height event
• Confirmation pages: Redirect users or show confirmation UI after event_scheduled