All Collections
Scheduling
Source and Conversion
Notifying the parent window of interactions on the booking page
Notifying the parent window of interactions on the booking page

The booking page sends notifications to the parent window which you can use for source and conversion tracking

Ibrahim Badawy avatar
Written by Ibrahim Badawy
Updated over a week ago

This article shows you how to use Demodesk booking page to gain insightful information or have specific actions, once you have added it on your website. It is meant for source and conversion tracking in your marketing tool or CRM (for HubSpot only). If you are looking for source and conversion tracking for your CRM and you are a Pipedrive or Salesforce user please refer to this article. Please note that this article applies to routing forums as well.

🪛👩‍💻 Please note: This article is technical, but it is worth reviewing the use cases to determine their potential benefit for you. If you decide to implement any of these features, you may need the assistance of a web developer.

The following are some source and conversion use cases that can be achieved using Demodesk booking pages:

  • Conversion tracking of bookings via Google Analytics or HubSpot

  • Hide or show content after the booking process

  • Redirect to a different page after the booking process

  • React to actions that are triggered by the booking page

This article is divided into the following sections:


Add a booking page

The first step is to add a booking page to your website. You can add the booking page as an iframe by, for example, using the Demodesk code snippet as detailed in this article. In doing so, to enable source and conversion tracking, you should ensure that the information transmitted from the Demodesk iframe to your website is received (listened to), enabling you to monitor the specific information you require.

As a developer, you can subscribe to these events to fire analytic tracking events or customize your own website/app. This is done via window.postMessage() which means you can receive these events in the following two situations:

  • You add the booking page as iframe as detailed here

  • You open the link to the booking page with window.open as demonstrated here


Receive events when adding a booking page as an iframe

You do not need to perform any additional setup. Just use our code snippet or create an <iframe> yourself (not encouraged) and create an event listener as shown in the example here.


Receive events when opening the booking page in a new tab

Because of browser constraints, this approach is more tricky. Most browsers automatically set rel=noopener when clicking href elements that also have target="_blank". This prevents the booking page from accessing the window object of the opening page (which is required to send events to the opener). However, one can use JavaScript to open the booking page like the following:

<script> 
function openDemodeskBookingPage() {
window.open(
'https://demodesk.com/book/<your-event-type-slug>',
'DemodeskBookingPage',
'noopener=false' // this should do the trick
);
}
</script>
<button onclick="openDemodeskBookingPage()">Book a demo</button>

Listening to events from the booking page

This section explains the process of creating an event listener. Existing JavaScript events include:

  1. demodesk.timeSlotSelected (Event name): The user selected a time and is forwarded to the booking form (Event description)

  2. demodesk.meetingScheduled (Event name): A demo was successfully booked

All emitted JavaScript events have the following structure: { event: 'demodesk.XXX', data: {...} }. An example of an emitted event is as follows:

{

"event": "demodesk.meetingScheduled",

"data": {

"meetingDate": "2022-06-15T07:00:00.000Z",

"eventTypeSlug": "discovery",

"hostEmail": "host@company.com",

"isReschedule": false,

"form": {

"guests": [],

"customer_email": "test@example.com",

"customer_first_name": "dieter",

"customer_last_name": "demo",

"customer_company_name": "dieter company",

"customer_phone": ""

}

}

}

The following example listens to the custom events and logs the payload to the console output:

window.addEventListener(

'message',

function(e) {

if (isDemodeskEvent(e)) {

console.log('Event name', e.data.event);

console.log('Event payload', e.data.data);

}

}

);

function isDemodeskEvent(e) {

return e.data.event && e.data.event.indexOf('demodesk') === 0;

};


Create Google Tag Manager Trigger

Please refer to this article if you would like to set up conversion tracking with Google Tag Manager.


HubSpot - Merge web analytics data with Contact

Demodesk will create a Contact in HubSpot when a guest books a meeting via the booking page. To merge this Contact with the web analytics information that was already available for the anonymous page visitor, you can send an identify event to HubSpot. This will link all the web analytics information like source, campaign, page visits etc. to the new Contact, as shown below:

window.addEventListener(

'message',

function (e) {

if (isDemodeskMeetingScheduledEvent(e)) {

hubspotIdentify(e.data.data.form.customer_email);

}

}

);

function hubspotIdentify(email) {

var _hsq = window._hsq = window._hsq || [];

_hsq.push(['identify', {email: email}]);

_hsq.push(['trackPageView']); // You have to either call a trackPageView or a custom event (trackCustomBehavioralEvent) to actually send the identification information to hubspot

}

function isDemodeskMeetingScheduledEvent(e) {

return e.data.event && e.data.event === 'demodesk.meetingScheduled';

}

❗Please note: You have to issue either a trackPageView or trackCustomBehavioralEvent event after the identify event so the HubSpot SDK actually sends the identification information to HubSpot.

Did this answer your question?