Integrating Intercom Chatbot with Salesforce Experience Cloud

3 min readJan 25, 2024

In one of my recent projects, I worked on integrating Intercom Chatbot with Salesforce Experience Cloud for site visitors. Surprisingly, there weren’t a lot of resources available on this out there, motivating me to share my experience in the hope that it proves beneficial to others.

Demo

Getting Started

To begin, sign up for a free trial on Intercom and create a Trailhead Playground if you wish to follow along.

Once in Intercom, navigate to your user icon on the bottom left, proceed to settings, and click on Installation. Copy the Basic JavaScript for Web snippet provided.

The code will look something like this.

<script>
  window.intercomSettings = {
    api_base: "https://api-iam.intercom.io",
    app_id: "YourAppId"
  };
</script>
<script>
  (function() {
    var w = window;
    var ic = w.Intercom;
    if (typeof ic === "function") {
      ic('reattach_activator');
      ic('update', w.intercomSettings);
    } else {
      var d = document;
      var i = function() {
        i.c(arguments);
      };
      i.q = [];
      i.c = function(args) {
        i.q.push(args);
      };
      w.Intercom = i;
      var l = function() {
        var s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'https://widget.intercom.io/widget/YourAppId';
        var x = d.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
      };
      if (document.readyState === 'complete') {
        l();
      } else if (w.attachEvent) {
        w.attachEvent('onload', l);
      } else {
        w.addEventListener('load', l, false);
      }
    }
  })();
</script>

Content Security Policy (CSP) Update:

Next, update the Content Security Policy on your Experience Cloud site. In the Site Builder, access Settings, and navigate to Security & Privacy. Under “Content Security Policy (CSP),” set the Security Level to “Relaxed CSP: Permit Access to Inline Scripts and Allowed Hosts.”

Add the following URLs under “Trusted Sites for Scripts”:

Salesforce Trusted URLs

With CSP updated, add the same URLs to your Salesforce org’s Trusted URLs. Access Setup, type in “Trusted URLs”. Add the URLs above, set the CSP Context to Experience Builder Sites, and select all CSP Directives.

Embedding the Code

Now comes the exciting part. In your Experience Cloud Site Builder, proceed to settings, navigate to advanced, and click on Edit Header Markup. Paste the copied code into the Header Markup.

I’m using the chatbot for guest users so I removed the following part of code related to user details:

    name: user.name, // Full name
    user_id: user.id, // a UUID for your user
    email: user.email, // the email for your user
    created_at: user.createdAt // Signup date as a Unix timestamp

Refresh your site, and voila! You should now see the Intercom Chatbot positioned on the bottom right.

Additional Resources

For further insights and troubleshooting, consider exploring the following resources: