Offering integrations to your users has become an essential part of growing your B2B SaaS product - which is why today we will walk through how to set up your HubSpot oauth app, connect to the HubSpot API and offer your users a HubSpot connector!
Setting up your HubSpot OAuth App
The first thing you must do is make sure you have a HubSpot developer account. If you don’t currently have one, you can sign up for one right here.
When you log in to your developer account, it should look something like this. Go ahead an click on the Apps tab on the top left side of your screen.
Now that you are on the apps page, we need to go ahead and begin configuring your HubSpot app to continue building your HubSpot integration. Click on the Create app button to start!
Here you should fill in the HubSpot Marketplace app with your information. The app should be titled with the Company name, your own logo, and your own description. At this point, you should click the Save button in the bottom left corner.
Next you will need to head to the Auth tab of the HubSpot app.
On this page, you will find your Client ID and Client secret - we will need those later so you can either note them down now or remember that you will need to come back and grab these. To continue configuring our HubSpot connector, scroll down the page until you see the Redirect URL (visible at the bottom of the image above).
Now you need to input the Redirect URL. The URL should be:
hotglue.xyz/callback
Once you have done that, you can go ahead and continue on to the Scopes section of the OAuth app. Click on the CRM option.
Now is where you need to start really configuring what data you want to pull out of HubSpot, or the data you want to push to HubSpot. Of course, HubSpot’s data model may be different than the data model you use internally, but we will get to that later. For right now, let’s just make sure we have the right permissions!
I decided to check off all the scopes under CRM, but remember, you should only check off what you deam as necessary for your users. The next step is to go into the Legacy section of the scopes and check off a few very important scopes.
As you can see, we have checked off at least 6 of the scopes in the Legacy section. These are extremely important, as they allow for your app to utilize the HubSpot OAuth functionality (instead of your users needing to provide a HubSpot API key) to connect with your customer’s HubSpot accounts!
These scopes also allow for your app to recognize custom objects - so if your customers are often making custom properties within HubSpot or you want to be able to push your own custom objects to their HubSpot accounts, these scopes need to be enabled for your app.
Now that you are done configuring the scopes, make sure you click Save, or else your app settings will not be configured.
Setting up your HubSpot integration
Now that you have completed setting up your HubSpot OAuth app, you should head over to hotglue to build the integration. You can login or create your account (there is a 14-day free trial) here.
Once you are inside of hotglue, you can head to one of the flows that you would like to add the HubSpot integration to. If you don’t know what a flow is, you can learn more about it here.
Now you should enable the HubSpot integration. Do so by searching for HubSpot in the Search taps bar and clicking the Connect button.
Now is when you need to grab the HubSpot OAuth credentials that were created when you created your HubSpot OAuth app.
Now that I put my credentials in, I will go ahead and click Save & Connect.
I will now be asked to connect a testing account - this is purely for testing purposes so that you can understand what data coming out of HubSpot will look like. Go ahead and login with the HubSpot account you have!
Now comes time for the configuration of the field mapping. To begin, click on the HubSpot card.
Once you have done that, you need to head to the Field Mapping option.
Now that we are on the field mapping page, I am going to ahead and begin selecting what data we want to pull. I am going to start with the companies table by clicking the corresponding gear icon.
I am now going to select a few of these fields and bring them over to the chosen column.
Now that I am done selecting the fields I want, I am going to click the Confirm button.
Now you should repeat this for the rest of the data you want to pull. Once you are done, you can go ahead and click Save. You have now configured your HubSpot integration!
The end-user experience
Now that you have set up your HubSpot integration, let’s look at how it would feel for one of your users to connect their HubSpot account to your product.
Here I have a little demo webapp where we wil show how your user would connect a HubSpot account. I am going to click Open widget to begin the process.
As you can see, I have the CRM flow here that the HubSpot source is in. I will go ahead and Click on the CRM flow.
Now we see that HubSpot is available as a source to connect. I will click on the HubSpot option!
Then, I will be asked to log in to HubSpot.
It will then ask what account we want to connect to the platform (when you build your own OAuth app, it will show your own logo and your own OAuth app name).
And voila! The HubSpot account is just linked. That would complete the user journey when it comes to connecting their HubSpot account to your platform.
Wrapping it up
Now you can see how easy it is to build a HubSpot integration, without having to think about HubSpot custom properties, HubSpot tickets, HubSpot email APIs, or even building your own HubSpot connector!
Our hope is now you can see how your product can offer one of the best HubSpot integrations while minimizing the development work required to offer it! No dealing with HubSpot OAuth or grabbing HubSpot API keys, but a more plug and play enterprise-ready integration.
If you want to check out hotglue, feel free to sign up for an account here (there is a 14-day integration).
