--- title: Google Mail (Gmail) Direct Integration slug: bubble/google-mail-gmail-direct-integration description: Add GMail email send with oauth in your Bubble.io app docTags: createdAt: 2021-01-09T12:08:26.000Z --- 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. :::hint{type="danger"} Note: You will need to have your app registered in Google Cloud and have the app approved for this to work. Suggested read: [Link](https://medium.com/@prasanthmj/google-restricted-api-scopes-require-75k-yearly-fees-a23cad053a4c) [Link 2](https://groups.google.com/g/google-apps-script-community/c/ZS2_NCEzdQ8?pli=1) ::: ## 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](https://docs.pathfix.com/integrating-with-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[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/t3lVTdfLWfeznxInYSpGR_image.png" size="80" caption="Image: Google Mail setup" position="center" showCaption="true"} ## 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](https://docs.pathfix.com/bubble/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[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/yB63CM4zaZXwxc4vL9BSf_image.png" size="80" caption="Image: Plugin Keys" position="center" showCaption="true"} - `Pathfix Connector` under Visual Element - Drag and drop the element to any page/section where you want the auth Connect button to appear ::Image[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/T_AIoL645Nb08SRY92xdp_image.png" size="48" caption="Image: Design Element" position="center" showCaption="true"} - 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[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/hdnNtYVvuWYTWUd865yEh_image.png" size="40" caption="Image: Choose providers" position="center" showCaption="true"} - 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" } } ``` Here is the implementation in Bubble API Connector: ::Image[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/a638j4A7GYypH0tldf0J0_image.png" size="78" caption="Image: API Connector Setup" position="center" showCaption="true"} 1. **Key Value** and **Development Key Value** is the Pathfix private\_key (to see where you can get the private key, see [Pathfix keys](docId\:PUBLISHED-i5bP9DypNtQUAKv2r8Mbh)) 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](docId\:PUBLISHED-i5bP9DypNtQUAKv2r8Mbh)) 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[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/u_ENqD8fsRc3Fcos6J8PH_image.png" size="50" caption="Image: Update user_id" position="center" showCaption="true"} 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.