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, namelijk na het klikken op een button
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 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>