Widget Deployment

Learn the fundamentals of widget deployment in Modern Chat

Generate the script used to render your Modern Chat app in the Response app. You can use the script as-is for unauthenticated users. For authenticated users, you must update the generated script with the userId and jwt created with the steps in End user authentication.

We recommend placing the script in the <head> section of the website so it has a chance to run before the user interacts with the page. Once loaded the script will evaluate all Modern Chat Rules initially and then subsequently every 5 seconds.

For user traffic, we support the three major browsers:

  • Chrome (any version)
  • Firefox (any version)
  • IE (11 and Edge)

Example script for unauthenticated traffic

<script type='text/javascript'>
    window.KHOROS_CONFIG = {
        companyKey: '[COMPANY KEY]',
        appId: '5a56a108642d7e0051bef166',
        widgetId: 'f1b0c198-cfde-47bc-9e71-b5a83ad8ae12'
    };
    (function() {
        var scriptTag = document.createElement('script');

        scriptTag.setAttribute('src', 'https://brand-messenger.app.khoros.com/bundle/loader.js?v=' + new Date().getTime());

        document.head.appendChild(scriptTag);
    })();
</script>

The script works as-is for unauthenticated traffic. Follow the JWT instructions in End user authentication for authenticated traffic.

Example script for authenticated traffic

<script type='text/javascript'>
  window.KHOROS_CONFIG  = { 
   companyKey: '[COMPANY KEY]', 
   appId: '[APP ID]', 
   widgetId: '[WIDGET ID]'
   jwt: '[JWT TOKEN]'
   userId: '[USER ID]' 
  }; 
  (function(){var scriptTag = document.createElement('script');

  scriptTag.setAttribute('src','https://brand-messenger.app.khoros.com/bundle/loader.js?v=' + new Date().getTime());

  document.head.appendChild(scriptTag);})();
</script>

How to Generate the Script

  • Sign in to Response.
  • Go to Admin > Modern Chat.
  • Click on your Brand Messenger Legacy Modern Chat app.
1478
  • Click on the Script button.
  • Click on the Copy Script button. This will copy the script to your clipboard.
1201
  • Finally, paste it into your site or use something like Google Tag Manager to inject the script onto the page.

📘

We recommend placing the script within the <head></head> so the chat can load prior to the end-user being able to interact with the page.

If authentication is required, add the jwt and userId to the window.KHOROS_CONFIG definition, as indicated in the example above.