Google Mail (Gmail) Integration

Adding Gmail integration to your Bubble app can be complex. Apart from the OAuth process, for email sending capabilities, Google mail requires the btoa (string to base64) conversion and it can get complex. Running this in the standard Bubble API Connector will not work.

With Pathfix, itis now possible to integrate and enable message sending capabilities from your Bubble app using the Bubble API Connector.

Pathfix will manage the following:

  • OAuth authorisation
  • Token management
  • API for the call
  • Btoa conversion



This documentation will show setup guide in Bubble and Pathfix.

Note: You will need to have your app registered in Google Cloud and have the app approved for this to work.



Setup in Pathfix

Before you proceed, make sure you have configured your app in Google and get your ClientID and ClientSecret for Google Mail. Here is the general documentation for Google Integrating with Google

Copy your Google ClientID and ClientSecret and head over to your Pathfix account:

  • Login to your Pathfix account and click on Add Application
  • Add the name of your SaaS and hit Save
  • Select Google Mail from the list of providers. You can change the Display Name and Description.
  • Enter the Client ID and Client Secret generated from Google and add additional scopes you want to access



Image: Google Mail setup
Image: Google Mail setup





Setup in Bubble

There are 2 steps to get the Bubble setup done:

  1. OAuth Setup
  2. API CAll



OAuth Setup

Pathfix has a plugin that connects with your account and renders the auth connect button for your providers.

Install the Pathfix OAuth Connector plugin from the Bubble Plugin store. To active the plugin:

  • Copy your Pathfix Public Key and x-partner-key for use in the plugin
  • In Public Key - Add your Pathfix Public Key
  • In the x-partner-key section - Add your Pathfix x-partner-key



Image: Plugin Keys
Image: Plugin Keys



  • Go to the Design page of Bubble and look for Pathfix Connector under Visual Element

  • Drag and drop the element to any page/section where you want the auth Connect button to appear
Image: Design Element
Image: Design Element



  • In the properties of the plugin, select All Providers configured in my Pathfix Account
  • If you have multiple providers configured, select List of providers option instead and enter googlemail
Image: Choose providers
Image: Choose providers
  • Go to Preview and you will now see Connect to GMail button



API Call

To make the API call to send email from your Bubble app, you will need to use the Bubble API Connector Plugin.

The API call for Google Mail will be slightly different from the standard API call made with Pathfix. There is a x-pre-process header that will need to be included to enable the btoa conversion. Here is the sample API call structure (body):



JSON



Here is the implementation in Bubble API Connector:



Image: API Connector Setup
Image: API Connector Setup



  1. Key Value and Development Key Value is the Pathfix private_key (to see where you can get the private key, see Pathfix keys)
  2. Add the POST URL as https://labs.pathfix.com/oauth/method/googlemail/call
  3. Key name should be public_key the value of key can be found at Pathfix keys)
    1. Check Private
    2. Check Queryst.
  4. Key name should be user_id. Enter your Pathfix login email ID over here. (Note: Ensure that you have tested the connection after configuring your integration in Pathfix)
    1. Uncheck Private
    2. Check Queryst.
  5. (below) While configuring to use the API in a datasource element or a workflow action, ensure that the user_id points to the Current User's unique id



Image: Update user_id
Image: Update user_id



This will enable the functionality that will allow you to send emails from your Bubble app.



Having trouble? Reach out to us at support@pathfix.com and we would be happy to help you.