Skip to main content

​
Actions

You can listen to an action that occurs in embedded cal link as follows. You can think of them as DOM events. We are avoiding the term “events” to not confuse it with Cal Events. 
<script>
  Cal("on", {
    action: "ANY_ACTION_NAME",
    callback: (e)=>{
      // `data` is properties for the event.
      // `type` is the name of the action(You can also call it type of the action.) This would be same as "ANY_ACTION_NAME" except when ANY_ACTION_NAME="*" which listens to all the events.
      // `namespace` tells you the Cal namespace for which the event is fired/
      const {data, type, namespace} = e.detail;
    }
  })
</script>

​
Following are the list of supported actions.

Event payloads may evolve over time. For the most reliable integration, you can listen to action: "*" to receive all events and inspect e.detail.type and e.detail.data at runtime.

​
Public Events

These events are intended for external use and provide information about user interactions and booking lifecycle.
ActionDescriptionProperties
eventTypeSelectedWhen user chooses an event-type from the listing.eventType: object // Event Type that has been selected
bookingSuccessfulV2When a booking is successfully created. It might not be confirmed.uid: string // Booking unique identifier
title: string // Booking title
startTime: string // Booking start time
endTime: string // Booking end time
eventTypeId: number // Event type ID
status: string // Booking status
paymentRequired: boolean // Whether payment is required
isRecurring: boolean // Whether this is a recurring booking
allBookings: array // For recurring bookings, array of all booking times
videoCallUrl: string // Video call URL if available
rescheduleBookingSuccessfulV2When a booking is successfully rescheduled.Same properties as bookingSuccessfulV2
dryRunBookingSuccessfulV2When a dry run booking is successfully created (test mode).Same properties as bookingSuccessfulV2 (without uid)
dryRunRescheduleBookingSuccessfulV2When a dry run reschedule is successful (test mode).Same properties as bookingSuccessfulV2 (without uid)
bookingCancelledWhen a booking is cancelled.booking: object // Booking details including cancellationReason
organizer: object // Organizer details (name, email, timeZone)
eventType: object // Event type details
availabilityLoadedWhen availability slots are successfully loaded.eventId: number // Event type ID
eventSlug: string // Event type slug
routedWhen a routing form routes to an action (event type, external URL, or custom page).actionType: string // Type of action: “customPageMessage”, “externalRedirectUrl”, or “eventTypeRedirectUrl”
actionValue: string // The value/URL of the action
navigatedToBookerWhen user navigates to the booker interface.None
linkReadyTells that the link is ready to be shown now.None
linkFailedFired if link fails to load.code: string // Error Code
msg: string // Human Readable message
data: object // More details to debug the error (includes url)

​
Internal Events

These events are used internally by the embed system for communication between the iframe and parent window. They are prefixed with __ and are not intended for external use.
ActionDescriptionProperties
__iframeReadyFired when the embedded iframe is ready to communicate with parent snippet.isPrerendering: boolean // Whether the iframe is in prerender mode
__windowLoadCompleteTells that window load for iframe is complete.None
__dimensionChangedTells that dimensions of the content inside the iframe changed.iframeWidth: number
iframeHeight: number
isFirstTime: boolean // Whether this is the first dimension change
__routeChangedFired when the route changes within the iframe.None
__closeIframeFired when the iframe should be closed.None
__connectInitiatedFired when connection to a prerendered iframe is initiated.None
__connectCompletedFired when connection to a prerendered iframe is completed.None
__scrollByDistanceInstructs the parent to scroll by a specific distance.distance: number // Distance in pixels to scroll by
Events that start with __ are internal and should not be relied upon for external integrations as they may change without notice.
To get more details on how Embed actually works, you can refer to this Embed Flowchart.