Calendly

Attribution does not have a native Calendly connector, but you can track Calendly bookings (demo calls, consultations, meetings, etc.) as conversion events by embedding the Calendly widget on your website and listening for booking events via JavaScript.

Why Embed Instead of Link

⚠️

Do not use direct links to calendly.com

Links like https://calendly.com/your-team/meeting take visitors away from your website. Once they leave, Attribution loses tracking context — the visitor's cookies and session data are no longer accessible, and the booking cannot be attributed to a marketing channel.

Always use Calendly's embedded widget instead. The widget loads inside an iframe on your domain, keeping the visitor on your site and preserving Attribution's tracking cookies throughout the booking flow.

Prerequisites

• Attribution tracking snippet installed on your website
• A Calendly account with at least one event type set up

Step 1 (optional): Capture the visitor's email first

Calendly's booking events carry no personal data — it never passes the invitee's email back to your page. On its own, a booking is still attributed to the visitor's marketing channel (via the Attribution cookie), but it stays anonymous: you won't know who booked. To tie each booking to a known person — useful for account-level and B2B attribution, and for matching bookings to your CRM — capture the email yourself before showing the widget.

Add a short email form that gates the widget. When the visitor submits it, identify them in Attribution, then reveal and initialize Calendly pre-filled with that email (use this instead of the basic embed in Step 2 — not both):

<!-- Calendly widget script -->
<script src="https://assets.calendly.com/assets/external/widget.js" async></script>

<!-- Email gate -->
<form id="calendly-email-gate">
  <input type="email" id="visitor-email" placeholder="[email protected]" required />
  <button type="submit">Continue to scheduling</button>
</form>

<!-- Hidden until the visitor submits their email -->
<div id="calendly-embed" style="min-width: 320px; height: 700px; display: none;"></div>

document.getElementById('calendly-email-gate').addEventListener('submit', function (e) {
  e.preventDefault();
  var email = document.getElementById('visitor-email').value;

  // Tie this visitor — and the booking they're about to make — to a known email
  Attribution.identify({ email: email });

  // Reveal and initialize the widget, pre-filled with the captured email
  document.getElementById('calendly-email-gate').style.display = 'none';
  document.getElementById('calendly-embed').style.display = 'block';
  Calendly.initInlineWidget({
    url: 'https://calendly.com/your-team/meeting',
    parentElement: document.getElementById('calendly-embed'),
    prefill: { email: email },
  });
});

This step is optional. Skip it and bookings are still tracked and attributed to the visitor's channel — they just won't carry an email identity.

Step 2: Add the Calendly Widget

If you completed Step 1, your widget is already embedded — skip to Step 3. To embed the widget without an email gate, add the script and an inline container to your page:

<!-- Calendly widget script -->
<script src="https://assets.calendly.com/assets/external/widget.js" async></script>

<!-- Container for the inline widget -->
<div id="calendly-embed" style="min-width: 320px; height: 700px;"></div>

Then initialize the widget with JavaScript:

Calendly.initInlineWidget({
  url: 'https://calendly.com/your-team/meeting',
  parentElement: document.getElementById('calendly-embed'),
});

Replace your-team/meeting with your actual Calendly event type URL. You can append ?hide_gdpr_banner=1 to the URL to hide Calendly's cookie banner inside the widget.

Step 3: Track Booking Events

Calendly fires postMessage events when visitors interact with the widget. Listen for these events and track them in Attribution:

function isCalendlyEvent(e) {
  return (
    e.origin === 'https://calendly.com' &&
    e.data.event &&
    e.data.event.indexOf('calendly.') === 0
  );
}

window.addEventListener('message', function (e) {
  if (!isCalendlyEvent(e)) return;

  if (e.data.event === 'calendly.date_and_time_selected') {
    // Visitor selected a time slot
    Attribution.track('Calendly: Time Selected');
  }

  if (e.data.event === 'calendly.event_scheduled') {
    // Booking confirmed
    Attribution.track('Calendly: Event Scheduled');
  }
});

Available Calendly Events

📘

Attribution and Segment are fully compatible

If you already use Segment on your website, any analytics.track() and analytics.identify() calls automatically flow into Attribution. You do not need to install the Attribution snippet separately — Segment acts as the data transport.

Questions or Issues

Contact [email protected] if you need help setting up Calendly tracking.