Create a custom Toggle Button

By default, the Cognigy Webchat is opened and closed with the so-called "Toggle Button"

whose design can optionally be customized by using the CSS Customization:

[data-cognigy-webchat-root] [data-cognigy-webchat-toggle].webchat-toggle-button {

    background-image: none;
    background-color: rgb(5, 5, 131);
}

In some use-cases, however, a completely different HTML element could be used in order to toggle the Webchat window. Therefore, one can create their own HTML element and use the Webchat API on click events.

Create a custom HTML element

On the website, there could be a button that should open the webchat while the HTML could be similar to:

<button
  class="custom-webchat-toggle-button"
>
  Open Chat
</button>

that is styled by the CSS class called "custom-webchat-toggle-button":

<style>
  .custom-webchat-toggle-button {
    border-radius: 30px;
    border: none;;
    background-color: red;
    color: white;
    padding: 15px;
    cursor: pointer;
    position: fixed;
    bottom: 25px;
    right: 25px;
  }
 </style>

One thing that is missing in the CSS above is making the default toggle button invisible. Otherwise, the user would see two buttons which would be confusing. Therefore, the following CSS is required:

<style>
  [data-cognigy-webchat-root] [data-cognigy-webchat-toggle].webchat-toggle-button {
    display: none;
  }
</style>

This style will show the following button on the website:

Toggle the Webchat on button click

Now, the Webchat window should open or close as soon as the user clicks on the new custom button. For this, first, the Webchat must be initialized and added to the HTML website (DOM) by using the "Embedding HTML" in the Cognigy.AI Endpoint:

while the whole HTML should now look similar to this:

<style>
  [data-cognigy-webchat-root] [data-cognigy-webchat-toggle].webchat-toggle-button {
    display: none;
  }

  .custom-webchat-toggle-button {
    border-radius: 30px;
    border: none;;
    background-color: red;
    color: white;
    padding: 15px;
    cursor: pointer;
    position: fixed;
    bottom: 25px;
    right: 25px;
  }
</style>
 
<button
  onclick="window.cognigyWebchat.toggle()"
  class="custom-webchat-toggle-button"
>
  Open Chat
</button>

<script src="https://github.com/Cognigy/WebchatWidget/releases/latest/download/webchat.js"></script>
<script>
  initWebchat(
    "https://endpoint-trial.cognigy.ai/9b527c86fffc0aa5de79eb10cfc8cecdae1db4102efad5268d88d0857974fd15"
  ).then(webchat => {
    window.cognigyWebchat = webchat;
  });
</script>

The only line that is new in the HTML above is the bold one:

onclick="window.cognigyWebchat.toggle()"

This means that, as soon as the button is clicked by the user, the window.cognigyWebchat.toggle() function should be used which is coming from the second bold part in the HTML above:

.then(webchat => {
 window.cognigyWebchat = webchat;
 });

This command exposes the Webchat class to the whole website. This means, that the Webchat API finally can be used. One of the functions in this API is toggle() which opens or closes the Webchat window based on the current state.

With this HTML and JS in place, one can create their own custom toggle button with the Cognigy Webchat.

Create a custom Toggle Button

Create a custom HTML element

Toggle the Webchat on button click

Webchat

Comments