Calendly Integration¶

What Rose Does with Calendly¶

Rose enhances your Calendly booking flow in several ways:

Booking conversion tracking — When a visitor completes a Calendly booking on your website (via an iframe embed), Rose detects it and records a conversion.
Session attribution on external links — Rose automatically adds your session tracking parameter to Calendly links on your website, so bookings carry the Rose session ID even when the visitor navigates to Calendly.
Email pre-fill — When In-Chat Booking is enabled, Rose collects the visitor's email before redirecting and passes it to Calendly so they don't have to type it again.

Configuration Options¶

Setting	Where	Default	What it does
CTA action	Settings → CTAs	navigate	Set to popup for on-page overlay booking with conversion tracking
Post message strategy	Settings → Analytics → Form Detection	ON	Enables booking detection from Calendly iframes
UTM parameter	Settings → Analytics	(not set)	When set, Rose adds the session ID to Calendly links on your page
In-Chat Booking	Settings → In-Chat Booking	OFF	Collects email before redirect, pre-fills Calendly

Setup Scenarios¶

How you use Calendly on your website determines what Rose can do and what setup is needed.

The Calendly booking form opens as an overlay or inline embed on your website. The visitor stays on your page throughout.

What works automatically:

Rose detects booking completion and records a conversion (via PostMessage detection)
CTA click tracking

What you need to configure:

Set your Rose CTA action to "popup" — In Settings → Call-to-Actions, find the CTA that links to Calendly and set its Action to popup. This tells the Rose widget to open Calendly as an overlay instead of navigating away.
Use the inline widget method on your website buttons — Calendly's default popup (initPopupWidget) does not notify the parent page when a booking is completed. You need to use the inline widget method instead, which gives the same popup look and feel while allowing Rose to detect bookings.

Prerequisites: Your site must 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>

Step 1 — Add the inline popup helper 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>

Step 2 — Update your "Book a demo" buttons to use the new helper:

<!-- 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 (if any of your buttons open Calendly in a new tab):

<!-- 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>

Scenario B: External Calendly links (your buttons navigate to calendly.com)¶

Your "Book a demo" buttons link directly to Calendly (e.g., https://calendly.com/d/abc-123) and the visitor leaves your site to complete the booking.

What works automatically:

Session attribution — When a UTM parameter is configured in Settings → Analytics, Rose automatically adds the session ID to all Calendly links on your page. When the visitor reaches Calendly, the UTM is included in the booking URL (e.g., ?utm_source=abc-123-session-id). Calendly passes UTM parameters through to the booking event, making them available in:
- Calendly analytics
- Calendly webhook payloads
- Your CRM (if connected to Calendly)
This lets you trace which Rose conversations led to bookings, even though the booking happened on Calendly's site.
CTA click tracking — The click on "Book a demo" is tracked before the visitor navigates away.

What does NOT work with external links:

Booking conversion tracking — Rose cannot detect when the booking is completed because the visitor has left your site. If you need conversion tracking, switch to Scenario A (inline embed).

What you need to configure:

Set a UTM parameter — In Settings → Analytics → UTM parameter, enter a parameter name (e.g., utm_source). Rose will use this to tag Calendly links with the session ID.

Best of both worlds

If you want both session attribution AND conversion tracking, switch your website buttons to the inline embed method (Scenario A). The UTM parameter is still added to the Calendly URL inside the iframe, giving you full attribution and on-page conversion detection.

Scenario C: Mixed (some embed, some external)¶

If your website uses both approaches (e.g., the hero button opens an overlay while the footer link navigates to Calendly), both features work together:

Embed buttons get on-page conversion tracking
External links get session attribution via UTM decoration

No additional configuration needed beyond what's described in Scenarios A and B.

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.

What Gets Tracked¶

Visitor action	Tracked?	Requires
Clicks "Book a demo" (any button)	Yes — tracked as CTA click	Nothing (automatic)
Completes booking in overlay (Scenario A)	Yes — recorded as conversion	Inline widget + post_message enabled
Completes booking on calendly.com (Scenario B)	Session ID in Calendly via UTM	UTM parameter configured
Fills routing form but is rejected	No — Calendly doesn't notify	—
Closes overlay without booking	No	—

Verification¶

Conversion tracking (Scenario A)¶

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

Session attribution (Scenario B)¶

Open your website with the Rose widget active
Right-click a "Book a demo" link and select Inspect
Check the href attribute — it should include your UTM parameter with the session ID (e.g., ?utm_source=abc-123-session-id)
Click the link and verify the Calendly URL in the address bar includes the UTM parameter

Troubleshooting¶

Issue	Cause	Fix
No conversion after booking in overlay	CTA action set to "navigate"	Set to popup in Settings → Call-to-Actions
No conversion after booking in overlay	Website button uses `initPopupWidget`	Update to `openCalendlyInline()` (see Scenario A)
No conversion after booking in overlay	Website button opens Calendly in new tab	Switch to inline popup (see Scenario A)
No conversion after booking in overlay	Tracking disabled	Enable post_message in Settings → Analytics → Form Detection Strategies
Calendly links don't have UTM parameter	UTM parameter not configured	Set a UTM parameter name in Settings → Analytics
Calendly links don't have UTM parameter	Rose widget not loaded on the page	Check that the Rose script is installed and running
"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	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