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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.humblytics.com/how-to-track-custom-form-submissions/cal.com/framer-how-to-track-cal.com-booking-submissions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.