> 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/hubspot-booking-links/framer-how-to-track-hubspot-booking-links.md).

# Framer – How to Track HubSpot Booking Links

### Why track HubSpot booking links?

* Measure lead‑gen performance directly in Humblytics
* Attribute submissions to specific campaigns and traffic sources
* Set goals inside Funnels or A/B Experiments
* Keep tracking cookie‑free and privacy compliant

***

### Prerequisites

| Requirement                                      | Check |
| ------------------------------------------------ | ----- |
| A HubSpot booking link                           | ✔︎    |
| A HubSpot calendar embed                         | ✔︎    |
| Framer project with the Humblytics tag installed | ✔︎    |

If the Humblytics script isn’t yet in your Framer site, follow the Framer installation guide first.

***

### Step‑by‑Step: Track HubSpot Booking Links in Framer

#### 1 · Add the HubSpot embed

1. In your Framer canvas, select **Insert → Embed** (or drag an **Embed** block onto the page).
2. Paste your HubSpot calendar code:

```
<!-- Start of Meetings Embed Script -->
  <div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/your-unique-link">
    <iframe src="https://meetings.hubspot.com/your-unique-link" width="100%" data-hs-ignore="true"></iframe>
  </div>
  <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
<!-- End of Meetings Embed Script --></div>
```

3. Publish your site.

#### 2 · Hook into the submission callback

Edit the embed snippet to add the Humblytics hook:

```
<!-- Humblytics custom tracking begins -->
<script>
  window.addEventListener("message", function (event) {
    // Forward any Hubspot Booking events to the parent → Humblytics
    window.parent.postMessage(event.data, "*");
  });
</script>
<!-- Humblytics custom tracking ends -->
```

#### 3 · Verify in Humblytics

1. Publish & open the live Framer URL.
2. Submit a booking request once.
3. In Humblytics, go to **Conversions → Forms** and look for **Hubspot Meeting Booking**. Data appears within \~30 seconds.

***

### Troubleshooting

| Issue            | Fix                                                                                      |
| ---------------- | ---------------------------------------------------------------------------------------- |
| No event appears | Ensure the Humblytics script is in **Site Settings → Custom Code → Head** and republish. |

***

### Next steps

* **Funnels:** Add the form label as the final step to visualise drop‑off.
* **Experiments:** Use Humblytics A/B tests to compare form placements or CTA copy.

For advanced use cases—multi‑step HubSpot forms, hidden UTM fields, or offline events—email **<support@humblytics.com>** and we’ll guide you through.