Eenvoudige integratie

Installatie keurmerk en reviewsysteem

Installeren van WebwinkelKeur is eenvoudig. Je hoeft echt geen programmeur te zijn om onze (interactieve) uitingen te integreren binnen je webshop. Startpunt voor de installatie is altijd jouw persoonlijke login via https://dashboard.webwinkelkeur.nl. Voor installatie is eerst een goedkeuring vereist.

Als je na het inloggen op ‘Installatie’ klikt, dan vind je daar stap-voor-stap persoonlijke instructies om WebwinkelKeur te installeren. Vergeet ook niet de tips voor de juiste plaatsing van je keurmerk te lezen.

Installeren gaat simpel. Selecteer jouw webshop software en krijg vervolgens een instructie op maat voor de installatie. We ondersteunen hierbij vrijwel alle veelgebruikte webshop softwares.

Screenshot dashboard webwinkelkeur modules
Dashboard WebwinkelKeur Installatie

Modules voor meeste webshop software

Momenteel hebben we kant-en-klaar modules voor de volgende software. Staat jouw software er niet tussen? Neem dan gerust even contact met ons op, integratie is vrijwel nooit een probleem.

Meer dan een logo op je webshop

In tegenstelling tot andere keurmerken, bieden we meer dan enkel een mooi logo. Namelijk ook een reviewsysteem waarmee je reviews kunt verzamelen. We hebben tal van integratiemogelijkheden waaronder onze speciale sidebar, hiermee kunnen jouw bezoekers de echtheid van het keurmerk controleren en reviews lezen zonder je webshop te verlaten. Ook bieden we een widget met de laatste reviews aan waarmee je jouw gemiddelde beoordeling eenvoudig toont op jouw webshop en banners welke direct wijzen op de voordelen van het WebwinkelKeur. Hiermee haal je meer rendement uit ons keurmerk.

keurmerk en reviews van webwinkelkeur
WebwinkelKeur is meer dan een logo: er zijn vele interactieve uitingen.

Installatie – Algemene vragen

De sidebar wordt niet geladen, wat nu?

Het komt soms voor dat de WebwinkelKeur sidebar om onbekende redenen niet wordt weergegeven. In dit stappenplan willen we je helpen om zelf het probleem te achterhalen.

Stap 1: wordt sidebar.js geladen?

De eerste stap is controleren of het script dat onze sidebar laadt wel wordt geladen. Dit kan eenvoudig door de broncode van de pagina te bekijken. Ga daarvoor in je browser naar de pagina waar je de sidebar verwacht en klik met je rechtermuisknop op een leeg gedeelte van de pagina. Kies daar voor “Show Page Source” of “Paginabron weergeven”. Bij bepaalde browsers kan het overigens ook voorkomen dat de optie ergens verstopt zit in het menu.

De broncode van de pagina weergeven
De broncode van de pagina weergeven

Je krijgt nu de code te zien, wellicht dat je hier snap weinig van snapt maar dat is geen probleem. Klik op de code en gebruik Ctrl + F om het zoekvenster te openen. Zoek vervolgens op “sidebar.js”. Vind je een code zoals onderstaand, dan is de sidebar goed geïnstalleerd. De code kan in veel verschillende vormen voorkomen. Vind je geen code? Kijk dan bij de module instellingen van WebwinkelKeur binnen jouw eigen webshop. Is de sidebar daar ingeschakeld? Probeer dan eventueel de module voor jouw webwinkel opnieuw te installeren.

Sidebar code WebwinkelKeur zonder extra instellingen
Sidebar code WebwinkelKeur zonder extra instellingen

Let op: gebruik je Lightspeed? Dan ziet jouw code er iets anders uit. Zoek dan niet op “sidebar.js”, maar op “scripts/sidebar”. Je zou dan iets moeten vinden wat lijkt op onderstaande code.

Sidebar code WebwinkelKeur is Lightspeed
Sidebar code WebwinkelKeur in Lightspeed

Stap 2: code van de sidebar juist?

