Humblytics
  • Overview
    • Introduction to Humblytics
    • Features Overview
    • Frequently Asked Questions
  • How to Get Started
    • Create a New Account
    • Add Humblytics Analytics to a Custom / Self-Hosted Site
    • How to Add Humblytics Analytics to Your Weblow Site
    • How to Add Humblytics Analytics to Your Framer Site
  • Split Testing Overview
    • How Humblytics Split Testing Works - Under the Hood
    • How to Setup a Split Test
    • Creating A/B Page Variants for Split Testing
    • How to Analyze Split Test Data
    • Using the Humblytics A/B Sample‑Size Calculator
    • Deciding How Long to Run an A/B Test
  • How to Track Custom Form Submissions
    • GoHighLevel
    • Tally.so
      • Webflow – How to Track Tally.so Form Submissions
      • Framer – How to Track Tally.so Form Submissions
      • Custom/Self-Hosted – How to Track Tally.so Form Submissions
    • Typeform
      • Webflow – How to Track Typeform Submissions
      • Framer – How to Track Typeform Submissions
      • Custom/Self-Hosted – How to Track Typeform Submissions
    • Cal.com
      • Webflow – How to Track Cal.com Booking Submissions
      • Framer – How to Track Cal.com Booking Submissions
      • Custom/Self-Hosted – How to Track Cal.com Booking Submissions
    • Hubspot
      • Framer – How to Track HubSpot Form Submissions
      • Custom/Self-Hosted – How to Track HubSpot Form Submissions
      • Webflow – How to Track HubSpot Form Submissions
  • How to Track Custom Click Events
    • How to Track Click Events on Custom / Self‑Hosted Site
    • How to Add Custom Event Tracking for Webflow Sites
    • How to Add Custom Event Tracking for Framer Sites
  • Understanding Your Data
    • Understanding Site Traffic
    • Understanding Pages Data
    • Understanding Click Data
    • Understanding Forms Data
    • Understanding Heatmap
    • Understanding Funnels
  • Campaign Tracking with UTM Links
Powered by GitBook
On this page

Was this helpful?

  1. How to Track Custom Form Submissions
  2. Cal.com

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

PreviousCal.comNextFramer – How to Track Cal.com Booking Submissions

Last updated 16 days ago

Was this helpful?