Webflow – How to Track Cal.com Booking Submissions

Want to track calendar bookings from your Webflow site? If you’re using Cal.com to schedule calls or demos, you can integrate Humblytics to track every successful booking as a conversion—no cookies, pop-ups, or complex data layers required.

This guide walks you through embedding a Cal.com calendar into your Webflow site and tracking bookings using Humblytics.

---

Why Track Cal Bookings?

• Measure the effectiveness of landing pages and CTAs

• Attribute bookings to campaigns, traffic sources, or devices

• Trigger conversion goals and power funnel analysis

• Stay compliant with privacy regulations—no cookies used

---

Step-by-Step: Embed Cal.com with Humblytics Tracking

1. Add the Embed Element in Webflow

In the Webflow Designer:

• Drag an Embed element onto your page

• Paste the following embed code (replace the Cal link with your own):

<!-- Cal inline embed code begins -->
<div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline"></div>
<script type="text/javascript">
  (function (C, A, L) {
    let p = function (a, ar) { a.q.push(ar); };
    let d = C.document;
    C.Cal = C.Cal || function () {
      let cal = C.Cal;
      let ar = arguments;
      if (!cal.loaded) {
        cal.ns = {};
        cal.q = cal.q || [];
        d.head.appendChild(d.createElement("script")).src = A;
        cal.loaded = true;
      }
      if (ar[0] === L) {
        const api = function () { p(api, arguments); };
        const namespace = ar[1];
        api.q = api.q || [];
        if (typeof namespace === "string") {
          cal.ns[namespace] = cal.ns[namespace] || api;
          p(cal.ns[namespace], ar);
          p(cal, ["initNamespace", namespace]);
        } else p(cal, ar);
        return;
      }
      p(cal, ar);
    };
  })(window, "https://app.cal.com/embed/embed.js", "init");

  Cal("init", "30min", { origin: "https://cal.com" });
  Cal.ns["30min"]("inline", {
    elementOrSelector: "#my-cal-inline",
    config: { "layout": "month_view" },
    calLink: "your-username/your-cal-link" // Replace with your Cal.com link
  });
  Cal.ns["30min"]("ui", {
    "hideEventTypeDetails": false,
    "layout": "month_view"
  });
</script>
<!-- Cal inline embed code ends -->

2. Add Humblytics Tracking Script

Below the embed, add this inside the same <script> tag or in a separate embed:

<!-- Humblytics custom tracking begins -->
<script>
  Cal.ns["30min"]("on", {
    action: "bookingSuccessful",
    callback: (e)=>{
      window.Humblytics.trackFormSubmission("cal-embed");
    }
  });
</script>
<!-- Humblytics custom tracking ends -->

---

How to View Booking Events in Humblytics

After setup:

1. Log in to your Humblytics dashboard

2. Go to Conversions or Forms

3. Look for "cal-embed" in the list of tracked events

4. Filter by page, referrer, or session to explore full journey insights\

💡 You can rename "cal-embed" to a more descriptive label like "demo-call-booking" if you’re tracking multiple booking types.

---

Key Benefits

• No cookies required – works out of the box

• Real-time tracking – see submissions as they happen

• A/B test compatible – use bookings as success goals

• Lightweight setup – one embed block in Webflow is all you need