Event listening is a programming pattern where the widget is set up to monitor specific actions or changes, known as events. Listening to events in a new widget 2.0 involves adding code to detect and respond to user interactions or other occurrences within the widget.
Listening to events can be useful in tracking user interactions to collect data on user behaviour and analyse trends, displaying different content on the page, redirecting to another page and much more.
⚙️ How can I set it up?
Embed mode
See the example below of how to listen for events on widgets in embed mode:
<script src="https://booking-tools-sdk.appointedd.com/appointedd-booking-tools-sdk-v1.js"></script>
<div id="iFrameContainer" style="padding:32px; background-color: #FFFFFF;"></div>
<script language="javascript" type="text/javascript">
const widgetInstance = Appointedd.renderWidget("iFrameContainer", {
widgetId: "widget_ID" ,
enableLanguageSelector: false,
});
widgetInstance.on("READY", (data) => {
console.log("Write your code to be used here");
})
</script>
⭐️ Don't forget to replace the widget_ID with your embed widget ID.
Popover mode
See the example below of how to listen for events on widgets in popover mode:
<button id="myFirstPopover" class="appointedd-booking-widget-popover" data-widget-id="<widget-id>"> Book now </button>
<button id="mySecondPopover" class="appointedd-booking-widget-popover" data-widget-id="<widget-id>"> Book now </button>
<script src="https://booking-tools-sdk.appointedd.com/appointedd-booking-tools-sdk-v1.js"></script>
<script>
// You can attach event listeners to all Appointedd popover windows by omitting the button id.
Appointedd.popovers.on("READY", (data) => {
console.log("This code will run for all Appointedd popovers");
})
// Alternatively you can attach an event listener to a specific popover button by providing an id.
Appointedd.popovers.on("BOOKING_CREATED", (data) => {
console.log("This code will run only for the button with id 'myFirstPopover'");
}, "myFirstPopover")
</script>
⭐️ Don't forget to replace the widget-id with your popover widget ID.
🧐 What events can I listen to?
The list of events that can be fired:
1. READY
2. CLOSE_APPOINTEDD_POPOVER
3. USER_ENGAGED
4. LOCATION_SEARCHED
5. BOOKING_CREATED
📝 What data is passed after the event is fired?
Depending on the event you're listening to, the payload will contain various booking information, including data such as organisation, service, resource, booking questions, date, timezone etc.
For example, the below information will be included in the payload when a booking is created:
BookingData = {
attendees?: number;
bookingNotes?: string;
bookingQuestionData?: BookingQuestionData;
bookingQuestionFileNameData?: BookingQuestionFileNameData;
bookings?: Booking[];
confirmedBookingIds?: string[];
createdSource?: string;
discountCode?: string;
duration?: ServiceDuration;
organisation?: Organisation;
payNow?: boolean;
pricePoints?: SelectedPricePoint[];
recurringBooking?: RecurringBooking;
reservedSpaceId?: string;
resource?: Resource;
resourceGroupId?: string;
resourceIds?: string[];
selectedBookings?: Booking[];
selectedTimeSlot?: TimeSlot;
service?: Service;
sessionId?: string;
startDate?: Date;
tier?: ServiceTier;
timezone?: string;
totalPaid?: number;
userDetails?: UserDetails;
};