Calendly

Demo to preview the settings

Introduction

Subscribe to your Calendly account using webhooks to get real-time notifications when invitees are created or canceled. Also, retrieve all of your account events.

Prerequisites

  1. You must be on the Calendly Professional plan in order to utilize webhooks.
  1. You must be on the Bubble Personal plan or higher in order to access Backend Workflows to use webhooks.

How to set up

Create a Calendly account

If you don't have one yet, follow this link to create an account.

Create an integration

After signing into your account, head over to the integrations page and select API and webhooks:
Image without caption

Get Your Access Token

Generating an access token will allow full access to your Calendly account and enable the functionality provided by this plugin. Click on "Get a token now" under Personal access tokens:
Image without caption
Copy this token and paste into your plugin settings area (API key input). Make sure you put the word Bearer and a space before the API key. For example: "Bearer API-TOKEN”
Image without caption

Get User

Set up the datasource

We're using a group in our example. Make sure whatever element you use has the correct type of content set (Get User (Calendly)):
Image without caption

Set up the API call

Using the blue button from the screenshot above, we'll use a Display data in group action to send the results of this API call to the group we've set up.
Select "Get data from external API" from the list of data sources, then find Calendly - Get User from the list of API providers
Select "Get data from external API" from the list of data sources, then find Calendly - Get User from the list of API providers

Important

You'll need the Organization ID for most of the remaining plugin actions. Save the Organization ID someplace you can quickly access it for later. In our demo app, we placed an input at the top of the page that we'll use in the following API call demos.

List Events

Set up the datasource

We're using a repeating group in our example. Make sure whatever element you use has the correct type of content set (Get Events data (Calendly)):
Image without caption

Set up the API call

