Calendly

Ole Dallerup Updated by Ole Dallerup

If you are using Calendly to book meetings, such as demo bookings. This article will help describe how you track each booked meeting into Dreamdata and ensure you can use the data within your customer journey.

There are high level twp different ways to ensure data being tracked. Either method is better than the other and it's up to you to pick the method that works best for you.

Gating the Calendly form

As you would maybe gate an ebook with a form asking users to give their name, email and company for you to send them this unique content you might want to consider doing the same with your Calendly form.

Let's say you want your prospects to be able to book a demo. The straight forward way of doing this would be to create a basic form on your website asking the user for information you would normally ask about such as name, email and company. If you are using the Dreamdata auto-identify script we will automatically identify the users and associate the anonymous cookie id with the submitted email. Read more about tracking forms here.

After the users has submitted the basic form, you have multiple options we will cover them all.

Redirect to Calendly

Right after the form submit you might redirect users to a page where they see the Calendly form, or you might want to first validate the users email and via the email share the next page.

If you decided to send the user directly to the Calendly url, you might want to parse the users information directly in the calendly url, such as email to avoid having the user to enter the same information twice. Read more about how to add pre-filled information the Calendly url here. This can be done both in the email you send to the prospect or if you would want to redirect the user directly to the calendly link.

https://calendly.com/YOUR_LINK/30min?email=john@doe2.com&first_name=John&last_name=Doe

If you decide to use the method, and would want to track the Calendly scheduling as a conversion or other how its an important trackingpoint for you in the customer journey we recommend combining it with the use of Zapier as described below.

Redirect to embed form

You might also decide to send the user to an embed version of the Calendly form on your own website. It has the advantage that you are now able to track when the user submits the Calendly form directly in the browser using post message. Read more about what post messages Calendly make available here.

window.addEventListener("message", function(e) {
  if(e.origin === "https://calendly.com" && e.data.event && e.data.event.indexOf("calendly.") === 0) {
    analytics.track("calendlyFormSubmit");
  }
});

If you decide to use the embed method you might want to prefill some of the information the user has already given. Read more about prefilling the Calendly form here.

Note: If the user (in the current browser) is identified via the Dreamdata tracking script, you are able to pull this information directly from localstorage using the Dreamdata sdk as example.

window.analytics.ready(function() {
    var name, email = '';
    if (window.analytics.user().traits().name)
        name = window.analytics.user().traits().name;
    if (window.analytics.user().traits().email)
        email = window.analytics.user().traits().email;

    window.Calendly.initInlineWidget({
        url: 'https://calendly.com/YOUR_LINK/30min',
        name: name,
        email: email
    });
});

Questions & Answers

Q:You might ask why not just directly embed the Calendly form on your website?

A: Where that technically easy to embed a Calendly form on your website and your users might also find that very easy. Unfortunately Calendly does not have many advanced options to sending information back to the parent page on who scheduled a time. Which gives you limited possibility linking the full user journey with the know user. Here you can read about what information Calendly are able to post back to the parent.

Zapier or Webhooks

Both Calendly and Dreamdata has a Zapier integration. With the combination of these, you are able to track all Calendly schedules and ensure you track and identify the user within Dreamdata. You might however also use Calendly webhooks and Dreamdata server side apis and implement this yourself if you prefer.

For this method to work as well as the gated version its important your are able to parse information to the calendly form that help Dreamdata associate the users anonymous session with the calendly booking. In the gated version this happens with the users email address, however here it will happen by parsing in the users anonymous id first to the Calendly form and then later to Dreamdata in Zapier or your Webhook.

In this example below we use the utm_content parameter to sending in the users anonymous id when loading the embed calendly form. We rarely see utm_content being used, however it's up to you to select the UTM parameter you don't use for other purposes. Read more about setting utm parameters in Calendly embed forms here.

window.analytics.ready(function() {
    var aId = window.analytics.user().anonymousId();

    window.Calendly.initInlineWidget({
        url: 'https://calendly.com/YOUR_LINK/30min',
        utm: { utmContent: aId }
    });
});

When you set up Zapier you first want to decide it you want to track all your Calendly forms to Dreamdata or only a selected few. See example the screenshot here how you might filter by Calendly event type.

The next step is that you would want to parse any bookings made via Calendly to Dreamdata. Here is an example of how you might want to do that using the Track & Identify method in the Dreamdata Zapier integration. In this example its assumed that utm_content contains the anonymous id.

How did we do?

URL query parameters

Tracking iframes with auto-identify script

Contact