Auto-forwarding Query Parameters

Learn how to automatically forward query parameters from your page to Cal.com embeds

Auto-forwarding Query Parameters

Cal.com’s embedding solution provides a powerful feature that allows you to automatically forward query parameters from your webpage to the embedded booking page.

How It Works

When you embed Cal.com on your webpage, any query parameters present in the URL of your page will automatically be forwarded to the embedded Cal.com booking page. By default, this feature is disabled and can be enabled by adding the following code right after the code you get from Embed Snippet Generator.

<script>
  Cal.config = Cal.config || {};
  Cal.config.forwardQueryParams = true;
</script>

Example

Let’s say you have Cal.com embedded on your page with this URL:

https://your-website-example.com/book?name=John&email=[e-mail]

These query parameters (name and email) will automatically be forwarded to the Cal.com embed, pre-filling the corresponding fields in the booking form.

Use Cases

1. Pre-filling User Information: If your users are already logged into your application, you can automatically pass their information to the booking form.

2. Tracking Sources: Add UTM parameters or other tracking information that you want to preserve throughout the booking flow.

When this is embedded on a page with query parameters, they will automatically be forwarded to the Cal.com booking flow.

Security Consideration

Query parameters are passed as-is, so ensure you’re not including sensitive information in your URL parameters

Framer-specific issue

Framer seems to add the custom HTML (with JS) in an iframe of their own, so Cal.com Embed Snippet isn’t able to access the query params of the webpage directly. So, you can’t auto-forward query params in Framer websites at the moment, but you can pass any query param using the prefill config as explained here.

You can get the value of query param and pass it to the prefill config as shown below:

// For Framer websites, auto-forward of query params is not possible.
// So, we need to get the query param from the parent and pass it to the prefill config.
const queryParams = new URLSearchParams(window.parent.location.search);
const myQueryParamValue = queryParams.get('my-query-param');

Cal("inline", {
    elementOrSelector: "#my-cal-inline",
    config: {
      "layout": "month_view",
      'my-query-param': myQueryParamValue
    },
    calLink: "riley/test",
  });