Open the website widget with a button

Besides copying and pasting the code snippet to place the Website Widget on your website, there is another way to display the Website Widget, namely opening it by clicking a button.

Note: The Website Widget Legacy is being phased out and will no longer be usable after December 31, 2024. For more information, read this article.

In this article, we created an example that explains exactly how this works below. Follow the steps below.

1. Create a reference to an element in the DOM

var trigger = document.getElementById('chatbotTrigger');

2. Adding an eventlistner

The eventlistner is fired as soon as the trigger is clicked. In the source code, you still need to change the value of the variable: window['Watermelon'].key.

trigger.addEventListener('click', function() {
window['Watermelon'] = window['Watermelon'] || {};
window['Watermelon'].key = 'YOUR WEBSITE WIDGET KEY HERE';
window['Watermelon'].toggled = true;

localStorage.setItem('app.conversation.toggled', 'true');
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://wm-livechat-2-prod-dot-watermelonmessenger.appspot.com/assets/js/wm_plugin.js';
document.getElementsByTagName('script')[0].appendChild(script);
})

3. Example

Below is an example of how you might use it.

<html lang="en">
<head>
<title>Website widget</title>
</head>
<body>
<button id="chatbotTrigger">Open Website widget</button>
<script>
(function(){
var trigger = document.getElementById('chatbotTrigger');

function openChatBot() {
window['Watermelon'] = window['Watermelon'] || {};
window['Watermelon'].key = 'YOUR WEBSITE WIDGET KEY HERE';
window['Watermelon'].toggled = true;

localStorage.setItem('app.conversation.toggled', 'true');
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://wm-livechat-2-prod-dot-watermelonmessenger.appspot.com/assets/js/wm_plugin.js';
document.getElementsByTagName('script')[0].appendChild(script);
}

trigger.addEventListener('click', function() {
// If there is not chatbot open then open one else remove it and add it again
if (!document.getElementById('wm-livechat')) {
openChatBot();
} else {
const wmLiveChat = document.getElementById('wm-livechat');
document.getElementsByTagName('body')[0].removeChild(wmLiveChat);
openChatBot();
}
})
})();
</script>
</body>
</html>