WebwinkelKeur biedt de mogelijkheid om middels iframe code jouw beoordelingsscore weer te geven op je webwinkel. Deze functie noemen we de WebwinkelKeur widget, hoe je de code genereert lees je door door te klikken naar deze uitleg.
Met de nodige technische kennis is het mogelijk om de weergave van de widget zelf aan te passen door het toepassen van je eigen CSS code.
De standaard iframe code
Een voorbeeld van een Iframe genereert door onze wizard, in deze code zie je onder andere variabelen als “language” staan. Deze code kun je uitbreiden met de variabele “css” om het uiterlijk van de widget te wijzigen.
<iframe src="https://dashboard.webwinkelkeur.nl/webshops/widget_html?id=<het ID van de webwinkel>&layout=new_default&theme=dark&color=%23ea0e8b&show=yes&view=slider&amount=6&width=manual&width_amount=280px&height=250px&interval=5000&language=nld" scrolling="no" class="wwk-widget-iframe wwk-widget--new_default wwk-widget--new_default--dark" style="border: 0; height: 250px!important; width: 280px!important;"></iframe>
CSS variabele toepassen
Gebruik maken van CSS variabele kan op 2 manieren, middels het rechtstreeks doorgeven van CSS code of middels het laden van een extern CSS bestand.
Voorbeeld CSS code: css=body{background:blue;}
Voorbeeld importeren van een CSS bestand: css=https://mywebsite.com/custom-widget.css
De complete documentatie van de widget vind je in onze API documentatie. Heb je zelf een widget op maat gemaakt? Laat het ons weten, dan delen we jouw creatie graag als voorbeeld.
Reacties
Deze informatie is inderdaad wat verouderd. Goed opgemerkt.
De optie om de widget te personaliseren die we nu adviseren is middels een CSS url. Je vindt de technische uitleg hierover op https://docs.webwinkelkeur.nl/javascript/widget/.
Bij de javascript widget zie je de parameter “css”, deze kun je gebruiken om je eigen CSS bestand in te laden en op die manier de widget te personaliseren.
Logo Webwinkelkeur + het cijfer groter + sterren, zonder het aantal reviews:
Voeg daarvoor het volgende aan de url toe:
&css=.wwk-widget–new_button_stars .wwk-widget__balloon{width:35px !important;height:35px !important;line-height:35px !important;font-size:.9rem !important;}.wwk-widget–new_button_stars .wwk-widget__reviews_count{display:none;}
Bedankt voor het delen Raymond 🙂 .
Heb je misschien ook een praktijkvoorbeeld (afbeelding) met het resultaat. Denk ik ook een mooie toevoeging.