calendly-question

calendly

A formsort custom question implementing a Calendly embed, written in Svelte.

It's helpful for prompting a responder to schedule a meeting within a flow, without needing redirects.

Usage

A built version of the question itself is hosted on Github Pages: https://formsort.github.io/custom-question-examples/calendly-question/build/. If you want to customize it, you'd need to the built version of this package somewhere yourself.

1. Add the Calendly URL as the ?url= parameter for this page. So, if your calendly URL is normally https://calendly.com/xyz/30min, you'd have https://formsort.github.io/custom-question-examples/calendly-question/build/?url=https://calendly.com/xyz/30min
2. The above URL can be set as the Source URL for a custom question within the Formsort Studio, and should work out of the box.
3. The calendly embed is rather tall - you may want to set the Default width to 100% so that it takes up the full width of the form, and the Default height to something like 1000px. Unfortunately the official Calendly documentation does not offer a better solution to removing scroll bars.

Parameters

You can pass parameters like those that control Hiding event details directly in the URL.

To pre-populate the user's name or email from data already collected within the form, you can set any of the URL search parameters name, firstName, lastName, or email using the Formsort templated string format, for example ?email={{the_email}}&url=https://calendly.com/xyz/30min. Note that the parameter is a top-level parameter to this custom question's URL, and not as a nested parameter of the url parameter itself.

Custom answers can be passed using the parameters a1 through a10. Please provide them as top-level parameters as well, for example ?a1=foo&a2=bar&email={{the_email}}&url=https://calendly.com/xyz/30min.

Note on the scheduled event

The answer that this question provides is a Calendly scheduled_event URL, that will look something like https://api.calendly.com/scheduled_events/b58878ef-6ab7-4a5a-9211-e9a3910f588c. This is not a publicly-accessible URL, but rather a reference to the scheduled event.

If you need more information about the event, such as the time it was scheduled, you can use Calendly's own Get Event API endpoint. You can even use a Formsort API answer to do this, since you can set the Authorization header on the request.

Developing

yarn
yarn dev

Building

yarn build