HubSpot

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

We will use HTTP API Datasource to connect to Hubspot API.

Configuration

• API Key (deprecated)

First, we need to obtain an API key to be able to connect to HubSpot. To do that, go to Settings -> API Key, click Show or Generate, and then Copy.

Settings -> API Key -> Copy

• Migrating from API key to a private app

If you notice a message in your Hubspot account about the API keys being replaced by the private apps, you'd need to update your configuration.

Start with creating a private app first following this guide. Once done, copy your access token.

• Create HTTP API Datasource

Once you have the key, create an HTTP API Datasource and configure it using the following parameters:

• Base URL: https://api.hubapi.com/
• Headers:

  • Authorization: Bearer YOUR_ACCESS_TOKEN

Click Connect Datasource, now your UI Bakery app has access to your HubSpot data.

Usage

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

To interact with HubSpot API you'll need to use an HTTP Request action step and configure HTTP parameters based on the HubSpot documentation (for instance, at HubSpot CRM Contacts API page).

• Create a new Action with an HTTP API action step, select the datasource, and configure an API URL:

• Since HubSpot returns an object instead of a collection, transform the data to be able to display inside of a table using the following code:

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 can be useful:

1. Transform or map your data.
2. Add a Component to display it.

HTTP request