Cal.com + Webflow Integration: Complete Setup Guide 2025

Cal.com + Webflow integration lets you embed Cal.com directly into your Webflow site with complete booking attribution. This guide shows you how to set up Cal.com on Webflow with Pimms tracking in 10 minutes for seamless meeting conversion tracking.

You'll get real-time booking analytics showing exactly which marketing campaigns, ads, or YouTube posts drive actual appointment bookings through your Webflow site - with perfect attribution from click to booked meeting.

What you'll accomplish: Cal.com Webflow integration, booking tracking setup, and complete meeting attribution for every appointment showing which campaigns generate your best appointments.

Prerequisites

Before starting, make sure you have:

✅ A Cal.com account with webhook integration set up

✅ A Webflow site (free or paid plan)

✅ A Pimms account for tracking

1. Add Pimms Analytics Script to Webflow

First, add the Pimms analytics script to your Webflow site to enable tracking:

1. In your Webflow Designer, go to Project Settings → Custom Code
2. Add this script to the Head Code section:

<script defer src="https://cdn.pimms.io/analytics/script.detection.js"></script>

3. Publish your site

2. Integration Methods

Choose the integration method that best fits your Webflow site design:

Method 1: Calendar Link or Button

Calendar opens in a fullscreen tab. Perfect for simple booking buttons or call-to-action sections.

1. In Webflow, add a Button or Link element
2. Set the Link to your Cal.com URL with ?pimms_id=1 parameter

Example:

https://cal.com/yourname/meeting?pimms_id=1

Alternative approach: Instead of using ?pimms_id=1, you can create a Pimms short link pointing to your Cal.com page. However, this breaks attribution tracking - all bookings will be attributed to the button click instead of the actual traffic source. See FAQ for details

Method 2: Inline Calendar Embed

Perfect for dedicated booking pages or sections where you want the calendar directly embedded.

Example of embed calendar in Webflow

1. Add the expose script to your Webflow site head (below the detection script):

<script src="https://cdn.pimms.io/analytics/script.expose.js"></script>

2. Copy the html code in your Cal.com dashboard in Embed → Inline embed → HTML (iframe)

Cal.com inline embed dashboard

3. Paste the script code into the head of your Webflow site

• Change in the code the calLink parameter with your actual Cal.com link (change your/cal-link with your actual Cal.com link)

calLink: `your/cal-link?pimms_id=${window.pimms_id}`

Warning: please be careful replacing double quotes with ` (grave accent) in the calLink parameter.

• and the id-of-the-element with the id of the element where you want the calendar.

elementOrSelector: "#id-of-the-element",

3. Publish your site

Method 3: Popup Calendar via element click

Perfect for booking buttons that open a popup calendar.

Example of popup calendar in Webflow

1. In Webflow, add a Button element
2. Add this code to the button's Custom Attributes:

• Attribute Name: data-cal-link
• Attribute Value: your-cal-link?pimms_id=1

Example of a button with data-cal-link attribute

3. Copy / paste the code from Embed → Popup via element click → HTML (iframe) in your Webflow site head

Cal.com popup embed dashboard

4. Publish your site

4. Test Your Integration

1. Create a Pimms link that redirects to your Webflow site
2. Open your link in an incognito tab
3. Click your booking button
4. Book a test meeting with a new test email
5. Check your Pimms dashboard

You should see a new conversion tracked automatically.

4. Troubleshooting

No conversions showing in Pimms

• Verify the Pimms analytics script is installed correctly
• Make sure you're using the correct Cal.com link format
• Test in incognito mode with a fresh email address
• Check that your Cal.com webhook is properly configured

Calendar not loading

• Verify your Cal.com link is correct
• Check that the embed script is loading properly
• Ensure your Webflow site is published
• Try clearing your browser cache

Popup not opening

• Verify the data-cal-link attribute is set correctly
• Check that the Cal.com embed script is loaded
• Ensure the button element is properly configured

FAQs

You're all set 🎉

Your Cal.com integration with Webflow is now complete! Every booking through your Webflow site will be tracked with complete attribution data.

👉 Create your first Pimms link