Bubble.io and Intercom integration: Step-by-Step Guide 2024

Step 1: Setting up your Intercom account

To integrate Bubble.io with Intercom, first thing you need to do is to sign up on Intercom's website. Go through the registration process and get complete access to the dashboard.

Once completed, navigate to the 'Settings' section on Intercom. Here, you will find the 'Installation' option. Under this, look for 'Web'.

Clicking on 'Web' will reveal a text field containing Intercom's workspace ID, which looks like a series of alphanumeric characters (123a456b7c89d0e123f456g).

Copy this ID and keep it at hand because you will need it to complete the integration on Bubble.io.

Step 2: Setting up the Intercom plugin on Bubble

Next, open a new tab in your browser and navigate to your Bubble.io dashboard.

After that, click on 'Plugins' from the navigation pane and choose the 'Add Plugins' button on the top. This will open up a page with a huge assortment of plugins.

Browse through the plugins or use the search bar to find the 'Intercom' plugin. Click on the 'Install' button on it.

Now in the Plugins tab, you will see Intercom listed among the installed plugins. Click on it to access its settings.

Here, you will find a field named 'App ID'. This is where you paste the workspace ID you copied from Intercom.

Intercom - Bubble.io Integration

Intercom is now installed on your Bubble.io platform. It is important to mention here that the basic functionality of the plugin (displaying your Intercom chat widget, receiving messages etc.) will now work out of the box.

You now have to set up different instructions in the Bubble.io interface to explicitly control the behaviour of the chat widget as per your needs, such as hiding or showing the chat widget based on user behaviour, loading specific conversations and so on. Follow the below steps to do this:

Step 3: Configuring the Intercom Plugin

Go to Bubble.io's editor and locate the design of the page where you want to add the chat widget.

On the top-left of the editor, click the '+ Element' button. A drop-down menu will appear.

Look for the 'Visual Elements' section in the dropdown. Here, you will see the 'Intercom Widget'. Click on it to add the widget to your page.

This will add an Intercom button to the page. You can resize it and position it anywhere over the page as per your needs.

Step 4: Advanced configurations

Proceed by clicking on the widget. This will open up the widget's properties panel. Here you can configure different aspects of the widget such as which users can see it, which users should be hidden etc.

Based on how you have structured your project on Bubble.io, utilize the dynamic data field to set who should see the widget. For instance, you can configure it so that logged in users will see it and logged out users will not.

Similarly, click on the Intercom widget in the design editor. From the properties panel, locate and click the 'Start / Stop Tour'.

Doing so will allow you to set the conditions under which a certain guide / product tour will be shown in the chat widget. You can set multiple conditions based on your use case.

Step 5: Testing the Integration

You've completed the integration process. Now is the time to test the functionality.

Switch to the 'Preview' mode in Bubble.io and navigate to the page you added the widget.

Check if the chat widget is functioning as you set it up. Send a few messages and check on the Intercom dashboard to verify that they arrive.

With these steps, you have successfully integrated Bubble.io with Intercom and configured it to work as per your requirements. Keep iterating and testing until it works as you envision.