Example: Custom Box Mode

With custom box mode, you can present the widget inside a HTML page element. This is the way to control the location of the chat box and customize its default location at the bottom right side of the screen. 

Setting up a Custom Box

Add a new DIV element to your HTML page and position it where you would want to have the chat box opened:

<div id="qualifico_custom_box"></div>

Now add the following script to the page, before the closing "body" tag:

   <script async type="text/javascript" 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 => {
          api.setHeaderButtonsVisibility(false, false);
          api.open(false);
        });
      })();
    </script>

Make sure to replace org name with your Qualifico organization name. 

The above script will open the Qualifico Interaction inside the div element.