> Calendly developer docs. For page Markdown, append .md to any URL.
> Index: https://developer.calendly.com/llms.txt
> API catalog: https://developer.calendly.com/.well-known/api-catalog
> OpenAPI: https://developer.calendly.com/openapi/calendly-api.yaml
> OAuth authorization server: https://calendly.com/.well-known/oauth-authorization-server
> MCP protected resource: https://mcp.calendly.com/.well-known/oauth-protected-resource
> Scheduling MCP endpoint: https://mcp.calendly.com
> Docs search MCP: https://developer.calendly.com/_mcp/server

# 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

#### Profile page viewed

```javascript
{
  event: "calendly.profile_page_viewed",
  payload: {}
}
```

#### Event type viewed

```javascript
{
  event: "calendly.event_type_viewed",
  payload: {}
}
```

#### Date and time selected

```javascript
{
  event: "calendly.date_and_time_selected",
  payload: {}
}
```

#### Event scheduled

```javascript
{
  event: "calendly.event_scheduled",
  payload: {
    event: {
      uri: "https://api.calendly.com/scheduled_events/ABCDABCDABCDABCD"
    },
    invitee: {
      uri: "https://api.calendly.com/api/v2/scheduled_events/ABCDABCDABCDABCD/invitees/ABCDABCDABCDABCD"
    }
  }
}
```

#### Page height changed

```javascript
// This event currently only applies to the Inline widget embed option
{
  event: "calendly.page_height",
  payload: {
    height: "1200px"
  }
}
```

## Listening for Events

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

```javascript
function isCalendlyEvent(e) {
  return e.data.event &&
         e.data.event.indexOf('calendly') === 0;
};

window.addEventListener(
  'message',
  function(e) {
    if (isCalendlyEvent(e)) {
      console.log(e.data);
    }
  }
);
```

## 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`