Placing a custom chat widget button
You can easily trigger the chat widget to open via a custom button on your website. In this article, we will explain how to do this.
By following these steps, you can easily integrate a button on your website that triggers the chat widget to open other than the standard button. This provides your website visitors with a seamless way to interact with your chatbot.
In the image below, you can see how we integrated this within Watermelon.
Follow the steps below to do the same:
- Adding the button: First, you need to add a button to your website where you want the chat widget to appear. You can add the button anywhere on your webpage using HTML. Here's an example of how you can add a button:
<button id="openChatButton">Open Chat</button>
Make sure to customize the button according to your website's design and style preferences.
- Integrating JavaScript: Next, you'll need to integrate JavaScript code that will trigger the chat widget to open when the button is clicked. Below is the JavaScript code snippet you'll need to add to your webpage:
<script>
document.getElementById('openChatButton').addEventListener('click', function() {
window['watermelonWidget'].emit('open-widget');
});
</script>
This code listens for a click event on the button with the ID "openChatButton". When the button is clicked, it triggers the chat widget to open.
- Testing: After integrating the button and JavaScript code, make sure to test it on your website to ensure that the chat widget opens correctly when the button is clicked.
Updated 2 months ago