Chat widget openen met button

De chatbot triggeren

Naast het kopiëren en plakken van de code snippet om de Website Widget op je website te plaatsen is er nog een andere manier om de Website Widget te tonen. Je kunt bijvoorbeeld instellen dat na dat er op een button wordt geklikt de Website Widget wordt geopend. Met behulp van een een voorbeeld wordt hieronder uitgelegd hoe dit precies werkt.

1. Maak een referentie naar een element in de DOM

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

 

2. Het toevoegen van een eventlistener

De eventlistner wordt afgevuurd zodra er op trigger wordt geklikt. In de broncode moet je nog wel even de waarde van de variabel: window['Watermelon'].key aanpassen.

trigger.addEventListener('click', function() {
window['Watermelon'] = window['Watermelon'] || {};
window['Watermelon'].key = 'Website widget CODE HIER';
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. Voorbeeld

Hieronder staat een voorbeeld van hoe je het zou kunnen gebruiken. ​

<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 = 'Website widget CODE HIER';
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>