De sidebar code wel gevonden? Kijk dan of er geen instellingen in de code staan die de sidebar deactiveren. Bijvoorbeeld in onderstaande code staat “_webwinkelkeur_sidebar = false;”, wat de weergave van de sidebar deactiveert. Er kan ook staan “_webwinkelkeur_mobile =false;”, dit deactiveert de sidebar enkel op lage resoluties (kleine schermen, mobiele telefoons, etc.).

Kijk ook of de waarde _webwinkelkeur_id de juiste waarde heeft. Staat hier het ID van de juiste webwinkel? Dit nummer komt overeen met de url van jouw ledenpagina. Is jouw ledenpagina te vinden op https://www.webwinkelkeur.nl/webshop/WebwinkelNaam_1047.html, dan is jouw webwinkelkeur_id 1047.

Sidebar code WebwinkelKeur
Sidebar code WebwinkelKeur met extra instellingen waarbij de sidebar is uitgeschakeld

Let op: gebruik je Lightspeed? Dan dien je eerst de url die eruit ziet als https://www.webwinkelkeur.nl/apps/seoshop/scripts/sidebar_13493.js te openen. Het nummer 13493 is NIET je webwinkel ID, maar een willekeurig nummer. Open deze url die je in stap 1 gevonden hebt in je broncode. In dat bestand vind je dan dezelfde sidebar code met jouw instellingen.

Stap 3: instellingen dashboard

Heb je in stap 1 de code van de sidebar gevonden, dan kunnen we verder kijken of de configuratie goed staat. Log hiervoor in op https://dashboard.webwinkelkeur.nl met je persoonlijke inlog.

Heb je meerdere webwinkels, kies dan bovenaan in de balk bij “Je beheert” de juiste webshop.

Kies de juiste webwinkel
Kies de juiste webshop.

Klik vervolgens in het linker menu op Installatie en kies voor Sidebar & Tooltip. Je komt nu op de pagina waar je de instellingen van de sidebar kunt personaliseren.

Op deze pagina staan twee belangrijke instellingen. Zo kun je onder het kopje sidebar de positie op uitgeschakeld hebben staan. Dan wordt de sidebar niet weergegeven.

Onder mobiele sidebar kun je ook de positie op uitgeschakeld hebben staan. Dan wordt de sidebar op kleine schermen en mobiele apparaten niet weergegeven.

Wijzig indien nodig de instellingen en kies onderaan op opslaan. Het kan een tijdje duren voor de nieuwe instellingen effect hebben.

In bovenstaande voorbeeld is zowel de sidebar als de mobiele sidebar uitgeschakeld
In bovenstaande voorbeeld is zowel de sidebar als de mobiele sidebar uitgeschakeld

Stap 4: Nog steeds geen sidebar?

Heb je in de vorige stappen geen problemen gevonden? Dan is er waarschijnlijk sprake van een technisch probleem. Vaak ligt dit probleem in een javascript conflict met andere onderdelen van je website. Neem hiervoor contact op met je webbeheerder. Komt hij er ook niet uit, neem dan gerust contact op met WebwinkelKeur voor ondersteuning.

Hoe plaats ik het keurmerk op mijn webwinkel?

Na het ontvangen van een goedkeuring ontvang je van ons een verwijzing naar een pagina met instructies voor de plaatsing van het keurmerk. Hierbij kun je kiezen uit verschillende formaten van het keurmerk, zodat je een formaat uit kiezen dat het beste bij jouw webwinkel past.

De daarbij behorende HTML code kopieer je van onze site naar jouw webwinkel. Hierbij bestaat het logo uit een keurmerk afbeelding welke klikbaar is en verwijst naar jouw persoonlijke pagina op WebwinkelKeur waar klanten hun ervaring kunnen achterlaten.

De manier van plaatsen hangt af van je webwinkel software. In veel gevallen kun je de HTML code kopiëren en plakken, in andere gevallen kun je een (klikbare) afbeelding plaatsen. Mocht je er niet uit komen, neem dan gerust even contact met ons op voor persoonlijke ondersteuning.

HTML code genereren voor WebwinkelKeur widget

De WebwinkelKeur widget maakt het mogelijk om de laatste klantervaringen + de gemiddelde klantwaardering weer te geven op uw eigen webwinkel. Deze widget is middels een klein stukje javascript op vrijwel elke webwinkel te plaatsen.

