How to Integrate Retool with HubSpot

Navigate to your HubSpot account and go to Settings (gear icon, top right) → Integrations → Private Apps. Click Create a private app. Give it a descriptive name like Retool CRM Integration. On the Scopes tab, select the CRM scopes your Retool app needs — at minimum, enable crm.objects.contacts.read and crm.objects.contacts.write for contact management, crm.objects.deals.read and crm.objects.deals.write for deals, and crm.objects.companies.read for company lookups. If you plan to manage owners or pipelines, also add crm.objects.owners.read and crm.pipelines.orders.read. Click Create app, then confirm the creation. HubSpot generates an access token displayed once — copy it immediately and store it securely. This private app token is scoped to exactly the permissions you granted, which is more secure than using a full API key. Unlike OAuth, private app tokens do not expire unless you rotate them manually, making them well-suited for server-to-server integrations like Retool. Note the token value; you will paste it into Retool in the next step.

In Retool, click the Resources tab in the left navigation (or navigate to retool.com/resources). Click the Add Resource button in the top right corner. In the resource type picker, scroll to or search for HubSpot — it appears under the CRM category with the HubSpot logo. Click HubSpot to open the configuration panel. Give the resource a clear name like HubSpot CRM or HubSpot Production. In the Authentication section, select Private app token as the authentication method. Paste your private app access token into the Access token field. Retool stores this token encrypted on its servers; it is never sent to the browser. If your organization uses multiple HubSpot portals (e.g., separate portals for different regions), create one Resource per portal using descriptive names. If your organization uses OAuth 2.0 instead of private app tokens — for example, if end users should authenticate with their own HubSpot accounts — select OAuth 2.0 from the authentication dropdown. You will need to provide a Client ID and Client Secret from a HubSpot app created in your developer account, along with the redirect URL shown in Retool. Click Save. Retool will test the connection and confirm the resource is functional. You should see a green Connected status indicator.

Open or create a Retool app. In the Code panel at the bottom, click the + button to create a new query. Select your HubSpot resource from the Resource dropdown. The query editor switches to HubSpot mode, showing an Action dropdown. Select Search contacts from the action list to access HubSpot's CRM search API, which supports complex filter conditions and returns paginated results. In the Filter conditions section, you can leave it empty to return all contacts or add a filter — for example, set property to lifecyclestage, operator to is equal to, and value to lead to find all lead-stage contacts. In the Properties to return field, add the contact properties you want: firstname, lastname, email, phone, lifecyclestage, hubspot_owner_id, company, and hs_lead_status are common starting points. Set the limit to 100 (HubSpot's maximum per page). Enable the Paginate automatically toggle if you want Retool to handle pagination. Run the query. The response is a JSON object with a results array containing contact objects, each with an id and a properties object. Use a transformer to flatten this structure — click the Advanced tab on the query, enable Transform results, and write a JavaScript function that maps the results array into a flat array of objects for easy binding to a Table component.

1// Query transformer — paste into Advanced → Transform results
2const results = data.results || [];
3return results.map(contact => ({
4  id: contact.id,
5  first_name: contact.properties.firstname || '',
6  last_name: contact.properties.lastname || '',
7  email: contact.properties.email || '',
8  phone: contact.properties.phone || '',
9  lifecycle_stage: contact.properties.lifecyclestage || '',
10  owner_id: contact.properties.hubspot_owner_id || '',
11  company: contact.properties.company || '',
12  created_at: contact.properties.createdate
13    ? new Date(contact.properties.createdate).toLocaleDateString()
14    : ''
15}));

