Bubble.io and HubSpot integration: Step-by-Step Guide 2024

Integrating Bubble.io with HubSpot

In order to integrate Bubble.io with HubSpot, you'll first need an account with both platforms. If you don't already have these, take the time to signup at Bubble.io and HubSpot before proceeding.

Step 1: Getting your HubSpot API Key

To integrate Bubble.io with HubSpot, you will need to get an API key from your HubSpot account. Here's how you can do it:

1.1. Login to your HubSpot account.

1.2. Click on the settings icon in the main navigation bar.

1.3. In the left sidebar menu, navigate to Integrations > API key.

1.4. If a key has never been generated for your account, click on Create key.

1.5. If you already have an existing API key, you'll see it in this section.

1.6. Copy your API key and keep it safe. You'll need it for the next steps.

Step 2: Integrating HubSpot in Bubble.io

Now that you have your HubSpot API Key, you can start the integration process in Bubble.io by following these steps:

2.1. Log in to your Bubble.io account.

2.2. Go to the Data tab in your Bubble.io editor.

2.3. Click on APIs in the left side menu. We're going to integrate HubSpot as an API.

2.4. Click Add another API.

2.5. In the API section, click Authentication.

2.6. In the Authentication Type dropdown, select Self-handled.

2.7. For Authentication method, choose HTTP headers.

2.8. In the new fields that appear, use the following parameters:

• Key Field: hapikey
• Value Field: [Your HubSpot API Key]

2.9. Press Initialize Call to initialize the API.

Step 3: Setting up API calls in Bubble.io

Once you have your API key and the HubSpot API integrated into your Bubble.io app, the next step is to set up the API calls.

3.1. Go to the Data > APIs tab and click on the GET icon.

3.2. Now we need to set up a new API call. You need to do this for each API endpoint you're going to use in your application.

3.3. For most basic integrations, you need to set up two API calls: GET contacts and POST contacts.

For GET Contacts, use the following parameters:

• Data Type: JSON
• API URL: https://api.hubapi.com/crm/v3/objects/contacts

1. Click Add Parameter, use the following parameters:

• Key: hapikey
• Value: [Your Hubspot API Key]

1. Click Define Another Request.

For POST Contacts, use the following parameters:

• Data Type: JSON
• API URL: https://api.hubapi.com/crm/v3/objects/contacts

1. Click Add Parameter, use the following parameters:

• Key: hapikey
• Value: [Your Hubspot API Key]

1. In the Body Type dropdown, choose JSON.

2. In the body field, enter the JSON format for the data you're posting to HubSpot:

{
 "properties": {
   "firstname": "first_name",
   "lastname": "last_name",
   "email": "[email protected]"
 }
}

Click Define Another Request.

After setting up your API calls, you should now be able to use the HubSpot API in your Bubble.io app. You can make GET and POST requests to the HubSpot API in workflows and display the data in your Bubble.io app. You can also use the API calls to update and delete contacts in HubSpot.

This integration allows you to sync data between your Bubble.io app and HubSpot, automate actions based on user behavior, and much more. The possibilities are endless, so start exploring!