Je kunt eenvoudig de chat widget activeren om te openen via een button op je website. In dit artikel leggen we uit hoe je dit kunt doen.
Door deze stappen te volgen, kun je eenvoudig een button op je website integreren die de chat widget activeert om te openen, waardoor je websitebezoekers eenvoudig kunnen communiceren met je chatbot.
Stap 1: Het Toevoegen van de Button
Allereerst moet je een button toevoegen aan je website waar je de chat widget wilt laten verschijnen. Je kunt de button overal op je webpagina toevoegen met behulp van HTML. Hier is een voorbeeld van hoe je een button kunt toevoegen:
<button id="openChatButton">Open Chat</button>
Zorg ervoor dat je de button aanpast aan de ontwerp- en stijlvoorkeuren van je website.
Stap 2: Het Integreren van JavaScript
Vervolgens moet je JavaScript-code integreren die de chat widget activeert om te openen wanneer er op de button wordt geklikt. Hieronder staat het JavaScript-codefragment dat je moet toevoegen aan je webpagina:
<script>
document.getElementById('openChatButton').addEventListener('click', function() {
// Zoek het element met de id 'watermelon-widget-wrapper' binnen het iframe
const divInsideIframe = window.parent.document.getElementById('watermelon-widget-wrapper');
// Maak het element zichtbaar door de display-eigenschap in te stellen op 'block'
divInsideIframe.style.display = 'block';
// Voeg klassen toe aan het element om het uiterlijk aan te passen
divInsideIframe.classList.add('watermelon-widget-wrapper', 'watermelon-widget-entering', 'watermelon-widget-clickable');
// Zoek het widget buttonelement
const widgetButton = window.parent.document.querySelector('watermelon-widget-button');
// Pas de zichtbaarheidseigenschap van de widget button aan
widgetButton.setAttribute('visibility', 'open');
});
</script>
Stap 3: Testen
Nadat je de button en de JavaScript-code hebt geïntegreerd, adviseren wij je deze op de website te testen, om te controleren of de chat widget correct opent wanneer er op de button geklikt wordt.