You can easily trigger the chat widget to open via a 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, providing your website visitors with a seamless way to interact with your chatbot.
Step 1: 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.
Step 2: 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() {
// Find the element with id 'watermelon-widget-wrapper' inside the iframe
const divInsideIframe = window.parent.document.getElementById('watermelon-widget-wrapper');
// Make the element visible by setting its display property to 'block'
divInsideIframe.style.display = 'block';
// Add classes to the element to adjust its appearance
divInsideIframe.classList.add('watermelon-widget-wrapper', 'watermelon-widget-entering', 'watermelon-widget-clickable');
// Find the widget button element
const widgetButton = window.parent.document.querySelector('watermelon-widget-button');
// Adjust the visibility attribute of the widget button
widgetButton.setAttribute('visibility', 'open');
});
</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.
Step 3: 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.