1. Login op dashboard.webwinkelKeur.nl met uw eigen persoonlijke logininformatie

Inloggen op WebwinkelKeur


 

2. Na het inloggen komt u op het Dashboard terecht. Kies hier in het menu links voor Installatie en klik vervolgens op wizard

Keurmerk plaatsen


 

3. Volg de wizard totdat u in Stap 3 aan komt

4. U komt nu op de pagina om de Widget code aan te maken. Doorloop hier alle stappen door zelf het uiterlijk en afmetingen van de widget te bepalen. Hierbij kunnen alleen leden met een PLUS account de hoofdkleur van de widget wijzigen.

5. Onderaan de pagina verschijnt nu uw persoonlijke widget code. Selecteer hierbij de gehele code in het tekstveld links naast de voorbeeld weergave en plak deze in de code van uw webwinkel op de plek waar u wilt dat de widget moet verschijnen.

Inloggen op WebwinkelKeur

WebwinkelKeur Javascript integratie Google Tag Manager

Installatie van onze sidebar middels Google Tag Manager kan handig zijn wanneer je het laden van externe scripts overzichtelijk binnen Google Tag Manager wilt regelen. Tevens is het een oplossing voor elke webshop software die een Google Tag Manager ondersteuning biedt, maar geen andere mogelijkheden tot het plaatsen van Javascript code.  Maak je gebruik van deze optie, zorg er dan voor dat onze javascript code niet nogmaals geladen wordt door een eventuele module.

WebwinkelKeur Javascript integratie

We gaan er in deze uitleg vanuit dat je al gebruik maakt van Google Tag manager en deze al juist binnen jouw webshop hebt geïnstalleerd.  In deze uitleg maken we gebruik van de Engelstalige interface, de exacte opties kunnen iets anders heten afhankelijk van de taal van je GTM account.

Stap 1: Allereerst log je in op je Google Tag manager account en klik je op de container welke gebruikt wordt binnen jouw webshop.

Kies de juist container
Kies de juist container

Stap 2: We gaan nu de code voor WebwinkelKeur toevoegen aan de container. Klik hiervoor in het menu links op ‘Tags’ en klik vervolgens op de knop ‘New’ om een nieuwe tag aan te maken.

Stap 3: Bovenaan staat nu de tekst ‘Untitled Tag’ – klik hier op om deze te bewerken en verander de naam naar ‘WebwinkelKeur javascript’.

Stap 4: Klik vervolgens op ‘Tag Configuration’, er opent zich nu een scherm, scroll naar onderen en onder het kopje ‘Custom’ voor ‘aangepaste HTML‘ om je eigen code in te voeren.

Stap 5: Er verschijnt nu een venster om je HTML code in te voeren. Kopieer hierin de javascript code welke je vind in jouw dashboard onder ‘Promotie’ -> ‘Sidebar’.

De Javascript code ingesteld via GTM
De Javascript code ingesteld via GTM

Stap 6: Klik vervolgens onderaan op ‘Triggering’. Kies daarna in het venster wat verschijnt voor ‘All Pages’.

Stel Triggering in op "All pages" zodat de sidebar op alle pagina's van je webwinkel verschijnt
Stel ‘Triggering’ in op ‘All pages’ zodat de sidebar op alle pagina’s van je webwinkel verschijnt.

Stap 7: Kies nu bovenaan voor ‘Save’ om de code op te slaan.

Stap 8: Klik vervolgens bovenaan je scherm op ‘Publish’ om je wijzigingen naar je webshop te publiceren. Er verschijnt dan een scherm waar je een naam voor de wijziging kunt opgeven, dit kun je leeg laten door nogmaals op ‘Publish’ te klikken en vervolgens voor ‘Continue’ te kiezen. Hierna kun je verder met de volgende stap (Google tag manager koppelen aan Mijnwebwinkel).

Deze gehele uitleg nakijken? Bekijk dan onze video op Youtube.

Voor ontwikkelaars

Voor geavanceerde opties hebben we een integratie handleiding beschikbaar voor ontwikkelaars. Tevens hebben we een volledige JSON API welke beschikbaar is voor leden via het dashboard.