Hoe toon ik productbeoordelingen in mijn webshop?

Je kunt productbeoordelingen die je via het eTrusted beoordelingsplatform verzamelt natuurlijk ook in je winkel of op je website laten zien. Voor consumenten bieden productbeoordelingen vooral toegevoegde waarde als ze gemakkelijk leesbaar zijn. In dit artikel leggen we uit op welke manieren je productbeoordelingen en beoordelingssterren kunt tonen.

Product Review Sticker

Met de Product Review Sticker toon je individuele productbeoordelingen die je klanten hebben afgegeven op de betreffende productpagina's. Op die manier kunnen je klanten zich nog beter oriënteren op de aankoop van je producten en een goed onderbouwde koopbeslissing nemen.

Zo ziet de Product Review Sticker eruit met de standaardinstellingen:

20160502_product-reviews_shop_en.png

De basis voor de Product Review Sticker wordt gevormd door de volgende code, die je invoegt op de productpagina op de plek waar je beoordelingen aan je klanten wilt laten zien:

<div id="productreviewsticker"></div>
<script type="text/javascript">
  _tsProductReviewsConfig = {
        tsid: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        sku: ['ART-123'],
        variant: 'productreviews',
        /* optional */
        borderColor: '#0DBEDC',
        backgroundColor: '#ffffff',
       locale: 'en_GB',
        starColor: '#FFDC0F',
        commentBorderColor: '#dad9d5',
        commentHideArrow: 'false',
        starSize: '15px',
        ratingSummary: 'false',
        maxHeight: '1200px',
        hideEmptySticker: 'false',
        filter: 'true',
        element: '#productreviewsticker',
        introtext: 'What our customers say:'
  };
  var scripts = document.getElementsByTagName('SCRIPT'),
  me = scripts[scripts.length - 1];
  var _ts = document.createElement('SCRIPT');
  _ts.type = 'text/javascript';
  _ts.async = true;
  _ts.charset = 'utf-8';
  _ts.src ='//widgets.trustedshops.com/reviews/tsSticker/tsProductSticker.js';
  me.parentNode.insertBefore(_ts, me);
  _tsProductReviewsConfig.script = _ts;
</script>

Je kunt een aantal segmenten in de code aanpassen om de weergave van de Product Review Sticker af te stemmen op het uiterlijk van je webshop. Hieronder leggen we uit welke parameters er zijn en wat je hiermee kunt instellen.

  • tsid: voer in deze parameter de Trusted Shops-ID van je webshop in.
  • sku: hier voer je de SKU van het product in. Gebruik hiervoor de variabele die je in je shopsysteem gebruikt als je de code opneemt in de template van de productdetailpagina. Op die manier wordt de SKU dynamisch gevuld, zodat de juiste Product Review Sticker wordt getoond op elke productpagina. Je kunt ook gezamenlijke beoordelingen tonen voor producten die verkrijgbaar zijn in meerdere uitvoeringen, zoals in verschillende kleuren of maten. Open hiervoor de betreffende productpagina en voeg de verschillende SKU's voor het betreffende product als volgt toe aan de code: ['produkt1sku','produkt2sku','produkt3sku']
  • variant: deze parameter ligt vast en mag niet worden veranderd.

