Set up SourceTag with Cal.com

Cal.com (open-source scheduling) supports URL query parameters that map to booking fields. SourceTag appends attribution data as query parameters to the Cal.com embed URL, and Cal.com stores them with the booking.

How it works

Cal.com allows you to pre-fill booking form fields via URL parameters. You create custom booking fields in Cal.com, then SourceTag adds the values as query parameters to the embed URL. When a visitor books, the data is captured.

What you need

• SourceTag installed on your website
• A Cal.com account (self-hosted or cloud)
• A Cal.com event type embedded on your site

Step 1: Create custom booking fields in Cal.com

1. Log in to Cal.com
2. Go to Event Types and edit the event type you want to track
3. Go to the Advanced tab (or Booking Questions)
4. Click Add a question or Add custom field
5. For each SourceTag field:
   • Set the Label to the field name (e.g. st_fc_channel)
   • Set the Identifier/Slug to the same field name
   • Set the field type to Short Text
   • Mark it as Hidden (so it does not show to the person booking)
6. Save the event type

[IMAGE: Screenshot of Cal.com event type settings showing custom booking questions]

Core fields (add these)

• st_fc_channel
• st_fc_detail_1
• st_fc_detail_2
• st_fc_detail_3
• st_fc_detail_4
• st_lc_channel
• st_lc_detail_1
• st_lc_detail_2
• st_lc_detail_3
• st_lc_detail_4
• st_fc_landing_page
• st_lc_landing_page

Optional extended fields

• st_fc_click_id and st_lc_click_id (click IDs)
• st_visits (visit count)
• st_days_to_convert (days since first visit)
• st_device (device type)

[IMAGE: Screenshot of Cal.com with all core custom fields added and set to hidden]

Step 2: Embed Cal.com on your page

Use Cal.com’s embed script to add the booking widget to your page. The page must also have the SourceTag script installed.

<!-- Cal.com embed -->
<div id="my-cal-inline" style="width:100%;height:100%;overflow:scroll"></div>
<script type="text/javascript">
  (function (C, A, L) {
    let p = function (a, ar) { a.q.push(ar); };
    let d = C.document;
    C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; }; if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; }; p(cal, ar); };
  })(window, "https://app.cal.com/embed/embed.js", "init");
  Cal("init", {origin:"https://app.cal.com"});
  Cal("inline", {
    elementOrSelector:"#my-cal-inline",
    calLink: "your-username/meeting-type",
  });
</script>

SourceTag detects the Cal.com embed and appends the attribution data as query parameters to the booking URL.

[IMAGE: Screenshot of Cal.com inline embed on a website]

Step 3: How query parameters work

When SourceTag populates the embed, the booking URL receives parameters like:

https://app.cal.com/your-username/meeting-type?st_fc_channel=paid_search&st_fc_detail_1=google&...

Cal.com maps these query parameters to the matching custom booking fields (matched by the identifier/slug).

Step 4: Test

Visit the page with UTM parameters:

?utm_source=test&utm_medium=cpc&utm_campaign=cal-test

Book a test appointment. In Cal.com, go to Bookings and open the test booking. The custom fields should contain the attribution data.

[IMAGE: Screenshot of Cal.com booking details showing populated custom fields]

Tips

• The custom field identifier/slug must match the SourceTag field name exactly (case-sensitive).
• Cal.com’s webhook and integration payloads include custom field data, so attribution will flow through to your CRM or Zapier automations.
• If you are self-hosting Cal.com, the process is the same. Just make sure the embed URL points to your self-hosted instance.
• The inline embed works best. Popup embeds may also work, but test to confirm the parameters are passed through.