Connect Bubble to external CRM tools like HubSpot, Salesforce, or Pipedrive using the API Connector plugin. This tutorial walks you through configuring API authentication, syncing contacts bidirectionally, pushing deal updates from your Bubble app to the CRM, and pulling activity history back into Bubble for display.
Overview: Integrating an External CRM with Bubble
This tutorial shows you how to connect your Bubble app with external CRM platforms like HubSpot, Salesforce, or Pipedrive. You will set up API authentication, create bidirectional contact sync workflows, push deal and activity data from your app to the CRM, and display CRM records within Bubble. This guide is ideal for founders who already use a CRM and want their Bubble app to integrate with it.
Prerequisites
- A Bubble account with a new or existing app
- An account on a CRM platform (HubSpot, Salesforce, or Pipedrive)
- API credentials from your CRM (API key or OAuth app)
- The API Connector plugin installed in your Bubble app
- Basic understanding of REST API concepts
Step-by-step guide
Install and configure the API Connector plugin
Install and configure the API Connector plugin
Go to the Plugins tab in your Bubble editor and search for API Connector. Click Install. Once installed, click Add another API and name it after your CRM (such as HubSpot API). Set the authentication method. For HubSpot, use Private key in header with a Bearer token. For Salesforce, use OAuth2 User-Agent Flow. Paste your API key or configure the OAuth credentials. Mark the API key field as Private so it stays server-side.
Pro tip: Always use the Private key in header authentication method instead of URL parameters to keep your API key out of browser network logs.
Expected result: The API Connector plugin is installed with your CRM API credentials configured and marked as Private.
Create API calls for reading and writing contacts
Create API calls for reading and writing contacts
In the API Connector, add a new call named Get Contacts. Set the method to GET and the URL to your CRM's contacts endpoint (for HubSpot: https://api.hubapi.com/crm/v3/objects/contacts). Set Use as to Data so it appears as a data source. Click Initialize to map the response fields. Then add a second call named Create Contact. Set the method to POST, the URL to the same contacts endpoint, and add a JSON body with fields like email, firstname, and lastname as parameters. Set Use as to Action so it appears in workflows. Initialize this call with sample data.
1{2 "properties": {3 "email": "<email>",4 "firstname": "<firstname>",5 "lastname": "<lastname>",6 "company": "<company>",7 "phone": "<phone>"8 }9}Expected result: Two API calls appear in the Connector: Get Contacts (Data type) and Create Contact (Action type), both initialized successfully.
Build a workflow to sync new Bubble users to the CRM
Build a workflow to sync new Bubble users to the CRM
Go to the Workflow tab. In your user registration workflow (or create a new Backend Workflow triggered after signup), add a plugin action step for Create Contact from the API Connector. Map the parameters: email to the new user's email, firstname to their first name field, and lastname to their last name. Store the returned CRM contact ID in a field on the User Data Type called CRM Contact ID (text) so you can reference it later for updates.
Expected result: Every new user who registers in your Bubble app is automatically created as a contact in your CRM.
Display CRM data inside your Bubble app
Display CRM data inside your Bubble app
On a user detail or admin page, add a Group element with Type of content set to the Get Contacts API response type. Set its data source to Get data from an external API and select Get Contacts, passing the CRM Contact ID as a parameter. Inside the group, display CRM fields like company, deal stage, last activity date, and lifecycle stage. This lets you view CRM context directly within your Bubble app without switching to the CRM dashboard.
Expected result: CRM contact data appears directly on your Bubble page, showing fields pulled from the CRM in real time.
Set up bidirectional sync with a scheduled Backend Workflow
Set up bidirectional sync with a scheduled Backend Workflow
For ongoing sync, create a Backend Workflow called sync-crm-contacts that runs on a recurring schedule (such as every hour). In this workflow, call Get Contacts from the CRM API, then iterate through the results using Schedule API Workflow on a list. For each CRM contact, search for a matching User in Bubble by email. If found, update any changed fields. If not found, optionally create a new User record. This ensures your Bubble database stays in sync with CRM changes made by your sales team.
Pro tip: Add a Last Synced timestamp field to your User Data Type. Only sync records modified after the last sync time to reduce API calls and workload units.
Expected result: CRM contacts are automatically synced into your Bubble database on a regular schedule.
Complete working example
1{2 "API_NAME": "HubSpot API",3 "AUTHENTICATION": "Private key in header",4 "HEADER": "Authorization: Bearer <your-api-key>",56 "CALL_1": {7 "name": "Get Contacts",8 "method": "GET",9 "url": "https://api.hubapi.com/crm/v3/objects/contacts?limit=100&properties=email,firstname,lastname,company",10 "use_as": "Data"11 },1213 "CALL_2": {14 "name": "Create Contact",15 "method": "POST",16 "url": "https://api.hubapi.com/crm/v3/objects/contacts",17 "use_as": "Action",18 "body": {19 "properties": {20 "email": "<email_param>",21 "firstname": "<firstname_param>",22 "lastname": "<lastname_param>",23 "company": "<company_param>"24 }25 }26 },2728 "CALL_3": {29 "name": "Update Contact",30 "method": "PATCH",31 "url": "https://api.hubapi.com/crm/v3/objects/contacts/<contact_id>",32 "use_as": "Action",33 "body": {34 "properties": {35 "company": "<company_param>",36 "phone": "<phone_param>"37 }38 }39 },4041 "SYNC_WORKFLOW": {42 "name": "sync-crm-contacts",43 "schedule": "Every 1 hour",44 "steps": [45 "1. Call Get Contacts from CRM",46 "2. Iterate results with Schedule API on list",47 "3. For each: Search Bubble Users by email",48 "4. If found: Update changed fields",49 "5. If not found: Create new User (optional)",50 "6. Update Last Synced timestamp"51 ]52 }53}Common mistakes when integrating a CRM in Bubble.io: Step-by-Step Guide
Why it's a problem: Not marking API keys as Private in the API Connector
How to avoid: Always check the Private checkbox on any parameter containing API keys or secrets in the API Connector
Why it's a problem: Not storing the CRM contact ID in Bubble
How to avoid: Add a CRM Contact ID text field to your User Data Type and store the ID returned from the Create Contact API call
Why it's a problem: Running a full sync every time instead of incremental sync
How to avoid: Use a Last Synced timestamp and only sync records modified since the last sync. Most CRM APIs support a modified_after filter parameter
Why it's a problem: Initializing API calls with real customer data
How to avoid: Always use fake test data when initializing API calls in the API Connector
Best practices
- Use Private key in header authentication rather than URL parameters for better security
- Store the CRM record ID on your Bubble Data Type for efficient updates and lookups
- Implement incremental sync using modification timestamps to reduce API calls
- Use Backend Workflows for all CRM sync operations so they run reliably server-side
- Add error handling with logging so you can debug failed sync operations
- Test all API calls with sample data before connecting them to live workflows
- Rate-limit your sync workflows to stay within your CRM's API quota
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to connect my Bubble.io app with HubSpot CRM. I need to sync new signups as contacts, push deal data when users make purchases, and display CRM info in my admin panel. How should I set up the API Connector and workflows?
Set up API Connector calls for HubSpot CRM. Create a Get Contacts call as a Data type and a Create Contact call as an Action type. Then build a workflow that creates a CRM contact when a new user signs up.
Frequently asked questions
Which CRM APIs does the API Connector support?
The API Connector works with any REST API that returns JSON. This includes HubSpot, Salesforce, Pipedrive, Zoho CRM, Freshsales, and most modern CRM platforms.
Do I need a paid CRM plan for API access?
It depends on the CRM. HubSpot offers free API access with rate limits. Salesforce requires a paid plan for API access. Check your CRM provider's documentation for API availability on your plan.
How do I handle CRM API rate limits?
Add a pause between API calls in batch workflows (such as 200ms between each call). Monitor your CRM's rate limit headers in API responses. For high-volume sync, spread operations over time using scheduled Backend Workflows.
Can I sync custom fields between Bubble and the CRM?
Yes. Add the custom field names to your API call URL or body parameters. For HubSpot, add custom properties to the properties parameter. For Salesforce, include custom field API names in your SOQL queries.
Can RapidDev help set up complex CRM integrations?
Yes. RapidDev has experience building CRM integrations with HubSpot, Salesforce, and Pipedrive. They can help with bidirectional sync, custom field mapping, error handling, and complex workflows like lead scoring and pipeline automation.
What happens if the CRM API is down during a sync?
The API call will fail and the workflow will stop. Add error handling by checking Include errors in response in the API Connector settings, then log the error and schedule a retry after a delay.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation