Om gebruik te maken van de webwinkelkeur javascript integratie dient een klein stukje javascript code op jouw webwinkel geplaatst te worden. De meeste WebwinkelKeur modules plaatsen deze code automatisch. Geen module voor jouw webwinkel? Dan kun je de code handmatig plaatsen (je vindt de code daarvoor na inloggen op dashboard.webwinkelkeur.nl bij installatie -> widget -> sidebar).
De standaard code voor de javascript integratie met sidebar ziet er als volgt uit:
<script type="text/javascript"> (function() {
// ID van jouw webwinkel
_webwinkelkeur_id = 1;
var js = document.createElement("script");
js.type = "text/javascript";
js.async = true;
js.src = "//www.webwinkelkeur.nl/js/sidebar.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(js, s); })();
</script>
Vervolgens zijn er diverse instellingen, deze instellingen kun je eenvoudig wijzigen door in te loggen op dashboard.webwinkelkeur.nl en naar Installatie > Sidebar & Tooltip te gaan. Daar kun je o.a. configureren aan welke kant van het scherm de sidebar standaard wordt weergegeven en waar deze op een mobiele telefoon wordt weergegeven.
Link naar pop-up
Naast de sidebar heb je ook de mogelijkheid om een Lightbox weergave van WebwinkelKeur binnen je eigen webwinkel op te roepen. Je kunt daarmee bijvoorbeeld beoordelingen tonen of jouw gemiddelde score weergeven binnen jouw eigen webwinkel.
Dit doe je door een link te voorzien van de betreffende class. Het attribuut ‘class’ wordt in het programmeren gebruikt om te verwijzen naar een specifiek stuk code (de ‘class’) in een stylesheet, maar bijvoorbeeld ook in javascript om wijzigingen in HTML-elementen met een bepaalde klasse te kunnen realiseren. Hiervoor heeft WebwinkelKeur de classes webwinkelkeurPopup, webwinkelkeurAddReview en webwinkelkeurReviews beschikbaar gesteld.
Link naar popup met overzicht webwinkelgegevens
De volgende link geeft de pop-up weer met de bedrijfsgegevens en de gemiddelde waardering. Dit overzicht biedt de mogelijkheid om door te klikken naar de overige pagina’s.
<a href=”https://www.webwinkelkeur.nl/leden/jouwpagina_1.html” class=”webwinkelkeurPopup”>Normale popup</a>
Link voor plaatsen klantbeoordeling
De volgende link geeft de pop-up weer met jouw klantbeoordelingen. De gebruiker kan hier eenvoudig doorklikken naar de pagina om een eigen ervaring te delen.
<a href=”https://www.webwinkelkeur.nl/leden/jouwpagina_1.html” class=”webwinkelkeurAddReview”>Normale popup</a>
Link voor weergeven klantbeoordelingen
De volgende link geeft de pop-up weer voor het delen van een klantbeoordeling. Op deze manier kun je bezoekers eenvoudig wijzen op de mogelijkheid om een klantbeoordeling te plaatsen
<a href=”https://www.webwinkelkeur.nl/leden/jouwpagina_1.html” class=”webwinkelkeurReviews”>Normale popup</a>
Geavanceerde opties
Via ons dashboard kun je de standaard instellingen van de javascript configuratie instellen. Wil je deze echter op een bepaalde pagina overschrijven, dan kan dit. Hiervoor kun je gebruik maken van diverse javascript variabelen. Wil je een bepaalde instelling voor elke pagina wijzigen, dan raden we aan dit niet via javascript te doen, maar via de instellingen op ons Dashboard.
| Variabele | Werking |
| _webwinkelkeur_tooltip | Wordt de WebwinkelKeur tooltip weergegeven bij Mouse-over? Deze waarde is oningevuld standaard true (wel Mouse-over weergeven). Zet hem op false om de Mouse-over niet weer te geven. |
| _webwinkelkeur_sidebar | Wordt de WebwinkelKeur sidebar weergegeven (button aan de zijkant van het scherm)? Deze waarde is oningevuld standaard true (wel weergeven). |
| _webwinkelkeur_sidebar_position | Word de webwinkelkeur sidebar left of right geplaatst? De standaard waarde is hierbij left. |
| _webwinkelkeur_sidebar_pixels_from_top | Hoeveel pixels wordt de sidebar vanaf de bovenkant van het scherm geplaatst? Vul hier een aantal pixels in om de plek waar de sidebar verschijnt te wijzigen. |
| _webwinkelkeur_mobile | Waar wordt de popup weergegeven op mobiel? De mogelijkheden zijn top, bottom of off om de sidebar niet op mobiel weer te geven. |
Een geplaatste code ziet er vervolgens (bijvoorbeeld) als onderstaand uit:
<script type="text/javascript">
(function() {
_webwinkelkeur_id = 1;
_webwinkelkeur_tooltip = false;
_webwinkelkeur_sidebar_position = right;
_webwinkelkeur_sidebar_pixels_from_top = 200;
var js = document.createElement("script"); js.type = "text/javascript";
js.async = true; js.src = "//www.webwinkelkeur.nl/js/sidebar.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(js, s);
})();
</script>