> For the complete documentation index, see [llms.txt](https://docs.humblytics.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.humblytics.com/how-to-track-custom-form-submissions/cal.com/framer-how-to-track-cal.com-booking-submissions.md).

# 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:

```html
<!-- 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:

```html
<!-- 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!