AI Chatbot: How to open a chat window from a custom button

By default, the AI Chatbot opens when visitors click the Launcher button.

But you may also want to open it from other elements on your site. This can be especially useful for buttons placed near pricing, services, contact details, or anywhere visitors may need a quick answer.

A small сustom script makes it possible. Here’s how to set it up :backhand_index_pointing_down:

1. Find the selector of your element


Start by choosing the button (or any clickable element) that should open the chatbot.

Right-click the element on your website and select Inspect. In the browser’s developer tools, locate the highlighted element, then copy its CSS selector:


2. Add the Custom JS script


Add the script below to the Custom JS section on the Settings tab of your widget’s settings:

const TARGET_SELECTOR = '';

window.addEventListener(
  'click',
  (event) => {
    const target = event.target.closest(TARGET_SELECTOR);

    if (!target) {
      return;
    }

    event.preventDefault();
    event.stopImmediatePropagation();

    const isOpen = util.findElement('.es-window-body');

    if (isOpen) {
      widget.window.close();
      return;
    }

    widget.window.open();
  },
  true
);

Then add the selector of your button to the first line of the script and save changes. Here 's how it looks in my case:

Important: You must add a dot before the selector to make it work



Here’s what the setup looks like once everything is in place:

V2Z7gnB5Ch


That’s it! Now your visitors can open the chatbot from any button or clickable element you choose :tada:

Was this solution helpful? Share your experience in the comments :slightly_smiling_face:

3 Likes