You can integrate Intercom live chat into your Bubble app by installing the Intercom plugin or embedding the Intercom script in your page header. Once connected, Bubble automatically passes logged-in user data to Intercom for personalized conversations, and you can trigger Intercom events from workflows to track user actions.
Adding Intercom Live Chat to Your Bubble App
Intercom is a leading customer messaging platform that lets you chat with visitors and users in real time. This tutorial shows non-technical founders how to add Intercom's chat widget to a Bubble app, pass user identity data so conversations are linked to known users, and optionally fire custom events to track engagement. No code needed — everything is configured through Bubble's visual editor and plugin settings.
Prerequisites
- A Bubble account with an app open in the editor
- An Intercom account with your App ID available
- At least one page where you want the chat widget to appear
- Basic familiarity with the Bubble Plugins tab
Step-by-step guide
Install the Intercom plugin from the Plugins tab
Install the Intercom plugin from the Plugins tab
Open your Bubble editor and click the Plugins tab in the left-hand menu. Click the '+ Add plugins' button, then search for 'Intercom' in the plugin marketplace. Find the official Intercom plugin (or a well-reviewed community version) and click 'Install.' Once installed, the plugin will appear in your installed plugins list. Click on it to open its settings panel where you will enter your credentials.
Pro tip: If you cannot find an official Intercom plugin, you can use the 'Script/Meta Tags' section in Settings → SEO / metatags to embed Intercom's JavaScript snippet directly — this works just as well.
Expected result: The Intercom plugin appears in your installed plugins list with a settings panel ready for configuration.
Configure your Intercom App ID in the plugin settings
Configure your Intercom App ID in the plugin settings
In the Intercom plugin settings, locate the field labeled 'App ID' (sometimes called 'Workspace ID'). Go to your Intercom dashboard, navigate to Settings → Installation, and copy your App ID — it looks like a short alphanumeric string such as 'abc12def.' Paste it into the App ID field in Bubble. If using the script embed method instead, paste the full Intercom script into Settings → SEO / metatags → Script/meta tags in the header.
Pro tip: Keep your Intercom API keys private. If configuring via API Connector for advanced features, always check the 'Private' checkbox for secret keys.
Expected result: Your Intercom App ID is saved in the plugin settings and the connection between Bubble and Intercom is established.
Pass logged-in user data to Intercom for identification
Pass logged-in user data to Intercom for identification
To link chat conversations with known users, you need to pass user identity data. In the plugin settings, map the following fields: set 'Email' to 'Current User's email,' set 'Name' to 'Current User's First Name' (or whichever field stores names in your User data type), and optionally set 'User ID' to 'Current User's unique id.' This ensures that when a logged-in user opens the chat widget, Intercom recognizes them and shows their conversation history.
Expected result: Logged-in users see their previous conversations when they open the Intercom widget, and the Intercom dashboard shows user details alongside messages.
Add the Intercom chat widget element to your pages
Add the Intercom chat widget element to your pages
If the plugin provides a visual element, go to the Design tab, click the '+' icon in the Element Palette, and search for the Intercom element under 'Plugins.' Drag it onto your page — it can be placed anywhere since the widget floats in the corner. If using the script method, the widget appears automatically on every page where the header script loads. To show the widget only on certain pages, wrap the element in a group with a conditional that controls visibility.
Pro tip: Place the Intercom element on a reusable element (like your site footer) so it appears across all pages without adding it individually to each one.
Expected result: The Intercom chat bubble appears in the bottom-right corner of your app when you Preview.
Trigger Intercom events from Bubble workflows
Trigger Intercom events from Bubble workflows
To track user actions in Intercom (for example, when a user completes a purchase), open the Workflow tab. On the relevant workflow (such as 'When Button Purchase is clicked'), add a new action. Look under Plugins for an Intercom action like 'Track Event' or 'Log Event.' Set the event name to something descriptive like 'completed-purchase' and optionally include metadata. These events appear in the Intercom dashboard and can be used to trigger automated messages.
Expected result: Custom events from Bubble appear in the Intercom Events timeline for each user, and you can use them in Intercom's automation rules.
Test the integration in Preview mode
Test the integration in Preview mode
Click the Preview button in the top-right of the Bubble editor. Navigate to a page where the Intercom widget should appear. Verify the chat bubble shows up, click it to open the messenger, and send a test message. Then check your Intercom dashboard to confirm the message arrived with the correct user details. If you set up event tracking, trigger the relevant action and verify the event appears in the user's Intercom timeline.
Expected result: The Intercom widget loads correctly, messages appear in your Intercom inbox with user details attached, and tracked events show in the timeline.
Complete working example
1INTERCOM INTEGRATION SUMMARY2==============================34Plugin Setup:5 Plugin: Intercom (from Bubble Plugin Marketplace)6 App ID: [Your Intercom App ID from Settings → Installation]78User Identity Mapping:9 Email → Current User's email10 Name → Current User's First Name11 User ID → Current User's unique id12 Created At → Current User's Created Date1314Widget Placement:15 Element: Intercom Chat Widget (plugin element)16 Location: Reusable Element (site footer) for global visibility17 Conditional: Only show when Current User is logged in (optional)1819Event Tracking Workflow:20 Trigger: When Button [Action] is clicked21 Action 1: [Your main business logic]22 Action 2: Plugins → Intercom → Track Event23 Event Name: "completed-purchase"24 Metadata: order_id = Result of Step 1's unique id2526Pages with Widget:27 - index (homepage)28 - dashboard29 - support30 - All pages via reusable footer elementCommon mistakes when integrating Intercom in Bubble.io: Step-by-Step Guide
Why it's a problem: Using a test Intercom workspace App ID in production
How to avoid: Double-check that you use your production Intercom App ID when deploying to Live. Keep test IDs for your Bubble development version only.
Why it's a problem: Not passing user identity data to Intercom
How to avoid: Map Current User's email, name, and unique id in the Intercom plugin settings so logged-in users are automatically identified.
Why it's a problem: Adding the Intercom element to every page individually
How to avoid: Place the Intercom element in a reusable element (such as a footer or nav bar) that is included on all pages.
Best practices
- Place the Intercom widget in a reusable element so it appears consistently across all pages
- Always pass user identity data (email, name, user ID) to enable personalized support experiences
- Use Intercom event tracking to trigger automated messages based on user behavior in your Bubble app
- Set conditional visibility to hide the widget on pages where it is not needed (such as login or onboarding pages)
- Test the integration in Preview mode with both logged-in and logged-out users before deploying to Live
- Use Intercom's 'Unread count' feature to display a badge on your own custom chat button if you want a branded look
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a Bubble.io app and want to integrate Intercom for live chat. How do I install the Intercom plugin, pass logged-in user data (email, name) for identification, and track custom events from Bubble workflows? Please give step-by-step instructions using Bubble's visual editor.
Add Intercom live chat to my app. Install the Intercom plugin, configure it with my App ID, and pass the current user's email and name for identification. Also set up event tracking so that when a user completes a purchase, it logs a 'completed-purchase' event in Intercom.
Frequently asked questions
Can I use Intercom on the free Bubble plan?
Yes. The Intercom plugin works on all Bubble plans, including Free. However, Intercom itself has its own pricing — you need an active Intercom subscription to use the chat widget.
How do I hide the Intercom widget on specific pages?
Place the Intercom element inside a group and add a conditional rule: 'When Current Page name is login → This element is not visible.' Alternatively, only include the element on pages where you want it to appear.
Does Intercom work for logged-out visitors in Bubble?
Yes. Intercom can still display the chat widget for anonymous visitors. Conversations will appear as 'Visitor' in your Intercom dashboard until the user provides their email or logs in.
Can I trigger Intercom messages automatically from Bubble?
Yes. By tracking custom events via the Intercom plugin actions in your workflows, you can set up automated messages in Intercom that fire when specific events occur — such as sending a welcome message after a user completes onboarding.
What if the Intercom widget does not appear in Preview?
Verify that your App ID is correct and that the plugin is properly installed. Also check that no ad-blocker or browser extension is blocking the Intercom script from loading.
Is there a way to get professional help integrating Intercom with complex Bubble workflows?
Yes. Teams like RapidDev specialize in building and integrating third-party tools with Bubble apps, especially when you need advanced automation or custom event tracking that goes beyond basic plugin setup.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation