How to add Google Calendar integration in your Bubble app

Looking to add Google Calendar integration in your Bubble.io app? Here is a detailed step by guide on how you can activate oauth for Google Calendar and make the relevant API call using the Bubble API Connector.

Integration page sample:

Enable OAuth

As the first step to adding Google Calendar, you need to get your users to connect their Google Calendar account to your app. This is the OAuth process through which your users will give your app authorization to access their Google Calendar account and access their data.

The OAuth process is the most secure way for you to get access to your users data. The largest part of the build involves a token system that allows for tokens to be shared between your app and the provider (Google Calendar in this case) to check the validity of the access as well as permission levels that were granted by the user. Once the relevant tokens have been validated, you will be able to access the user data and pull this into your app.

Building a token system alone is a large framework to build if you are building this yourself. However, the entire OAuth process is handled by the Pathfix OAuth platform for all your connected users.

Enable OAuth in Google

You will need a Google Console account in order to build out your developer app. Access your Project on GCP.

Note: If you already have a GCP account with an app built out, edit the app and add the Pathfix Redirect URI https://labs.pathfix.com/integrate/command to the app and save the setting. Copy the ClientID and Secret for use in Pathfix (skip to next section)

Select your Project and click on the menu options
Click on APIs & Services and select OAuth consent screen
Select the type of User as External and click on Create
The app will be available in test mode and will need to be submitted to Google for review (this can be done later as well)

Add the name of your app (this is what your users will see once you app is approved by Google, make sure you add your app name that will be recognized by your users)
Fill in the rest of the App domain info
Save and continue

In the following page, search for scopes of Google Calendar that you wish to access
Click on Credentials from the left nav bar, click on Create Credentials and select OAuth client ID
Add the name of your OAuth 2.0 client
Under Authorized redirect URIs, add the Pathfix URI: https://labs.pathfix.com/integrate/command

Once saved, you will receive your Google Client ID and Client Secret
Copy this info for use in Pathfix

Enable Google Calendar API

You will need to enable the Google Calendar API in Google Console in order to start using the API. To do this:

Click on the hamburger menu on the top left and choose API & Services and select Enable API and Services

In the search bar, search for Google Calendar API and select the API
If not Enabled, click on Enable to activate the API

Setup in Pathfix

Login to your Pathfix account and click on Add Application
Add the name of your SaaS and hit Save
From the list, select Google Calendar from the list of providers to integrate with
Enter the Client ID and Client Secret copied over from Google Console. You can edit the scopes to include scopes you want to access
You can change the Display Name and Description from the General tab of this window and hit Save
Click on Test Connection and Connect an account to test the setup

Add Integration in Your Bubble App

Now that we have setup the Google Console window and completed the configuration of your OAuth process, lets go ahead and setup your Bubble app.

We have released a Google Calendar plugin thats available for free to install from the Bubble plugin store. The plugin has a few Actions and Data calls pre-configured making it easier for you to add the functionality to your app.

There are 2 plugins you will need to install in order to get the Connect button and have access to the Data/Action calls.

Once you install both plugins, you will need your Pathfix Keys from your account to link Pathfix to your Bubble app:

In Pathfix, click on Keys on the left nav bar
Copy the Public Key and paste it in the Pathfix OAuth Connector plugin
Copy the x-partner-key and paste it in the Google Calendar (OAuth) plugin

In your Bubble Design page, add the Pathfix Connector element to an Integration page (or any page you would like to have your users click-to-connect their Google Calendar accounts)
On the properties window, you can click on ‘All providers configured in my Pathfix app’
Or, if you have multiple integrations in the same app in Pathfix and only want to show Google Calendar, enter the internal provider name googlecalendar under the ‘List of providers’

Click on Preview
You will be able to view the Google Calendar Connect button now available for your users to be able to use
Below are some of the pre-configured Actions and Data calls available for you to use
You can add workflows or repeating group to List events and calendars of the connected users

Call Additional APIs using the Bubble API Connector

If you are trying to call an API that is not available in the Google Calendar (OAuth) plugin, you can use the Bubble API Connector and configure the API directly.

Here is the best way to do this:

We recommend testing out any APIs in Pathfix Test Connection page first before confguring this in your Bubble API Connector
Click on Test Connection and make sure you have connected an account by clicking on Connect
You can choose to pick one of the sample APIs listed in the dropdown menu on the left

Once your call is successful, you can easily replicate this in your Bubble API Connector
Below is a sample setup using the Bubble API Connector with further detailed instructions:

Key Value and Development Key Value is the Pathfix private_key
Add the POST URL as https://labs.pathfix.com/oauth/method/googlecalendar/call
Key name should be public_key the value of key can be found at
- Check Private
- Check Queryst.
Key name should be user_id. Enter your Pathfix account login email ID over here (Note: Ensure that you have tested the connection after configuring your integration in Pathfix)
- Uncheck Private
- Check Queryst.

You can click on Initialize Call and on successful response, save the API for use in your app.

When using the API, you will be asked to enter the user_id, always add this as the Current User’s Unique Id in order to make sure the data is shown for the user that is currently logged in and connected:

This will complete your Google Calendar integration in your Bubble app.

We have detailed Bubble setup documentation available in our dedicated space for Bubble developers that can be access here: https://docs.pathfix.com/bubble

Do reach out to our team is you have any questions on your setup or need assistance with an integration.