The Gladly Sidekick is an embeddable UI element that lives on your website and allows customers to search for answers or talk and interact with your team in real-time. The Gladly Sidekick API enables you to have programmatic control of the Gladly Sidekick.

JavaScript snippet

Add the following JavaScript embed code to all your site’s pages, preferably at the bottom of the page to avoid slowing down the main page content to load. This will load the code that powers the Gladly Sidekick on your site.

Note that the fourth argument of the snippet below specifies 'PROD' which enables you to use the latest release of the Chat-SDK with your production appId.

 <script>
  !function(c,n,r,t){if(!c[r]){var i,d,p=[];d="PROD"!==t&&t?"STAGING"===t?"https://cdn.gladly.qa/gladly/chat-sdk/widget.js":t:"https://cdn.gladly.com/chat-sdk/widget.js",c[r]={init:function(){i=arguments;var e={then:function(t){return p.push({type:"t",next:t}),e},catch:function(t){return p.push({type:"c",next:t}),e}};return e}},c.__onHelpAppHostReady__=function(t){if(delete c.__onHelpAppHostReady__,(c[r]=t).loaderCdn=d,i)for(var e=t.init.apply(t,i),n=0;n<p.length;n++){var a=p[n];e="t"===a.type?e.then(a.next):e.catch(a.next)}},function(){try{var t=n.getElementsByTagName("script")[0],e=n.createElement("script");e.async=!0,e.src=d+"?q="+(new Date).getTime(),t.parentNode.insertBefore(e,t)}catch(t){}}()}}
  (window,document,'Gladly','PROD')
 </script>

Initialize

In order to start the Gladly Sidekick on your site, you must initialize it after you load the above JavaScript embed code.

Basic Initialization:

Add the following script tag to your page to automatically initialize the Gladly Sidekick. This is most appropriate if you do not want to take advantage of any Gladly API functionality and just want to display a basic widget. Work with your Gladly CSM to get the “your-own-id” value.

<script>
 window.gladlyConfig = {
   appId: 'your-own-id'
 };
</script>

Manual Initialization:

Sidekick can be manually initialized to get better control over when to display the Sidekick. This could be desirable, for example, if you want to start the Sidekick from your own button.

For a more dynamic interaction, Sidekick exposes an Availability state that allows the site to change the behavior depending on if chat is closed or if it's unavailable due to high demand.

The example below initializes the Sidekick, then checks to see if chat is available and sets a class on a button assumed to exist on the page.

Gladly.init({
  appId: "your-own-id"
}).then(function() {
  // This is called once Sidekick has been initialized.

  // An element with the id "start-chat" is assumed to be on the page.
  var startChatButton = document.getElementById('start-chat');

  // An onClick handler can be attached to the "start-chat" element
  startChatButton.onclick = function() {Gladly.show()};

  // This API call gets the current availability
  var availablility = Gladly.getAvailability();

  // Setting the availability as the class name on the "start-chat" element,
  // this allows us to change the look of the button via CSS.
  startChatButton.setAttribute('class', availablility.toLowerCase());

  // Subscribe to changes in availability, and update the class on the "start-chat" element.
  Gladly.on('availability:change', function(availablility) {
    startChatButton.setAttribute('class', availablility.toLowerCase());
  });
}).catch(function(error) {
  // If anything goes wrong when Sidekick is being initialized, this gets called.
  console.log('error:', error)
});

Browser Support

The Gladly Sidekick supports major browsers. For the desktop, we support current + previous major versions of Chrome, Firefox, and Safari along with the current version of Microsoft Edge. For mobile, we support current + previous major versions of Chrome on Android and iOS and the current + previous versions of Safari on iOS.

Working with Sandbox / Staging Environment

You can use our sandbox environment to test upcoming Chat-SDK releases or new configuration on your staging site. To launch the Gladly Sidekick on your staging site, follow the steps above to add the JavaScript embed code and initialize. Then make following modification:

Change the value in this part of your embed code to 'STAGING':

    (window,document,'Gladly','STAGING')

Working with Single-Page Applications

If your website is a single-page application, you will need to call the navigate method every time the user navigates to another page on your site so that Gladly can re-evaluate proactive chat settings and Sidekick display rules.

Deployment Checklist

1. Add embed code to correct environment
2. Add embed code only once to each page
3. Initialize the Sidekick by either defining window.gladlyConfig OR calling Gladly.init(), never both

Custom Minimized Button

Gladly allows you to customize the minimized chat button that is rendered on your site to better align with your brand. Examples and documentation can be found here

Content Security Policy

Content-Security-Policy (CSP) is an advanced added layer of security that helps detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. For websites that make use of CSP the following directives has to be added to make Sidekick work as expected:

Production Environment

connect-src https://cdn.gladly.com https://us-1.gladly.com https://api.smooch.io https://*.config.smooch.io wss://api.smooch.io https://gladly-production.sinter-collect.com https://js.verygoodvault.com https://js2.verygoodvault.com;
frame-src https://js.verygoodvault.com https://js2.verygoodvault.com;
img-src blob: https://media.cdn.gladly.com https://media.smooch.io;
media-src https://cdn.gladly.com;
script-src 'unsafe-inline' https://cdn.gladly.com https://cdnjs.cloudflare.com https://api.smooch.io https://js.verygoodvault.com https://js2.verygoodvault.com;
style-src 'unsafe-inline' 'self' https://cdn.gladly.com;

Sandbox / Staging Environment

connect-src https://cdn.gladly.qa https://us-uat.gladly.qa https://api.smooch.io https://*.config.smooch.io wss://api.smooch.io https://gladly-staging.sinter-collect.com https://js.verygoodvault.com https://js2.verygoodvault.com;
frame-src https://js.verygoodvault.com https://js2.verygoodvault.com;
img-src blob: https://media.cdn.gladly.qa https://media.smooch.io;
media-src https://cdn.gladly.com;
script-src 'unsafe-inline' https://cdn.gladly.qa https://cdn.gladly.com https://cdnjs.cloudflare.com https://api.smooch.io https://js.verygoodvault.com https://js2.verygoodvault.com;
style-src 'unsafe-inline' 'self' https://cdn.gladly.qa https://cdn.gladly.com;