How to use Supabase and hotglue to offer a native integration in your product cover

How to use Supabase and hotglue to offer a native integration in your product

David Molot profile image

by David Molot

Feb 1st 2022

Video walkthrough

One of the most common feature requests in the SaaS world is an integration with a platform that a customer already uses. For example. if you are working on an email marketing software, you most likely will be asked to integrate with Salesforce, HubSpot, Mailchimp, and so on.

Integrations are messy, and even more so, dealing with the data that comes out of those APIs can be even messier. Even with all the trouble that integrations can put you through, Supabase and hotglue can help you standup a native integration for your users in no time.

What is Supabase?

Supabase is an open source Firebase alternative. It provides all the backend services you need to build a product, whether that is a database, auth, file store, or APIs for your database.

Supabase also offers a hosted platform which makes it very simple to get started without needing to manage any infrastructure.

What is hotglue?

hotglue enables you to offer native, user-facing SaaS integrations to your customers in minutes without sacrificing control over the data.

The integrations feel native because hotglue is embeddable, cloud-based, and built on the Python ecosystem — enabling developers to support more data sources, manage data cleansing & transformation, and offer a self-serve experience to their users. With hotglue, any developer can build a data integration pipeline in minutes without months of development and maintenance.

How to start creating your native integration

The first thing you need to do is figure out what integration you want to build. In this example, I am going to create a native Salesforce integration that pulls data from Salesforce and pushes the Salesforce data to Supabase. To build this integration, I am going to need a:

  • A Supabase database to push to (Supabase has a free plan to start with)
  • A Salesforce account with an OAuth app created
  • A hotglue account (hotglue has a 14-day free trial)

Collecting credentials

First and foremost, if you want to follow along with this Salesforce specific example, you can learn how to create your own OAuth app instantly here.

Once you’ve done that, you should keep the Salesforce OAuth app credentials handy as you will need those.

Next, you’re going to want to head to one of your projects in Supabase.

Screen Shot 2022-01-21 at 2.36.09 PM.png

On this page, you should go ahead and click on the Settings tab from the left hand side of your screen.

Screen Shot 2022-01-21 at 2.38.59 PM.png

Then within the Settings page, you are going to want to head to the Database tab under Project Settings.

Screen Shot 2022-01-21 at 2.41.03 PM.png

On the Database page, scroll down until you find the Connection info section. Note down the credentials, including the Host, Database name, Port, User, and Password.

Screen Shot 2022-01-21 at 2.45.05 PM.png

The last thing you will need is your Database schema. To find this, go ahead and click the Table Editor tab from the left-sided navigation bar.

Screen Shot 2022-01-21 at 2.46.48 PM.png

Whatever you see in that top-left bar is your Schema. Make sure to note that down!

Configuring your integration in hotglue

Now it is time to switch over to hotglue and create the integration.

Screen Shot 2022-01-24 at 11.19.04 AM.png

In hotglue, go ahead and head to the Sales flow in the upper left hand side of the screen. If you just made a hotglue account, there may be an additional flow called Invoices, as well as an additional tap inside of the Sales flow for HubSpot. You can ignore those for now.

Screen Shot 2022-01-24 at 11.58.57 AM.png

Once in the flow, go ahead and click on the Salesforce card. Now you can input the OAuth credentials you put aside earlier.

Screen Shot 2022-01-24 at 12.33.38 PM.png

Click the Save and Continue button, which will trigger a Salesforce OAuth screen to pop-up (if nothing comes up, you may have pop-ups blocked).

Screen Shot 2022-01-24 at 12.34.09 PM.png

Log in with your Salesforce account here.

Screen Shot 2022-01-24 at 12.35.55 PM.png

Now that you have successfully linked Salesforce, go ahead and jump into the fieldmapping to configure what you want to pull into Supabase. You do this by click on the card again and heading to the Customize Field Map option.

Screen Shot 2022-01-24 at 12.36.30 PM.png

For this example, I am going to pull in Account, Contact, and Lead information.

Screen Shot 2022-01-24 at 12.36.41 PM.png

Once you have finished configuring the field mapping, go ahead and click Save.

Screen Shot 2022-01-24 at 12.38.34 PM.png

Now you need to configure your target. In hotglue, you are going to make your target the PostgreSQL target.

Screen Shot 2022-01-24 at 12.40.06 PM.png

Now you should use the credentials you got from Supabase earlier and plug them into hotglue. Once you’ve done that, click Save & Continue.

Screen Shot 2022-01-24 at 12.41.27 PM.png

Now, you are going to run a test job so that you can see the data you have in the account you connected populate your Supabase database. Head to the Jobs page and click the New job button in the top right hand corner. Now you can name your job and choose the source you want to run the job for! If you have already run the job and are retrying the job, you should click the “Reset source state” option.

❗ If you ran a job in hotglue and saw that the export failed, check and see if you have a description in your Supabase table. Sometimes it can cause issues when syncing the data. If you do have a description, go ahead and remove it, then try again.

Screen Shot 2022-01-24 at 12.42.41 PM.png

Once the job completes, you should be able to see the data in Supabase! Let’s go check my database to see the data.

Screen Shot 2022-01-24 at 12.47.34 PM.png

As you can see, the data has been populated in Supabase!

The end user’s experience

So now that you have set up your integration, and you see it working, you can see what it could look like for users of your product.

Screen Shot 2022-01-24 at 1.44.51 PM.png

I’ve gone ahead and created small demo web-app to show what it could look like inside of your product! On this page, there is an open widget button. When I click it, it will open the hotglue widget.

Screen Shot 2022-01-24 at 1.45.44 PM.png

As you can see, the Sales flow we were working in earlier is here. I am going to click into it!

Screen Shot 2022-01-24 at 2.08.53 PM.png

Now, I can see that I can link my Salesforce account (and if you added any other sources in this flow, you would see them here as well). I’ll go ahead and click Salesforce.

Screen Shot 2022-01-24 at 2.11.48 PM.png

Now it is time to go ahead and log in to Salesforce! Once you put in your credentials, click Log In.

Screen Shot 2022-01-24 at 2.13.19 PM.png

Now Salesforce has been linked!

Screen Shot 2022-01-24 at 5.18.35 PM.png

(Optional) If you want your user to run the job manually, you can have them click the three dots in the top right hand corner of the Salesforce card and run a job. Otherwise, it will follow the sync schedule configured in the hotglue admin panel!

Wrapping up

As you can see, using Supabase and hotglue together makes it really easy to get your native integration set up in a matter of minutes.

If you would like to check out the fastest growing open-source database company out there, you can head to Supabase’s site here.

If you would like to check out the easiest way to offer your users native integrations inside of your product, you can check out hotglue’s site here.