Cal.com + Framer Integration: Complete Setup Guide 2025

Cal.com + Framer integration lets you embed Cal.com directly into your Framer site with complete booking attribution. This guide shows you how to set up Cal.com on Framer 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 Framer site - with perfect attribution from click to booked meeting.

What you'll accomplish: Cal.com Framer 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 Framer site (free or paid plan)

✅ A Pimms account for tracking

1. Add Pimms Analytics Script to Framer

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

1. In Framer, go to your site settings → Custom Code
2. Paste the following script in the Head section:

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

Framer custom code

3. Publish your site

2. Integration Methods

Choose the integration method that best fits your Framer 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 Framer, 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 embedded calendar in Framer

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

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

2. Get the Cal.com embed code:

• In your Cal.com dashboard, go to Embed → Inline embed → HTML (iframe)
• Copy the script code
• In Framer, add an Embed component where you want the calendar
• Paste the Cal.com script code

Cal.com inline embed dashboard

3. Update the embed code:

• Change the calLink parameter with your actual Cal.com link:

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

Warning: replace double quotes with ` (grave accent) in the calLink parameter.

• and change id-of-the-element with the ID of the element where you want the calendar:

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

4. Publish your site

Method 3: Popup Calendar

Perfect for booking buttons that open a popup calendar.

Example of popup calendar in Framer

1. In Framer, 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 Framer site head

Cal.com popup embed dashboard

4. Publish your site

4. Test Your Integration

1. Create a Pimms link that redirects to your Framer 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.

5. Troubleshooting

No conversions showing in Pimms

• Verify the Pimms analytics script is correctly installed
• 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 Framer 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 Framer is now complete! Every booking through your Framer site will be tracked with complete attribution data.

👉 Create your first Pimms link