# HubSpot

{% hint style="info" %}
The **HTTP API datasource** will be used to connect to HubSpot API.
{% endhint %}

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.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FXd1zKcx6t1TZhe6he7HO%2Fspaces_UX6zPRMFFK0yrTghj7cY_uploads_git-blob-03941b1677c9284e36867ea6c2f769c4bc7b8c2d_CleanShot%202023-07-07%20at%2011.47.59%402x-min.png?alt=media&#x26;token=a734a35a-1c0f-4796-9d28-29c717ca0a91" alt=""><figcaption></figcaption></figure>

You will have to create a private app first following the instruction in [this guide](https://developers.hubspot.com/docs/guides/apps/private-apps/migrate-an-api-key-integration-to-a-private-app). Once the app is created, you need to copy your access token.&#x20;

### 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.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FyxYCxzn9rJSPEpVPCshz%2FCleanShot%202025-04-18%20at%2012.57.57%402x-min.png?alt=media&#x26;token=cf697278-a905-4098-84df-d4f1eedc3e4f" alt=""><figcaption></figcaption></figure>

## 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](https://docs.uibakery.io/reference/working-with-actions/http-request) action step and configure the HTTP parameters based on HubSpot documentation - for example, at [HubSpot CRM Contacts API page](https://developers.hubspot.com/docs/api/crm/contacts).

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:

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

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FZM9HVxwJiseGbFlZWViE%2FCleanShot%202025-04-18%20at%2013.14.08%402x-min.png?alt=media&#x26;token=ba4021b9-b789-4eee-9663-f96b738a19d9" alt=""><figcaption></figcaption></figure>

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

{% content-ref url="../../build-from-scratch/getting-started/transform-data-with-javascript/mapping-and-transforming-data" %}
[mapping-and-transforming-data](https://docs.uibakery.io/build-from-scratch/getting-started/transform-data-with-javascript/mapping-and-transforming-data)
{% endcontent-ref %}

{% content-ref url="../../build-from-scratch/getting-started/bind-data-to-ui" %}
[bind-data-to-ui](https://docs.uibakery.io/build-from-scratch/getting-started/bind-data-to-ui)
{% endcontent-ref %}