Notifying the parent window of interactions on the booking page

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.

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>

This section explains the process of creating an event listener.

Existing JavaScript events are:

1. demodesk.routingFormSubmitted: The user filled out the routing form and clicked submit. Only applies to routing links, not normal meeting types.
2. demodesk.timeSlotSelected: The user selected a time and is forwarded to the booking form
3. demodesk.meetingScheduled: A demo was successfully booked

All emitted JavaScript events have the following structure: { event: 'demodesk.XXX', data: {...} }.

The following example listens to the custom events and logs the payload to the console output (use this for inspecting the communication and for developing/troubleshooting):

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;

};

Example events

demodesk.meetingScheduled - 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": ""

}

}

}

demodesk.routingFormSubmitted - example:

{

"event": "demodesk.routingFormSubmitted",

"data": {

"demoTemplateRoutingSlug": "swzde3g9",

"form": {

"company_size": ">1000"

},

"rawForm": {

"51": "4"

},

"redirectUrl": "https://max.teshub.demodesk-dev.com/book/dieter-co/ product-demo?company_size=4&autoRoute=true&tokens=company_size&answers=%3E1000&routing=true&dd_entry_point_template_id=1&dd_entry_point_template=swzde3g9&dd_entry_point_slug=dieter-co&dd_skip_booking_questions=false" }

}

Note 1: The attributes under form will differ for you as they depend on the questions in your routing form.

Note 2: The rawForm attribute in this event is a key-value store, mapping the routing question IDs to an option ID the user selected. The form attribute, on the other hand, contains the same data but humanizes the IDs. The keys are the token slugs and the values are the labels of the options.

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

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

}

Idea: If you're using Demodesk routing forms with the email token, you could create Hubspot contacts right after the customer filled out the routing form and clicked submit. This way, you still collect the email address even if the customer does not finish the booking flow.

To do this, use the above example but instead of listening to the demodesk.meetingScheduled event, listen to demodesk.routingFormSubmitted. (Make sure to inspect and double-check the actual form data and names of the tokens, though).