Het instellen van deze drie parameters is essentieel om de Product Review Sticker goed te laten werken. De volgende parameters dienen echter om de sticker zo naadloos mogelijk in je webshop te integreren en aan te passen aan jouw wensen. We raden dan ook zeker aan om deze parameters optimaal in te stellen, ook al is dit niet noodzakelijk voor de werking van de sticker.

  • borderColor: de Product Review Sticker als geheel heeft een rand; deze is standaard turquoise. Kies je liever een andere kleur, vervang de bestaande waarde in de code dan door de hexadecimale waarde van de gewenste kleur.
  • backgroundColor: met deze parameter kun je de achtergrondkleur van de sticker instellen die zichtbaar is tussen de verschillende beoordelingsteksten. De standaard kleur is wit. Wil je een andere kleur gebruiken, vervang dan ook hier de bestaande waarde door de hexadecimale waarde van de gewenste kleur.
  • locale: met deze parameter bepaal je de taal van de content die niet door je klanten is gegenereerd, en de datumindeling. Standaard is de Engelse taal ingesteld en de standaard datumindeling voor het Verenigd Koninkrijk. De waarde voor de parameter 'locale' moet de volgende indeling hebben: language_COUNTRY. De gebruikte codes zijn die van ISO 639 en ISO 3166. Bijvoorbeeld: de waarde voor Nederland zou "nl_NL" zijn.
  • starColor: met deze parameter bepaal je welke kleur de sterren in de opmerkingen hebben. Deze zijn standaard geel, maar ook hier kun je de kleur aanpassen door een andere hexadecimale waarde in te voeren.
  • commentBorderColor: de tekst van een beoordeling is omrand, en met deze parameter kun je de kleur van deze rand instellen. De standaard kleur van de rand is grijs, maar ook deze kun je aanpassen door de gewenste hexadecimale waarde in te voeren.
  • commentHideArrow: de opmerkingen in de sticker worden standaard weergegeven als een tekstballon. Wil je de opmerkingen in een eenvoudig tekstvak weergeven, zet de waarde van deze parameter dan op "true".
  • starSize: met deze parameter bepaal je het formaat van de getoonde beoordelingssterren. De standaardinstelling is 15 px, maar je kunt deze waarde eenvoudig aanpassen als je de grootte wilt wijzigen.
  • ratingSummary: is deze parameter geactiveerd, dan worden de gemiddelde beoordeling en de sterren voor het product nogmaals getoond onder de productnaam in de sticker. Deze functie is standaard gedeactiveerd. Geef deze parameter de waarde "true" als je deze weergave wilt activeren.
  • maxHeight: met deze parameter kun je de grootte van de Product Review Sticker flexibel aanpassen; de standaardinstelling is 1200 px. Voer eenvoudig de gewenste hoogte in px in als waarde voor deze parameter om de hoogte aan te passen. Let op: deze parameter heeft geen invloed op het aantal weergegeven beoordelingen. Als het aantal beoordelingen niet past binnen de gewenste hoogte van de sticker, verschijnt er een schuifbalk.
  • hideEmptySticker: met deze parameter kun je de Product Review Sticker verbergen als er voor het betreffende product nog geen beoordeling is. Stel de waarde van deze parameter in op "true" als je de sticker in dat geval wilt verbergen.
  • filter: deze parameter wordt gebruikt om de sticker te voorzien van een functie waarmee klanten de getoonde beoordelingen kunnen filteren op het aantal toegekende sterren. Zo kunnen je klanten er bijvoorbeeld voor kiezen om alleen beoordelingen met vijf sterren te zien. Deze filteroptie is standaard geactiveerd. Voer de waarde "false" in voor deze parameter als je de optie wilt deactiveren.
  • element: met deze parameter wordt de JavaScript-code gekoppeld aan het DIV-element dat in de eerste coderegel is gedefinieerd. Je kunt natuurlijk ook zelf de ID van het DIV-element aangeven. Wil je de ID veranderen, vergeet dan niet om dit zowel in het DIV-element als in de parameter 'element' te doen. Het #-teken mag in de parameter niet ontbreken.
  • introtext: met deze parameter kun je in de Product Review Sticker een korte inleidende tekst invoegen onder de productnaam. De standaardinstelling is "Wat onze klanten zeggen:" Wil je een andere tekst, of helemaal geen tekst dan kun je hier de tekst veranderen of simpelweg verwijderen.

Kopieer nu zowel het DIV-element als de voorbereide JavaScript-code. Voeg beide rechtstreeks toe aan de plek in de productpaginasjabloon waar de Product Review Sticker moet worden weergegeven, zodat deze zichtbaar is op iedere afzonderlijke productpagina.

Productbeoordelingssterren

Je kunt de sterren voor de gemiddelde productbeoordeling onafhankelijk van de Product Review Sticker op je productpagina's weergeven. Met de beoordelingssterren op een opvallende positie krijgen je klanten meteen een indruk van de beoordeling van het product.

website_product-reviews_stars_en-GB.png

Als je de productbeoordelingssterren wilt integreren in je webshop, gebruik de onderstaande JavaScript-code dan als uitgangspunt.

