When you embedded a Demodesk booking link to your website, this article will show you everything you need to know about additional use cases.

This article is rather technical but please make sure to check the use cases and if there is something for you. You will need a website developer on your team to set it up for you.

Use cases:

  • 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

  • in general: react on actions that are triggered by the booking page

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 these two situations:

  • You embed the booking page as iframe (eg. with our embed snippet)

  • You open the link to the booking page with [window.open](<http://window.open>) as shown below

Listening to meeting

All emitted JavaScript events have the following structure:

{ event: 'demodesk.XXX', data: {...} }

Example event

{

"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:

function isDemodeskEvent(e) {

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

};

window.addEventListener(

'message',

function(e) {

if (isDemodeskEvent(e)) {

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

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

}

}

);

Receive events when embedding a booking page as an iframe

Nothing is required to make this work. Just use our embed snippet or create an <iframe> yourself (not encouraged)

Receive events when opening the booking page in a new tab

Because of browser constraints, this is more tricky. Most browsers automatically set rel=noopener when clicking href elements that also have target="_blank". This prevents the booking page to access 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:

Example: Create Google Tag Manager Trigger

You can create a trigger for custom events like this: https://support.google.com/tagmanager/answer/7679219

Example:

function isDemodeskEvent(e) {

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

};

window.addEventListener(

'message',

function(e) {

if (isDemodeskEvent(e)) {

var dataLayer = window.dataLayer || [];

dataLayer.push({'event': e.data.event});

// the implementation for sending custom events to your tracking tool of choice might be different

}

}

);

Example: Hubspot - Merge web analytics data with Contact

Demodesk will create a Contact in Hubspot when the 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.

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';

}

Note that 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?