Calendly Listener

Pushes calendly_booking_confirmed to the dataLayer so you can use calendly_booking_confirmed as a Custom Event Trigger in GTM.

Setup

Create a Custom HTML Tag in Tag Manager
Paste the code from calendly-listener.html
Create a Custom Event Trigger
Set the Event Name to calendly_booking_confirmed
Wire any Tags for Calendly events to that trigger

The code

calendly-listener.html

html

<script>
(function () {
  // Calendly posts messages to the parent window whenever something happens in the embed
  window.addEventListener('message', function (e) {
    // Only handle messages that actually came from Calendly
    if (!isCalendlyEvent(e)) {
      return;
    }

    // Only act on the "booking confirmed" event
    if (e.data.event === 'calendly.event_scheduled') {
      // Push a custom event + the booking payload into the dataLayer
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'calendly_booking_confirmed',
        calendlyPayload: e.data.payload
      });
    }
  });

  // Helper: confirms the postMessage actually came from Calendly
  function isCalendlyEvent(e) {
    return (
      e.origin === 'https://calendly.com' &&
      e.data &&
      e.data.event &&
      e.data.event.indexOf('calendly.') === 0
    );
  }
})();
</script>