<div id="reviewstars"></div>
<script type="text/javascript" src="//widgets.trustedshops.com/reviews/tsSticker/tsProductStickerSummary.js"></script>
<script>
var summaryBadge = new productStickerSummary();
summaryBadge.showSummary(
{
'tsId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
'sku': ['9990004'],
'element': '#reviewstars',
'starColor' : '#FFDC0F',
'starSize' : '14px',
'fontSize' : '12px',
'showRating' : 'true',
'scrollToReviews' : 'false',
'enablePlaceholder' : 'false'
}
);
</script>

Net als bij de Product Review Sticker zijn drie van de parameters essentieel en moeten worden ingevuld.

  • tsId: voer het Trusted Shops-ID van je webshop in als waarde voor deze parameter.
  • sku: net als bij de Product Review Sticker moet de SKU van het product worden ingevuld in deze parameter. Gebruik hiervoor de variabele die je in je shopsysteem gebruikt als je de code opneemt in de template van de productdetailpagina. Zo worden de SKU's dynamisch ingevuld, zodat de juiste productbeoordelingssterren worden getoond op elke productpagina. Je kunt ook gemeenschappelijke beoordelingssterren tonen voor producten die verkrijgbaar zijn in meerdere varianten, zoals in verschillende kleuren of maten. Open hiervoor de betreffende productpagina en voeg de verschillende SKU's voor het betreffende product als volgt toe aan de code: ['produkt1sku','produkt2sku','produkt3sku']
  • element: met deze parameter wordt de JavaScript-code gekoppeld aan het DIV-element dat in de eerste coderegel is gedefinieerd. Je kunt natuurlijk ook zelf de ID van het DIV-element aangeven. Wil je de ID veranderen, vergeet dan niet om dit zowel in het DIV-element als in de parameter 'element' te doen. Het #-teken mag in de parameter niet ontbreken.

Naast deze drie essentiële parameters biedt de JavaScript-code een aantal configuratieopties om de productbeoordelingssterren in je webshop naar wens vorm te geven.

  • starColor: met deze parameter bepaal je de kleur van de beoordelingssterren; de standaard instelling is geel. Als je deze kleur wilt veranderen, vervang de hexadecimale waarde in de code dan door de waarde van de gewenste kleur.
  • starSize: deze parameter bepaalt het formaat van de beoordelingssterren. De standaard instelling is 14 px, maar je kunt hier eenvoudig aan andere waarde invoeren.
  • fontSize: met deze parameter bepaal je de lettergrootte van de numerieke gegevens achter beoordelingssterren, die informatie geven over het aantal afgegeven beoordelingen en de gemiddelde score. De lettergrootte is standaard 12 px, maar je kunt deze waarde naar wens aanpassen.
  • showRating: deze parameter wordt gebruikt om de weergave van de gemiddelde score achter de beoordelingssterren aan of uit te zetten. Standaard is de weergave geactiveerd. Wil je de weergave uitschakelen, voer dan "false" in als waarde voor deze parameter.
  • scrollToReviews: met deze parameter kun je een ankerlink naar de Product Review Sticker creëren. Als deze parameter is geactiveerd worden klanten die op de sterren klikken, automatisch doorgeleid naar de Product Review Sticker op dezelfde pagina. Deze functie is standaard gedeactiveerd. Als je deze wilt activeren, zet de waarde van deze parameter dan op "true".
  • enablePlaceholder: je kunt deze parameter gebruiken om de sterren in grijs weer te geven in je webshop, als er nog geen beoordelingen voor het product zijn ontvangen. Deze functie staat standaard uit. Om hem te activeren moet je de waarde van de parameter veranderen in "true".

Nadat je de JavaScript-code naar wens hebt voorbereid kun je de productbeoordelingssterren invoegen op je productdetailpagina. Kopieer de voorbereide code, inclusief het DIV-element in de eerste regel van de code, en ga naar de template van je productpagina's. Plak de code op de plek waar je de productbeoordelingssterren wilt weergeven. We raden je aan om de beoordelingssterren onder de producttitel te plaatsen.

Je hebt nu met succes de productbeoordelingssterren op je productpagina's ingevoegd.

Hier vind je meer artikelen over productbeoordelingen:
- Hoe gebruik ik productbeoordelingen?
- Hoe voeg ik productbeoordelingen toe aan mijn Trustbadge-integratie?
- Hoe ziet de vragenlijst voor productbeoordelingen er uit?


Was dit artikel nuttig?

Aantal gebruikers dat dit nuttig vond: 0 van 0