Skip to main content

Create an additional ChatBot button

Introduction​

Hi there! 👋 This guide explains how to create an additional button on your website that will allow your visitors to open the chat window to start a chat with your bot.

There are situations when you want to offer an additional button on your website that your customers will be able to use to directly open the chat with your bot (make it maximize).

To achieve it, you can use our Chat Widget API, from the ChatBot documentation: https://www.chatbot.com/docs/chat-widget-api/

To be more specific, here is the exact method that should be used: https://www.chatbot.com/docs/chat-widget-api/

Live example​

You can see how it works here

Configuration​

Here's how the method looks like, after adding it to the ready to use button code:

<button onclick="window.BE_API.openChatWindow()" > Open widget
</button>

The snippet above allows you to create a simple button, as follows:

tokens

The code, however, can be modified by using different styles, that will allow you to change, for example, the button size, background color or borders:

<button onclick="window.BE_API.openChatWindow()" style="width: 150px; height: 50px; background: transparent; border: none;">
<img src="https://i.ibb.co/VBDb1y5/320082955-527469242648246-7206760516535923437-n.png" alt="Open Chat">
</button>

Here's how our button looks like with an image included:

tokens

You can also add the 'clicking' animation to the button. To do that, you can use the :active pseudo-class in your CSS. The :active pseudo-class represents an element that is being activated by the user, such as a button being clicked.

<style> button:active {
transform: scale(0.95); }
</style>

This will add the clicking animation to the button when it is clicked.

And here's the complete code with the clicking animation added:

<style> button:active {
transform: scale(0.95); }
</style>
<button onclick="window.BE_API.openChatWindow()" style="width: 150px; height: 50px; background: transparent; border: none;">
<img src="https://i.ibb.co/VBDb1y5/320082955-527469242648246-7206760516535923437-n.png" alt="Open Chat">
</button>

Let us know in case of any further questions or doubts! We will be happy to help!

Yours, ChatBot Team <3