Framer – How to Track Cal.com Booking Submissions

Convert every successful calendar booking into a Humblytics conversion event—no cookies, consent banners, or heavyweight tag managers required.

---

Why Track Cal Bookings?

• Quantify how well pages, CTAs, and campaigns drive booked calls

• Attribute bookings to traffic sources, devices, and user journeys

• Trigger funnel goals or A/B-test winners with real revenue signals

• Maintain strict privacy compliance—Humblytics is 100 % cookie-free

---

Step-by-Step Integration

Prerequisites

• Your site already loads the global hmbl.min.js tracking script (36 kb, async).

• You have a live Cal.com event link (e.g., https://cal.com/your-username/demo-call).

1 Embed the Cal.com Widget

Place the snippet where you want the calendar to appear—inside any HTML file, template, or CMS block:

<!-- Cal inline embed code begins -->
<div style="width:100%;height:100%;overflow:auto" 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, 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); }, ns = ar[1];
        api.q = api.q || [];
        if (typeof ns === "string") {
          cal.ns[ns] = cal.ns[ns] || api;
          p(cal.ns[ns], ar); p(cal, ["initNamespace", ns]);
        } else p(cal, ar);
        return;
      }
      p(cal, ar);
    };
  })(window, "https://app.cal.com/embed/embed.js", "init");

  /* Initialise a 30-min event namespace */
  Cal("init", "30min", { origin: "https://cal.com" });

  /* Render the inline calendar */
  Cal.ns["30min"]("inline", {
    elementOrSelector: "#my-cal-inline",
    config: { layout: "month_view" },
    calLink: "your-username/your-cal-link"   <!-- replace with your link -->
  });

  /* Optional UI tweaks */
  Cal.ns["30min"]("ui", {
    hideEventTypeDetails: false,
    layout: "month_view"
  });
</script>
<!-- Cal inline embed code ends -->

2 Hook the Booking Event to Humblytics

Immediately after the embed (inside the same <script> block or a new one below it), add the listener that fires when a booking completes:

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

Rename "cal-embed" to something descriptive like "intro-call-booking" if you track multiple event types.

---

Verifying Bookings in Humblytics

1. Log in to Humblytics → Conversions / Forms

2. Find the Event Label you passed (e.g., cal-embed)

3. Use filters (page, referrer, device, campaign) to analyse performance or build funnels

---

Key Benefits Recap

Benefit	Detail
Cookie-free	No consent banners; privacy-first tracking
Real-time	Bookings appear in your dashboard within seconds
A/B-ready	Use the event as a primary goal in split tests
Lightweight	One embed + one five-line callback—no GTM or plugins

Deploy, test a booking, and start measuring the actions that matter. Happy tracking!