In dit artikel leggen we uit hoe je een Website Widget Legacy aanmaakt, plaatst en verwijdert
Let op: dit artikel gaat over onze 'oude' Website Widget. Deze wordt niet ondersteund voor nieuwe features of bug fixes.
Het aanmaken van een nieuwe Website Widget Legacy
- Log in in Watermelon.
- Ga naar "Integraties" via het menu.
- Navigeer naar Kanalen en klik op het plusje bij "Website Widget Legacy". Tip: Heb je veel kanalen gekoppeld? Selecteer dan eerst Kanalen in het linker menu.
- Klik op "Maak nieuwe Website Widget aan" bovenaan op de pagina.
Vervolgens kun je je Website Widget gaan personaliseren!
Website Widget instellingen
- Geef je Website Widget een naam. Deze wordt zichtbaar voor de klant.
- Geef je Website Widget een status. Dit wordt getoond onder de naam.
Een statusbericht is bovenin het chatscherm zichtbaar, en zegt iets over jouw organisatie. Denk hier bijvoorbeeld aan een boodschap die iets zegt over wat de bezoeker in deze kan doen vinden, of de openingstijden van jouw chat agents. Hieronder een voorbeeld hiervan:
"Onze chatbot is 24/7 bereikbaar! Onze collega's zijn te bereiken op maandag t/m donderdag van 08:00 tot 18:00 uur en op vrijdag van 08:00 tot 17:00 uur. 💬"
Welkomstbericht
Het welkomstbericht is het eerste bericht wat de bezoeker zal zien staan in jouw Website Widget.
Klap het menu Welkomstbericht uit om dit in te stellen.
Een welkomstbericht kun je instellen om de bezoeker welkom te heten en uit te nodigen om een vraag te stellen of aan te geven wat voor soort vragen beantwoord kunnen worden in de chat. Als je bijvoorbeeld een chatbot actief hebt staan op dit kanaal en er een startknop onder staat, kan je kiezen voor "Klik op de button hier onder om een vraag te stellen".Wanneer je het welkomstbericht ook boven de Website Widget icoon zichtbaar wilt maken, kun je ervoor kiezen om de eyecatcher aan te zetten. Deze eyecatcher trekt de aandacht van jouw websitebezoeker, waardoor de kans groter is dat jouw Website Widget geopend wordt.
Dit zet je aan door onder Eye-catcher instellingen het schuifje om te zetten. Vervolgens heb je ook de mogelijkheid om ervoor te kiezen om de eyecatcher niet op mobiel te tonen.
Verander icoon
Hier kun je kiezen hoe je wilt dat de Website Widget eruit ziet op jouw website. Je kunt een gepersonaliseerd icoon toevoegen. Je kunt ook kiezen voor een van onze standaard iconen (vierkant of rond). Het icoon dat je upload mag maximaal 500 bij 500 pixels zijn. Je kan jpg, png en gif bestanden uploaden. Het bestand mag niet groter zijn dan 1 MB.
Personaliseren
Onder personaliseren kun je het chatvenster aanpassen naar de kleur van jouw branding. De hoofdkleur zie je terug in de bedrijfsnaam, het chatvenster, de tekstballonnen en de knoppen. We raden je aan om de achtergrondkleur licht te houden, zodat de chat goed leesbaar blijft. Je kunt de hex code van jouw bedrijfskleuren invoeren.
Onder Watermelon branding kun je kiezen of je wilt dat het '"Powered by Watermelon" watermerk zichtbaar is in jouw Website Widget.
In Typebalk placeholder kies je welke tekst er zichtbaar is in de typebalk, voordat iemand daar gaat typen. Bijvoorbeeld: "Hoe kunnen wij je helpen?"
In Typebalk placeholder kies je welke tekst er zichtbaar is in de typebalk, voordat iemand daar gaat typen. Bijvoorbeeld: "Hoe kunnen wij je helpen?"
Je kan het icoon wijzigen en de Website Widget personaliseren in het Business en Enterprise pakket.
Onder Taal kies je de taal voor de Website Widget informatie, zoals tijdsindicatie en kalender. Deze taal is zichtbaar voor klanten.
Code inzien
Onder "Code inzien" vind je de code terug die je op jouw website dient te plaatsen om ervoor te zorgen dat de Website Widget zichtbaar wordt. Je kunt hier ook op elk moment de code van jouw Website Widget terugvinden. Hieronder lees je hoe je de code plaatst.
Het plaatsen van de Website Widget
Wanneer je wilt dat de Website widget zichtbaar is op jouw website. Hier boven staat beschreven waar je deze code kunt vinden en kopiëren.
Let op: beheer jij niet jouw eigen website? Stuur de code dan door aan jouw websitebeheerder. De websitebeheerder kan de code gemakkelijk op de website plaatsen.
Het plaatsen van de code via Wordpress
- 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 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>
Het plaatsen van de code in Lightspeed
Wanneer je jouw website widget wilt plaatsen via Lightspeed, kun je onderstaande stappen volgen:
- Log in in jouw Lightspeed eCom met jouw inloggegevens.
- Navigeer naar het menu aan de linkerkant en ga via Website naar SEO.
- Ga vervolgens naar Koptekst metatags en verificatie site. Vul hier de code in en klik op 'Opslaan'.
- Jouw website widget is nu toegevoegd aan je website!
Het plaatsen van de code via 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 verwijderen van de Website Widget
Wil je de Website Widget verwijderen? Klik dan op "Verwijder Website Widget" bovenaan op de pagina van de desbetreffende Website Widget. De Website Widget zal niet langer actief zijn en jouw gegevens gaan verloren. Zorg ervoor dat je ook de code van je website verwijdert.