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

A little disclaimer in the beginning: this article might seem rather technical but please make sure to check the use cases and if there is something 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 events

All emitted JavaScript events have the following structure:

Example event

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

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:

Example: Hubspot - add analytics data to contact

Demodesk will create a Contact in Hubspot when the guest schedules a meeting via the booking page.

To merge this Contact with the tracking information that was already available for the anonymous page visitor, you can send an identify event to Hubspot:

https://developers.hubspot.com/docs/api/events/tracking-code

This will give you all the analytics information like Source, Campaign, etc. for the new Contact.

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?