Using the blue button from the screenshot above, we'll use a Display List action to send the results of this API call to the repeating group we've set up.
Select "Get data from external API" from the list of data sources, then find Calendly - List Events from the list of API providers
Select "Get data from external API" from the list of data sources, then find Calendly - List Events from the list of API providers
Use the Organization ID input we set up earlier for the one required parameter:
Image without caption
Finish off the expression by selecting ('s collection) from the options.
Image without caption
That's it! You can now display all scheduled events from your Calendly account.
Refer to the documentation link at the top of this page to view a list of all attributes that are available for use.

Available Parameter (* indicates a required value)

organization* - The UUID of your Calendly account's organization. This value can be found as a result of the Get User API call.

Get Event

Set up the datasource

We're using a group in our example. Make sure whatever element you use has the correct type of content set (Get Event (Calendly)):
Image without caption

Set up the API call

Using the blue button from the screenshot above, we'll use a Display data in group action to send the results of this API call to the group we've set up.
Select "Get data from external API" from the list of data sources, then find Calendly - Get Event from the list of API providers
Select "Get data from external API" from the list of data sources, then find Calendly - Get Event from the list of API providers
Add in the Event UUID parameter from your input or other datasource of your choice.
☝
Note that this API call is not looking for the entire URL (https://api.calendly.com/scheduled_events/EEC4MOMTJXBSGEE7), only the last portion of the URL (EEC4MOMTJXBSGEE7)
Image without caption
That's it! You can now retrieve any information from a specified Event in your Calendly account.
Refer to the documentation link at the top of this page to view a list of all attributes that are available for use.

Available Path (* indicates a required value)

event_uuid* - The UUID of the Event. This value can be found as a result of the List Events call. This is not the entire URL of the event, only the last string of text after the last forward slash.

Create Webhook - Invitee Created

Setup your backend workflow

Create a new API workflow and name it invitee-created:
Image without caption
Change the parameter definition to Detect request data.
Once you've updated this, press the Detect data button. You'll see this screen appear:
Image without caption
Copy the URL listed in your popup. This will be the URL where you want to receive POST requests for events you are subscribed to. Save this somewhere as it'll be used in the next step and later after we've initialized the backend workflow. Don't close this popup yet.

Create your webhook

Create a form in your app to create your first webhook. This enables real-time notifications to be sent to your Bubble app whenever an event is created in Calendly. We'll use an input to type in the backend workflow URL from the previous step, and a button to trigger the action:
Image without caption
Create a workflow on the button and select the plugin action titled Calendly - Create Webhook - Invitee Created:
Image without caption
Either paste in your backend workflow URL here directly or refer to an input's value for a dynamic backend workflow URL.
Also, insert your organization URL ID here as well.
Image without caption
Now, you can run the page and click the button to create the webhook.

Initialize the backend workflow

Now, you need to create a test Calendly event to trigger this first webhook.
Head over to your Calendly account and create a new scheduled event with an invitee. You can do this in a variety of ways, but we suggest you open up your Calendly link and create a new event manually.
Head back to the backend workflow tab of your Bubble app and check the popup we left open earlier. This should now be updated with the incoming event data, like this:
Image without caption
Click "Save" to close the popup. Your backend workflow is now initialized!
Note that this webhook data includes "payload event," which is a URL to get more event information (start/end times, invitees, etc.). If you extract the ID from the URL, you can insert it in the "Get Event" data source to access all those extra details.
You can extract the ID from "payload event" with the "split by" operator and splitting by the forward slash character. The ID is at the end of the URL, so pointing to the "last item" of the split URL will give you the ID:
Image without caption

Complete your webhook setup Bubble

Using the URL you copied from the API endpoint detect window earlier, grab that value and remove the word "initialize" at the very end. You should be left with something like this: https://app-domain/version-test/api/1.1/wf/invitee-created
Run the "Create Webhook - Invitee Created" call one more time using this shortened URL.
You've now successfully set up a Calendly Webhook. You can now continue adding actions to the backend workflow so you can update whatever you need in your app. This will be triggered each time a new invitee is created.
⚠️
Note: We recommend deleting the original webhook that contains "initialize" in the URL. You only needed that enabled to complete the backend workflow initialization process. You can do this by using the "List Webhooks" call to find the individual webhook ID and then running the "Delete Webhook" call with that ID.

Create Webhook - Invitee Canceled

Setup your backend workflow

Create a new API workflow and name it invitee-canceled:
Image without caption
Change the parameter definition to Detect request data.
Once you've updated this, press the Detect data button. You'll see this screen appear:
Image without caption
Copy the URL listed in your popup. This will be the URL where you want to receive POST requests for events you are subscribed to. Save this somewhere as it'll be used in the next step and later after we've initialized the backend workflow. Don't close this popup yet.

Initialize your webhook

Create a form in your app to create your first webhook. This enables real-time notifications to be sent to your Bubble app whenever an event is created in Calendly. We'll use an input to type in the backend workflow URL from the previous step, and a button to trigger the action:
Image without caption
Create a workflow on the button and select the plugin action titled Calendly - Create Webhook - Invitee Canceled:
Image without caption
Either paste in your backend workflow URL here directly or refer to an input's value for a dynamic backend workflow URL.
Also, insert your organization URL ID here as well.
Image without caption
Now, you can run the page and click the button to create the webhook.

Initialize the backend workflow

Now you need to cancel an existing event to trigger this webhook. Head over to your Calendly account and manually cancel a scheduled event.
Head back to the backend workflow tab of your Bubble app and check the popup we left open earlier. This should now be updated after the event has been canceled, like this:
Image without caption
Click "Save" to close the popup. Your backend workflow is now initialized!
Note that this webhook data includes "payload event," which is a URL to get more event information (start/end times, cancel reason, etc.). The "invitee created" webhook offers this as well, and we recommend extracting the ID from this URL when the event is created and saving it to your database.
If the event is canceled, you can reference this "payload event" URL again to lookup the record you originally saved the ID to and update whatever you need in your app.
You can extract the ID from "payload event" with the "split by" operator and splitting by the forward slash character. The ID is at the end of the URL, so pointing to the "last item" of the split URL will give you the ID:
Image without caption

Complete your webhook setup Bubble

Using the URL you copied from the API endpoint detect window earlier, grab that value and remove the word "initialize" at the very end. You should be left with something like this: https://app-domain/version-test/api/1.1/wf/invitee-canceled
Run the "Create Webhook - Invitee Canceled" call one more time using this shortened URL.
You've now successfully set up a Calendly Webhook. You can now continue adding actions to the backend workflow so you can update whatever you need in your app. This will be triggered each time a new event is canceled.
⚠️
Note: We recommend deleting the original webhook that contains "initialize" in the URL. You only needed that enabled to complete the backend workflow initialization process. You can do this by using the "List Webhooks" call to find the individual webhook ID and then running the "Delete Webhook" call with that ID.

List Webhooks

Set up the datasource

We're using a repeating group in our example. Make sure whatever element you use has the correct type of content set (List Webhooks collection (Calendly)):
Image without caption

Set up the API call

Using the blue button from the screenshot above, we'll use a Display List action to send the results of this API call to the repeating group we've set up.
Image without caption
Add in your Organization ID, and provide one of the two accepted scope values:
Image without caption
The expression will be red after you complete the above steps. Click on (more...) to open up the options menu to complete this expression and select ('s collection).
The final expression should look like this:
Image without caption

Available Parameter (* indicates a required value)

organization* - The UUID of your Calendly account's organization. This value can be found as a result of the Get User API call.

Get Webhook

Set up the datasource

We're using a group in our example. Make sure whatever element you use has the correct type of content set (Get Webhook (Calendly)):
Image without caption

Set up the API call

Using the blue button from the screenshot above, we'll use a Display data in group action to send the results of this API call to the group we've set up.
Select "Get data from external API" from the list of data sources, then find Calendly - Get Webhook from the list of API providers
Select "Get data from external API" from the list of data sources, then find Calendly - Get Webhook from the list of API providers
Fill in the required webhook_uuid parameter next:
⚠️
Note: This API call is not looking for the entire URL (https://api.calendly.com/webhook_subscriptions/85042843-3877-4d23-abf8-af0a389b01ee), only the last portion of the URL (85042843-3877-4d23-abf8-af0a389b01ee).
That's it! You can now retrieve information from this Webhook.
Refer to the documentation link at the top of this page to view a list of all attributes that are available for use.

Available Path (* indicates a required value)

webhook_uuid* - The UUID of the webhook you want to retrieve.

Delete Webhook

Set up the API call

Find the plugin action titled "Calendly - Delete Webhook" and create a new workflow action with it. Fill in the UUID of the Webhook you wish to delete:
Image without caption
⚠️
Note: This API call is not looking for the entire URL (https://api.calendly.com/webhook_subscriptions/85042843-3877-4d23-abf8-af0a389b01ee), only the last portion of the URL (85042843-3877-4d23-abf8-af0a389b01ee).

Available Path (* indicates a required value)

webhook_uuid* - The UUID of the webhook you want to delete.

Changelogs

Update 10.02.23 - Version 3.0.1

  • Minor update.

Update 10.02.23 - Version 3.0.0

  • Updated to Calenly’s latest API, restructured actions and data sources. New call added to retrieve a single event.

Update 31.07.20 - Version 2.0.0

  • Field type for created/updated dates have changed from text to date in β€œGet Events” call.

Update 28.03.20 - Version 1.1.0

  • Update to plugin description

Update 12.09.17 - Version 1.0.0

  • Initial release