How to Use a Custom Trigger Button for the Qiscus Omnichannel Widget

By default, the Qiscus Omnichannel Widget provides a built-in trigger button, as shown below:

However, in certain cases, you may prefer to use your own custom button to open the widget. This can be easily achieved by following the steps below:

Step 1: Hide the Default Qiscus Button

Add the following CSS code to your page to hide the original widget trigger button:

<style>
  .qcw-trigger-btn {
    display: none !important;
  }
</style>

Step 2: Link Your Custom Button to the Qiscus Widget

Next, make your custom button trigger the click event of the hidden Qiscus button by adding the JavaScript code below:

<script>
  document.getElementById("qiscus-btn").addEventListener("click",function(){
     document.querySelector(".qcw-trigger-btn").click();
  });
</script>

In this example, the button with the ID qiscus-btn acts as your custom trigger button.
When clicked, it will open the Qiscus Omnichannel Widget as if you had clicked the original button.

Step 3: View a Working Example

You can refer to this CodeSandbox example for a live demonstration of how the custom trigger button works.

You can refer to this codesandbox for a working example.