Google Mail (Gmail) Direct Integration

10min
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.  
Suggested read: Link Link 2﻿
﻿
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 Identity (make sure you select the right API that you would like to use)
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
﻿
﻿
﻿
Setup in Bubble
There are 2 steps to get the Bubble setup done: 
OAuth Setup
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
﻿
﻿
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
﻿
﻿
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
﻿
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
{
    "url": "https://gmail.googleapis.com/gmail/v1/users/me/messages/send",
    "method": "POST",
    "payload": {
        "raw": "From: <[REPLACE_WITH_FROM_EMAIL]>\nTo: <[REPLACE_WITH_TO_EMAIL]>\nSubject: Saying Hello\n\nThis is a message just to say hello. So, Hello."
    },
    "headers": {
        "x-pre-process": {
            "process": "btoa",
            "this": "raw"
        },
        "x-pinc-response-data-at": "rows.0.data"
    }
}
{
    "url": "https://gmail.googleapis.com/gmail/v1/users/me/messages/send",
    "method": "POST",
    "payload": {
        "raw": "From: <[REPLACE_WITH_FROM_EMAIL]>\nTo: <[REPLACE_WITH_TO_EMAIL]>\nSubject: Saying Hello\n\nThis is a message just to say hello. So, Hello."
    },
    "headers": {
        "x-pre-process": {
            "process": "btoa",
            "this": "raw"
        },
        "x-pinc-response-data-at": "rows.0.data"
    }
}
﻿
﻿
Here is the implementation in Bubble API Connector:
﻿
Image: API Connector Setup
﻿
﻿
Key Value and Development Key Value is the Pathfix private_key (to see where you can get the private key, see Pathfix keys﻿)
 Add the POST URL as https://labs.pathfix.com/oauth/method/googlemail/call 
Key name should be public_key the value of key can be found at Pathfix keys﻿)
Check Private 
Check Queryst.
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)
Uncheck Private
Check Queryst.
(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
﻿
﻿
This will enable the functionality that will allow you to send emails from your Bubble app. 
﻿
Having trouble? Reach out to us at [email protected] and we would be happy to help you.
﻿
Updated 22 Nov 2023
Did this page help you?
Google Mail Integration
Instagram Integration