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
  • Step-by-Step Integration
  • Verifying Bookings in Humblytics

Was this helpful?

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

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!

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

Last updated 2 days ago

Was this helpful?