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
      • Framer – How to Track Tally.so Form Submissions
      • Webflow – How to Track Tally.so Form Submissions
      • Custom/Self-Hosted – How to Track Tally.so Form Submissions
    • Typeform
      • Framer – How to Track Typeform Submissions
      • Webflow – 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 Forms
      • Framer – How to Track HubSpot Form Submissions
      • Custom/Self-Hosted – How to Track HubSpot Form Submissions
      • Webflow – How to Track HubSpot Form Submissions
    • Hubspot Booking Links
      • Framer – How to Track HubSpot Booking Links
      • Webflow – How to Track HubSpot Booking Links
      • Custom/Self-Hosted – How to Track HubSpot Booking Links
  • 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
  • Frequently Asked Questions
Powered by GitBook
On this page

Was this helpful?

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

Custom/Self-Hosted – How to Track Cal.com Booking Submissions

Framer users embedding Cal.com can now easily track booking completions using Humblytics’ privacy-first analytics. This guide walks you through capturing a successful calendar booking as a form submission event—without any cookies, data layers, or complex setup.

Why Track Booking Events?

Capturing successful bookings helps you:

  • Measure conversion performance of your scheduling flows

  • Attribute meetings to traffic sources, campaigns, or experiments

  • Set up conversion goals in funnel reports or A/B tests


Requirements

Before you begin:

  • You’ve embedded Cal.com on your Framer page

  • Humblytics is installed via the site tracking script

  • You are using a named Cal namespace (e.g. "30min" in this example)


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

Use the following embed template. Replace the YOUR-CAL-LINK placeholder with your actual Cal.com booking link.

<!-- 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 this
  });
  Cal.ns["30min"]("ui", {
    "hideEventTypeDetails": false,
    "layout": "month_view"
  });
</script>

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

Viewing the Results

Once installed, successful bookings will appear under Forms or Conversions in your Humblytics dashboard, labeled as "cal-embed" by default.

To track different booking types, update the formName:

formName: 'demo-call'

PreviousFramer – How to Track Cal.com Booking SubmissionsNextHubspot Forms

Last updated 4 days ago

Was this helpful?