Integrate Intercom with Uscreen | Uscreen Help Center

Pre-requisites

You'll need basic coding knowledge as you will need to edit and add some extra lines of code to the theme.liquid file, and you'll also need an account with Intercom, as you will need to obtain the Workspace ID.

Before you change the code, always duplicate your site as a backup.

One way to find your workspace ID is to check the URL of any page you have open in Intercom. It's the code that comes after apps/ in the URL. So for this example workspace, if we check the URL, we can see that the Workspace ID is gkeb4bs.

Your workspace ID is also available under Settings > Installation > Web in the "With code" tab.

Once the Workspace ID is ready, access your store and go to Website -> Themes -> Edit Code.

Select the footer.liquid:

In this area, you'll need to insert the following code with your respective Workspace ID:

{% if user.guest %}
  <script>
      window.intercomSettings = {
          app_id: "INSERT WORKSPACE ID HERE"
      };
  </script>
  <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/INSERT WORKSPACE ID HERE';
                  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>
  {% else %}
  <script>
      window.intercomSettings = {
              app_id: "INSERT WORKSPACE ID HERE",
              name: '{{ user.name }}', // Full name    email: '{{ user.email }}' // Email address  };  
  </script>
  <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/INSERT WORKSPACE ID HERE';
                  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>
{% endif %}

NOTE: The code editor, code snippets, and custom HTML blocks do not affect native apps. To learn more about native app customization, please check this help guide.

While we provide some tutorials for educational purposes, our support scope doesn't cover web development. Suppose you don't have the web development skills in-house, then you might want to hire a Web Developer for Advance Custom Changes.