Widget Client API Overview

The Qualifico widget exposes client side API that can be used to customize the behavior of the widget.

In order to access the widget api, embed the following JavaScript code in the same page that includes the Qualifico widget script tag:

 <script async type="text/javascript" data-log="on" src="https://{your org name}.widget.qualifico.com/loader/widget.loader.js"></script>  
    <script type="text/javascript">
      function widgetApi() {
        return new Promise((resolve) => {
          let timeoutId;
          const getApi = () => {
            const event = new Event('getQualificoWidgetApi');
            timeoutId = window.setTimeout(getApi, 1000);
            window.dispatchEvent(event);
          }
          const onWidgetApi = (e) => {
            const api = e.detail;
            window.clearTimeout(timeoutId);
            resolve(api);
          }
          window.addEventListener('qualificoWidgetApi', onWidgetApi, { once: true });
          getApi();
        });
      }
      (function () {
        widgetApi().then(api => {
          // custom api code goes here
        });
      })();
    </script>

* Make sure to set your Qualifico organization name in the script endpoint

The supported available api behaviors include:

• Hide buttons: hide the minimize and close buttons in the widget header

api.setHeaderButtonsVisibility(false, false);

• Custom box mode: opening the chat box inside a custom DIV element that can be dynamically positioned in the hosting page

api.setCustomBoxMode(true);

• Open: Causes the chat box to open

api.open();

• Close: Closes the chat box

api.close();

• Do not track: instructs the widget to stop visitor tracking

api.doNotTrack(true);

• Add custom style: apply custom css styles to the chat elements

api.setCustomCss("#feedBody { background-color: white !important; }");