HubSpot

The HTTP API datasource will be used to connect to HubSpot API.

UI Bakery allows you to easily connect to HubSpot CRM with no need for additional layers like APIs and third-party services.

Configuration

Prerequisites

Migrating from API key to a private app

HubSpot has deprecated API keys and they are now replaced by private apps. Therefore, if you haven't done it already, you will need to update your configuration.

You will have to create a private app first following the instruction in this guide. Once the app is created, you need to copy your access token.

Connecting the data source

Now, you can proceed to connecting your data source - follow the steps below:

1. On the Data sources page, click Connect, and select HTTP API in the Data sources list.

2. First, give your data source a name and specify the following Base URL - https://api.hubapi.com/.

3. Next, specify the header and the access token you copied in the previous section - Authorization: Bearer YOUR_ACCESS_TOKEN - in the Headers parameter.

4. Finally, click Connect Datasource to complete the setup.

Usage

Once you have established the connection between UI Bakery and HubSpot, you can access its data, for example, load it and send it back.

To interact with HubSpot API in UI Bakery, you'll need to use the HTTP Request action step and configure the HTTP parameters based on HubSpot documentation - for example, at HubSpot CRM Contacts API page.

Sample flow could be as follows:

1. Create a new action, select your HubSpot data source - the HTTP Request action will be selected automatically.

2. Next, configure your API URL, for example, /crm/v3/objects/contacts.

3. (Optional) Turn on the Transform result toggle and specify the following code to be able to display your data in a Table, since HubSpot returns an object instead of a collection:

return {{ data.results }}.map(data => ({ ...data, ...data.properties }));

That's it! Now you can display your data and send it back to HubSpot. These additional articles may be useful:

Data mapping & transformingBind data to UI