Adding an Intercom to Webflow is a great way to enhance your website’s user experience and communication with visitors. Intercom is a powerful customer messaging platform that allows you to chat with your website users in real-time, provide support, and even collect valuable user feedback. In this tutorial, we will walk you through the steps to seamlessly integrate Intercom into your Webflow site.
Step 1: Sign up for Intercom
Before we dive into the integration process, you will need to sign up for an Intercom account. Head over to the Intercom website and create a new account if you don’t have one already. Once you’re signed in, you’ll have access to your API key, which we’ll need later on.
Step 2: Accessing Webflow Editor
To begin adding Intercom to your Webflow site, log in to your Webflow account and navigate to the dashboard. Locate the project where you want to add the Intercom messenger. Open the project in the Webflow Editor by clicking on “Edit Site” or selecting the “Designer” option from the dropdown menu.
Step 3: Adding Custom Code
In the Webflow Editor, find the page where you want to add Intercom and open its settings panel by clicking on the gear icon. Scroll down until you see “Custom Code” and click on it. This is where we can insert our HTML code for integrating Intercom.
Note: If you want Intercom to appear on all pages of your website, repeat this step for each page.
Step 4: Inserting JavaScript Snippet
Inside the Custom Code section, click on “Head” and paste the following JavaScript code snippet:
<script>
window.intercomSettings = {
app_id: 'YOUR_APP_ID'
};
</script>
Make sure to replace ‘YOUR_APP_ID’ with the actual App ID provided by Intercom.
Step 5: Adding the Intercom Messenger
To add the Intercom messenger to your Webflow site, go back to the Custom Code section and click on “Before