Starter Guide
Basics
Data sources
On-premise
Tutorials
HubSpot
UI Bakery allows you to easily connect to HubStop 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.
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
- Create HTTP API Datasource
Once you have the key, create an HTTP API Datasource and configure it using the following parameters:
- Query Params:
- hapikey: YOUR_API_KEY
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:
1
return {{ data.results }}.map(data => ({ ...data, ...data.properties }));
Copied!
That's it, now you can display your data and send it back to HubSpot. These additional articles can be useful:
Last modified 22d ago
Copy link