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 will 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:
Receive events when adding a booking page as an iframe
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
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
Listening to events from the booking page
This section explains the process of creating an event listener.
Existing JavaScript events are:
demodesk.routingFormSubmitted: The user filled out the routing form and clicked submit. Only applies to routing links, not normal meeting types.demodesk.timeSlotSelected: The user selected a time and is forwarded to the booking formdemodesk.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.
Create Google Tag Manager Trigger
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
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';
}
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).
❗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.