Calendly Conversion Tracking¶

Overview¶

Rose can detect when a visitor completes a Calendly booking on your website and record it as a conversion. This requires a specific embed method — Calendly's default popup widget (initPopupWidget) does not allow Rose to detect bookings. You need to use the inline widget method instead.

How It Works¶

sequenceDiagram participant Visitor participant Page as Your Page + Rose Widget participant Calendly as Calendly Overlay Visitor->>Page: Clicks "Book a demo" Page->>Calendly: Opens inline widget in overlay Visitor->>Calendly: Fills form & books meeting Calendly->>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 Calendly 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 Calendly 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 Calendly 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 use the inline widget method instead of Calendly's default popup. Otherwise, Rose can't detect the booking.

Calendly offers two ways to open the booking form:

Method	Rose tracking?
`Calendly.initInlineWidget()`	Works
`Calendly.initPopupWidget()`	Does not work

This is a Calendly limitation — their popup mode doesn't notify the parent page when a booking is completed. The inline method does. The setup below gives you the same popup look and feel while using the inline method under the hood.

Prerequisites¶

Your site must already have the Calendly widget script loaded:

<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>

Most sites using Calendly embeds already have this. If not, add it to your site's <head>.

Add this script to your site's footer (in Webflow: Project Settings > Custom Code > Footer):

<script>
function openCalendlyInline(url) {
  // Create fullscreen overlay
  var overlay = document.createElement('div');
  overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;';

  // Create container for the Calendly widget
  var container = document.createElement('div');
  container.style.cssText = 'width:min(100%,480px);height:min(100%,700px);background:white;border-radius:8px;overflow:hidden;position:relative;';

  // Add close button
  var closeBtn = document.createElement('button');
  closeBtn.textContent = '\u2715';
  closeBtn.style.cssText = 'position:absolute;top:8px;right:12px;z-index:10;background:none;border:none;font-size:20px;cursor:pointer;color:#666;padding:4px 8px;';

  function cleanup() { overlay.remove(); }
  closeBtn.addEventListener('click', cleanup);
  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) cleanup();
  });

  container.appendChild(closeBtn);
  overlay.appendChild(container);
  document.body.appendChild(overlay);

  // Use initInlineWidget (not initPopupWidget) so Rose can track bookings
  Calendly.initInlineWidget({ url: url, parentElement: container });
}
</script>

This creates a popup-like overlay that uses the inline method internally. The visitor experience is identical to initPopupWidget (overlay with close button), but Rose can now detect completed bookings.

Step 2 — Update your "Book a demo" buttons¶

Replace initPopupWidget with the new helper in your button onclick handlers.

Before:

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/d/YOUR-ID'}); return false;">
  Book a demo
</a>

After:

<a href="#" onclick="openCalendlyInline('https://calendly.com/d/YOUR-ID'); return false;">
  Book a demo
</a>

Step 3 — Convert external links (optional)¶

If some of your buttons open Calendly in a new tab (target="_blank"), consider switching them to the inline popup as well:

Before:

<a href="https://calendly.com/d/YOUR-ID" target="_blank">
  Book a demo
</a>

After:

<a href="javascript:;" onclick="openCalendlyInline('https://calendly.com/d/YOUR-ID'); return false;">
  Book a demo
</a>

This keeps visitors on your site and allows Rose to track the booking.

What Gets Tracked¶

Visitor action	Tracked?
Clicks "Book a demo"	Always
Completes booking in overlay	Yes — recorded as conversion
Fills routing form but is rejected	No — Calendly doesn't notify when a visitor is rejected
Closes overlay without booking	No

Calendly Routing Forms¶

Some Calendly links use routing forms that ask qualifying questions before showing the calendar. If the visitor doesn't qualify, Calendly shows a rejection message instead of a booking page. Rose can only track completed bookings, not routing form rejections — this is expected behavior.

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	Website button still uses `initPopupWidget`	Update onclick to use `openCalendlyInline()` (see Part 2)
No conversion after booking	Website button opens Calendly in new tab	Switch to inline popup (see Part 2)
No conversion after booking	Tracking disabled in backoffice	Enable post_message in Settings → Analytics → Form Detection Strategies
"Oops, something went wrong" in overlay	Calendly URL is invalid or expired	Verify the link works by opening it directly
Overlay opens but is empty	Calendly script not loaded on your site	Add the Calendly script to your page `<head>`
Overlay shows but Rose widget disappears	z-index conflict	The overlay uses `z-index: 999999` which should be above the Rose widget