In the Retool canvas, drag a Table component from the Component panel onto the canvas. In the Table's data source field, type {{ searchContacts.data }} (replacing searchContacts with whatever you named your contacts query). The table populates with your contact data, with each property as a column. Configure which columns are visible using the Columns section in the Table's right panel — hide the id column from display but keep it available for queries. Enable Editable for the lifecycle_stage and owner columns by toggling the Editable switch on those column configurations. This allows users to directly edit values in the table. Add a Button component to the canvas labeled Save Changes. In the button's onClick event handler, create a new query. Set it to action Update contact in HubSpot, set the Contact ID to {{ table1.selectedRow.id }}, and in the Properties section add the fields you want to update. However, for bulk updates across multiple rows, a better pattern is to check table1.changesetArray — Retool's built-in property that tracks all edited rows — and loop through them. Create a JavaScript query that iterates over the changeset and calls individual update queries per row. Connect the Save button's onClick event to this JavaScript query. Add a success notification in the query's On success event handler to confirm updates to the user.

1// JavaScript query to bulk-update changed contacts
2// Reference this in the Save button's onClick event
3const changes = table1.changesetArray;
4if (!changes || changes.length === 0) {
5  return 'No changes to save';
6}
7
8const updatePromises = changes.map(row => {
9  return updateContact.trigger({
10    additionalScope: {
11      contactId: row.id,
12      properties: {
13        lifecyclestage: row.lifecycle_stage,
14        hubspot_owner_id: row.owner_id
15      }
16    }
17  });
18});
19
20await Promise.all(updatePromises);
21await searchContacts.trigger();
22return `Updated ${changes.length} contacts`;

Create a second query in the Code panel, again targeting your HubSpot resource. Select Search deals from the Action dropdown. In the Properties to return field, add: dealname, dealstage, closedate, amount, hubspot_owner_id, and pipeline. Add a Filter condition to limit results — for example, filter by closedate is greater than today's timestamp minus 90 days to focus on active deals. Write a transformer similar to the contacts transformer to flatten the deals response. Drag a second Table component onto the canvas for deals. Bind it to the deals query using {{ getDeals.data }}. Configure columns to display deal name, stage, close date, amount (formatted as currency using Retool's column formatting), and assigned owner. Add a Select component above the deals table with options for each pipeline stage (you can query HubSpot's pipelines endpoint to populate these dynamically). Set the deals query's filter value to {{ pipelineFilter.value }} so the table responds to the dropdown. This gives sales managers a live pipeline view filtered by stage. Arrange both tables in a Container component with tabs: one tab for Contacts, one for Deals, so the panel feels like a unified CRM tool rather than two separate tables.

1// Deals transformer — paste into Advanced → Transform results
2const results = data.results || [];
3return results.map(deal => ({
4  id: deal.id,
5  deal_name: deal.properties.dealname || 'Untitled Deal',
6  stage: deal.properties.dealstage || '',
7  pipeline: deal.properties.pipeline || '',
8  close_date: deal.properties.closedate
9    ? new Date(parseInt(deal.properties.closedate)).toLocaleDateString()
10    : 'No date',
11  amount: deal.properties.amount
12    ? `$${parseFloat(deal.properties.amount).toLocaleString()}`
13    : '$0',
14  owner_id: deal.properties.hubspot_owner_id || ''
15}));

Polish the CRM panel by wiring up event handlers that keep the UI responsive. Select the Table component for contacts. In the Table's Event handlers section, add a Row selection event handler that triggers a second getContactDetail query using {{ table1.selectedRow.id }} as the contact ID. This allows a side panel or drawer to show full contact details when a row is clicked. For the Save Changes button, configure the On success event handler of the bulk update query to trigger the searchContacts query (to refresh data) and show a notification component with the message 'Contacts updated successfully'. Add error handling by configuring the On failure event handler to display an error notification showing {{ error.message }}. Consider adding a Retool Workflow for any automation that should run outside the UI — for example, a scheduled workflow that pulls overnight changes from HubSpot and syncs them to a connected database. For complex multi-step operations like creating a deal with associated contacts in one transaction, Retool Workflows with a Webhook trigger provide better error handling and retry logic than chaining queries in the app layer. For teams building complex CRM automation combining multiple HubSpot objects, custom transformers, and scheduled syncs, RapidDev's team can help architect the full Retool solution.