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'