How Do I Add an Intercom to Webflow?

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 “. Paste the following code snippet:

<script>
(function () {
  var w = window;
  var ic = w.Intercom;
  if (typeof ic === "function") {
    ic('reattach_activator');
    ic('update', intercomSettings);
  } else {
    var d = document;
    var i = function () {
      i.c(arguments)
    };
    i.q = [];
    i.c = function (args) {
      i.q.push(args)
    };
    w.Intercom = i;

    function l() {
      var s = d.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'https://widget.intercom.io/widget/YOUR_WIDGET_ID';
      var x = d.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    }
    if (w.attachEvent) {
      w.attachEvent('onload', l);
    } else {
      w.addEventListener('load', l, false);
    }
  }
})();
</script>

Again, make sure to replace ‘YOUR_WIDGET_ID’ with the actual Widget ID provided by Intercom.

Step 6: Publish Your Site
Once you have inserted the required code snippets for Intercom integration, click on “Publish” in the top-right corner of the Webflow Editor. Your site will now be live with Intercom enabled.

• Remember: It may take a few minutes for Intercom to be fully active on your website.
• Pro Tip: You can customize the appearance and behavior of the Intercom messenger by visiting your Intercom account settings.

Conclusion

Congratulations! You have successfully added an Intercom messenger to your Webflow site.

Now you can engage with your visitors in real-time, provide instant support, and gather valuable insights through user conversations. With this integration, you can take your website’s communication and user experience to new heights.

Final Thoughts

Integrating tools like Intercom into your website not only enhances its functionality but also improves visitor engagement. By following this step-by-step tutorial, you now have the knowledge to seamlessly add an Intercom messenger to your Webflow site. Remember to customize the appearance and behavior of Intercom according to your brand’s requirements.

We hope this tutorial has been helpful in guiding you through the process of adding an Intercom messenger to Webflow. Happy chatting with your website visitors!