ChatBot button - Tutorial

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.
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 we will use for our button:
https://www.chatbot.com/docs/chat-widget-api/

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:
ChatBot button

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;">
Open chat </button>

Additionally, you can code your button to include an image, instead of text. To do that, you would need to include the image URL in the button code as follows: 
<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:
ChatBot button2
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.

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>