# 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="/files/oft61RmXW79rPhqAIYPf" 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="/files/aaQkV4hErof2oDMQp4sI" 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](/reference/working-with-actions/http-request.md) 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="/files/vD2pGbYsebsVNeQi5mJd" 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="/pages/FlXv8DDV9LepOxZWK1Z5" %}
[Data mapping & transforming](/build-from-scratch/getting-started/transform-data-with-javascript/mapping-and-transforming-data.md)
{% endcontent-ref %}

{% content-ref url="/pages/A1K6ffkaBf0Sq0hH1au3" %}
[Bind data to UI](/build-from-scratch/getting-started/bind-data-to-ui.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/reference/data-sources/hubspot.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.