Het plaatsen van de Website Widget

Wanneer je wilt dat jouw chat ook zichtbaar is op jouw website, zul je een stukje code moeten plaatsen op jouw website. Hoe je jouw chat widget plaatst, leggen we uit in dit artikel.

Voor het aanpassen of aanmaken van een website widget, zul je een beheerder rol in het platform moeten hebben. Heb je dit niet? Vraag dan een van jouw collega's om dit voor je uit te voeren!

Het ophalen van de code

Voordat we de website widget op jouw website kunnen plaatsen, hebben we de code nodig. Heb je nog geen website widget aangemaakt? Lees in dit artikel hoe je dit kunt doen.

Je haalt de code als volgt op:

  • Ga naar Instellingen.
  • Kies voor Kanalen verbinden/wijzigen en selecteer vervolgens Website widget.
  • Open de website widget die je wilt plaatsen.
  • Ga naar code inzien.
  • Klik op Kopieer code om de code te kopiëren naar jouw klembord.

Plaatsen bestaande website widget

 

Let op: beheer jij niet jouw eigen website? Stuur de code dan door aan jouw websitebeheerder! Hij kan de code gemakkelijk op de website plaatsen.

Het plaatsen van de code in de <head> tag

  • Open jouw Wordpress omgeving.
  • Ga in het Dashboard naar Weergave.
  • Ga naar Thema editor.
  • Zoek naar het Header bestand (header.php).
  • Voeg de eerder gekopieerde code toe na de <head> tag.
  • Klik op bestand bijwerken. Jouw website widget is nu toegevoegd aan je website.

Kun je niet bij de header.php, of lukt het niet om de code hier te plaatsen? Plaats de code dan in functions.php.

Het gebruiken van Google Tag manager

Maak je gebruik van Google Tag Manager? In dit artikel leggen we je in 7 stappen uit hoe je jouw Website Widget plaatst via Google Tag Manager.

Het gebruiken van de Wordpress plugin

  • Download de Watermelon plugin in WordPress-Plugin Store. Dit doe je doorin WordPress te gaan naar Plugins. Klik op Nieuwe plugin. Typ in de zoekbalk in: "Watermelon". Je kan de plugin ook hier downloaden.
  • Na het downloaden van de plugin moet je deze activeren in je WordPress account. Ga opnieuw naar Plugins. Kies nu voor Geinstalleerde plugins. Zoek naar de Watermelon plugin en klik op activeren.
  • Klik onder Geinstalleerde plugins op de Instellingen van de Watermelon Plugin. Hier kun je de Key invullen. Je kunt de Watermelon key uit jouw eerder gekopieerde code van je website widget halen. Zie de dikgedrukte code in het voorbeeld hieronder. Vul deze Watermelon Key in, in jouw Wordpress-plugin, en de website widget is gekoppeld!

Gebruik de onderstaande code niet, dit is een voorbeeld!

<script type="text/javascript">
window.Watermelon = window.Watermelon || {};
window.Watermelon.key = "plaats hier jouw eigen key";
window.Watermelon.toggled = false;
(function(d,s) {
s = d.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = "https://wm-livechat-2-prod-dot-watermelonmessenger.appspot.com/assets/js/wm_plugin.js";
d.getElementsByTagName('script')[0].appendChild(s);
}(document));
</script>

De chatbot actief zetten op de kanalen

Als laatste stap moet je selecteren op welke kanalen de chatbot actief op zal zijn. Dit doe je door middel van het volgen van de volgende stappen:

  • Klik op het chatbot icoon
  • Klik vervolgens op wijzigen
  • Klik dan op kanalen wijzigen  
  • Klik vervolgens op alle kanalen waar je de chatbot live wilt hebben staan
  • Klik op opslaan

Nu ben je helemaal klaar en staat je chatbot live!