# Webflow – How to Track Cal.com Booking Submissions

Want to track calendar bookings from your Webflow site? If you’re using Cal.com to schedule calls or demos, you can integrate Humblytics to track every successful booking as a conversion—no cookies, pop-ups, or complex data layers required.

This guide walks you through embedding a Cal.com calendar into your Webflow site and tracking bookings using Humblytics.

***

#### Why Track Cal Bookings?

* Measure the effectiveness of landing pages and CTAs
* Attribute bookings to campaigns, traffic sources, or devices
* Trigger conversion goals and power funnel analysis
* Stay compliant with privacy regulations—no cookies used

***

#### Step-by-Step: Embed Cal.com with Humblytics Tracking

**1. Add the Embed Element in Webflow**

In the Webflow Designer:

* Drag an Embed element onto your page
* Paste the following embed code (replace the Cal link with your own):

```
<!-- 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 with your Cal.com link
  });
  Cal.ns["30min"]("ui", {
    "hideEventTypeDetails": false,
    "layout": "month_view"
  });
</script>
<!-- Cal inline embed code ends -->
```

**2. Add Humblytics Tracking Script**

Below the embed, add this inside the same \<script> tag or in a separate embed:

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

***

#### How to View Booking Events in Humblytics

After setup:

1. Log in to your Humblytics dashboard
2. Go to Conversions or Forms
3. Look for "cal-embed" in the list of tracked events
4. Filter by page, referrer, or session to explore full journey insights\\

> 💡 You can rename "cal-embed" to a more descriptive label like "demo-call-booking" if you’re tracking multiple booking types.

***

#### Key Benefits

* No cookies required – works out of the box
* Real-time tracking – see submissions as they happen
* A/B test compatible – use bookings as success goals
* Lightweight setup – one embed block in Webflow is all you need


---

# 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/webflow-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.