Cal.com Conversion Tracking¶

Overview¶

Rose can detect when a visitor completes a Cal.com booking on your website and record it as a conversion. The booking must happen on your page — in a modal overlay or inline embed. If your buttons navigate the visitor to cal.com in a new tab, Rose cannot detect the booking because the visitor has left your site.

How It Works¶

sequenceDiagram participant Visitor participant Page as Your Page + Rose Widget participant Cal as Cal.com Overlay Visitor->>Page: Clicks "Book a demo" Page->>Cal: Opens Cal.com overlay Visitor->>Cal: Selects time & confirms booking Cal->>Page: Booking confirmed Note over Page: Rose detects the booking<br/>and records a conversion

Part 1: Rose Backoffice Settings¶

These settings are configured in your Rose backoffice.

When a visitor clicks a CTA button inside the Rose widget (e.g., "Book a Demo"), Rose needs to open Cal.com as an overlay instead of navigating the visitor away from your site.

Go to Settings → Call-to-Actions
Find the CTA that links to your Cal.com booking page
Set the Action field to popup
Click Save

If the action is left on "navigate" (the default), the visitor will be redirected to Cal.com and Rose won't be able to detect the booking.

Verify tracking is enabled¶

Booking tracking is enabled by default. To verify:

Go to Settings → Analytics
Scroll to Form Detection Strategies
Confirm that post_message is toggled ON

If it was manually disabled, toggle it back on and click Save.

Part 2: Your Website¶

These changes are made on your website's code or site builder, outside of Rose.

Your website's own "Book a demo" buttons (the ones in your navigation, hero section, etc.) also need to open Cal.com as an overlay instead of navigating away. Otherwise, when a visitor clicks one of those buttons, they leave your site and Rose can't track the booking.

Step 1 — Add the Cal.com embed script¶

Add this to your site's <head> (skip if already present):

<script src="https://app.cal.com/embed/embed.js" async></script>

Step 2 — Use `data-cal-link` on your buttons¶

The simplest way to open Cal.com as an overlay is to use the data-cal-link attribute. Replace external links with this attribute on your "Book a demo" buttons.

Before (external link — Rose cannot track):

<a href="https://cal.com/your-team/demo" target="_blank">
  Book a demo
</a>

After (overlay — Rose can track):

<a href="#" data-cal-link="your-team/demo" data-cal-config='{"layout":"month_view"}'>
  Book a demo
</a>

Note

The data-cal-link value is the path only (e.g., your-team/demo), not the full URL. Remove https://cal.com/ from your link.

If you need more control, you can open the Cal.com modal programmatically:

Cal("modal", {
  calLink: "your-team/demo",
  config: { layout: "month_view" }
});

Sites where you can't modify button HTML (Figma Sites, etc.)¶

Some site builders (like Figma Sites) don't let you add attributes or JavaScript to individual buttons. In that case, you can use a single script added to your site's custom code that intercepts clicks on matching buttons and opens the Cal.com modal instead of navigating away.

Add the Cal.com embed script¶

Same as above — add this to your site's custom code section:

<script src="https://app.cal.com/embed/embed.js" async></script>

Add the click interceptor¶

Add this script to your site's custom code (e.g., in Figma Sites: Settings → Custom Code):

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('click', (e) => {
    const el = e.target.closest('[role=link], a[href*="cal.com"]');
    if (!el) return;
    if (el.textContent.trim() === 'Book a demo') {
      e.preventDefault();
      e.stopPropagation();
      if (window.Cal) {
        Cal('modal', { calLink: 'your-team/demo' });
      } else {
        window.open('https://cal.com/your-team/demo', '_blank');
      }
    }
  }, true);
});
</script>

Customize the script

Replace your-team/demo with your actual Cal.com path (e.g., johary-randria/30mn-discovery-us). Replace Book a demo with the exact text on your button if it differs.

The script intercepts clicks on Cal.com links and buttons with matching text, and opens the Cal.com modal overlay instead of navigating away. If the Cal.com embed script hasn't loaded yet, it falls back to opening Cal.com in a new tab.

This script does not slow down your page — the Cal.com embed script loads in the background, and the click listener has no performance impact.

What Gets Tracked¶

Visitor action	Tracked?
Clicks "Book a demo"	Always
Completes booking in overlay	Yes — recorded as conversion
Closes overlay without booking	No
Navigates to Cal.com in new tab	No — visitor has left your site

Verification¶

After setup, verify tracking works:

Open your website with the Rose widget active
Open browser DevTools (F12) > Console
Click a "Book a demo" button
Complete the booking flow in the overlay
In the console, filter for form_submitted — you should see a tracking event

Troubleshooting¶

Issue	Cause	Fix
No conversion after booking	CTA action set to "navigate" in backoffice	Set to popup in Settings → Call-to-Actions
No conversion after booking	Tracking disabled in backoffice	Enable post_message in Settings → Analytics → Form Detection Strategies
No conversion after booking	Website button opens Cal.com in new tab	Change button to use `data-cal-link` overlay (see Part 2)
Cal.com modal doesn't open	Cal.com embed script not loaded on your site	Add the Cal.com embed script to your page
Overlay shows but Rose widget disappears	z-index conflict	The overlay uses `z-index: 999999` which should be above the Rose widget