# 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'
```


---

# 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/custom-self-hosted-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.