Welke weergavevarianten van de Trustbadge® bestaan er en hoe integreer ik deze in mijn webshop?

Een aanwijzing vooraf: In deze tutorial lichten we toe welke weergavevarianten van de Trustbadge er allemaal zijn en welke parameters je hiervoor kunt instellen. Verder leggen we uit welke stappen nodig zijn om de Trustbadge te integreren en te configureren. De aanwijzingen zijn gebaseerd op deze tutorial, waarin wordt uitgelegd hoe de standaard integratie van de Trustbadge in zijn werk gaat: Hoe kan ik de Trustbadge zonder plug-in integreren in mijn webshop? Voer daarom eerst de standaard integratie uit voordat je verder gaat met deze tutorial.

De Trustbadge varianten

De varianten 'reviews' en 'default'

trustbadge_trustmark_reviews_NL.pngtrustbadge_reviews_NL.png

Variant 'reviews' (met en zonder keurmerk)

trustbadge_no_reviews_NL.png

Variant 'default'

De variant 'reviews' toont zowel je beoordelingssterren als het keurmerk. Als je alleen het keurmerk wilt laten zien, kun je de variant 'default' gebruiken.

Hoe je deze twee varianten inbouwt in je webshop, wordt in detail uitgelegd in deze tutorial: Hoe kan ik de Trustbadge zonder plug-in integreren in mijn webshop?

Je kunt de varianten 'reviews' en 'default' aanpassen aan je eigen wensen met behulp van de volgende parameters in de Trustbadge-code:

'yOffset': '0', /* offset from page bottom */

Standaard wordt de Trustbadge op de webshop rechts onderaan op het scherm getoond. Met de parameter 'yOffset' kun je de Trustbadge verplaatsen op de verticale as. Geef hiervoor eenvoudig, in plaats van de '0', het gewenste aantal pixels op waarmee de Trustbadge naar boven moet worden verschoven. Het is ook mogelijk om de Trustbadge verder naar beneden te plaatsen. Voer hiertoe simpelweg een overeenkomstige negatieve waarde in.

Standaard wordt de Trustbadge 54 px boven de onderste rand geplaatst. Voer daarom voor de parameter 'yOffsetˈ' geen waarde lager dan -54 in.
'variant': 'reviews', /* default, reviews, custom, custom_reviews */

Er zijn vier varianten van de Trustbadge. Met behulp van de parameter 'variant' bepaal je welke variant van de Trustbadge moet worden getoond in de webshop. Standaard is de variant 'reviews' geselecteerd. Gebruik je liever een andere variant, vervang de waarde in de coderegel dan door 'default', 'custom_reviews' of 'custom'.

'disableResponsive': 'false', /* deactivate responsive behaviour */

Standaard past de Trustbadge zich automatisch aan aan de grootte van het beeldscherm van de klant. Zo schakelt de Trustbadge bij een schermbreedte van 648 px en kleiner over naar een variant die is geoptimaliseerd voor mobiele apparaten. Als je de waarde van de parameter 'disableResponsive' verandert van 'false' in 'true', wordt deze automatische aanpassing uitgeschakeld. Ook op mobiele apparaten wordt dan de desktopversie van de Trustbadge getoond.

'disableTrustbadge': 'false' /* deactivate trustbadge */

Met deze parameter kun je bepalen of de Trustbadge überhaupt moet worden getoond in je webshop. Als je de waarde van de parameter van 'false' op 'true' zet, wordt de Trustbadge verborgen. Op de bedankpagina verschijnt echter wel de Trustcard, waarmee je klanten toestemming kunnen geven voor het ontvangen van een beoordelingsuitnodiging en waarmee ze de kopersbescherming krijgen aangeboden.

De varianten 'custom' en 'custom_reviews'

helpcenter_BILD.png

De variant 'custom'

TB5-custom-trustmark-only_NL.pngreviews-only_NL.png

De variant 'custom_reviews' (met en zonder keurmerk)

In tegenstelling tot de vast aan de rechterkant van het scherm verankerde varianten 'reviews' en 'default' kunnen de varianten 'custom' en 'custom_reviews' flexibel in de shop worden gepositioneerd. Wil je één van deze twee varianten integreren in de webshop, volg dan de stappen in de onderstaande integratie handleiding.

De onderstaande integratie handleiding bouwt voort op deze tutorial: Hoe kan ik de Trustbadge zonder plug-in integreren in mijn webshop? Heb je de stappen in die handleiding nog niet doorlopen, doe dat dan eerst voordat je verder gaat met de onderstaande stappen.

Stap 1: een DIV-element creëren

Om een van de Trustbadge-varianten 'custom' of 'custom_reviews' te kunnen gebruiken, moet je eerst een DIV-element creëren. Kopieer daartoe de onderstaande HTML-code en plak deze op de plek in je shopsysteem waar de Trustbadge moet verschijnen. Mogelijke posities zijn bijvoorbeeld in de header of in de footer.

<div id="MyCustomTrustbadge" style="width:160px;height:80px"></div>

Binnen deze HTML-code bestaan twee mogelijkheden om de Trustbadge aan te passen.

  1. Je kunt een nieuw ID toekennen aan het DIV-element. Vervang hiervoor eenvoudig de waarde "MyCustomTrustbadge" door een naam naar keuze. Als je besluit het ID van de Trustbadge te veranderen, noteer het zelfgedefinieerde ID dan. Je hebt dit in stap 3 nog een keer nodig.
  2. Met behulp van de eigenschappen 'width' en 'height' kun je de breedte en hoogte van de Trustbadge aanpassen. Vervang hiervoor simpelweg de numerieke waarden achter 'width' (breedte) en 'height' (hoogte) met waarden die het best aansluiten op jouw behoeften. Let er wel op dat de oorspronkelijke breedte-hoogteverhouding (de breedte gedeeld door de hoogte) van de Trustbadge behouden blijft. Deze verhouding is 2:1 voor de variant 'custom_reviews' en 1:1 voor de variant 'custom'.

Stap 2: je favoriete Trustbadge variant kiezen

Open nu de plug-in of het templatebestand waarin je de Trustbadge-code hebt geplakt.

Als je de Trustbadge-code nog niet hebt gegenereerd en in de webshop geïntegreerd, volg dan eerst de stappen in deze handleiding: Hoe kan ik de Trustbadge zonder plug-in integreren in mijn webshop?

Bepaal met behulp van de parameter 'variant' in de Trustbadge-code, welke Trustbadge-variant je wilt gebruiken voor jouw webshop. Voer hiervoor hetzij 'custom' of 'custom_reviews' in als waarde voor de parameter. Na de aanpassing moet de coderegel er zo:

'variant': 'custom', /* reviews, default, custom, custom_reviews */

of zo uitzien:

'variant': 'custom_reviews', /* reviews, default, custom, custom_reviews */

Stap 3: de Trustbadge-code en het DIV-element koppelen

Voeg vervolgens de volgende coderegel toe aan de Trustbadge-code, als deze er nog niet in staat:

'customElementId': 'MyCustomTrustbadge', /* required for variants custom and custom_reviews */

De parameter 'customElementId' is de referentiemarkering voor het DIV-element dat je in stap 1 hebt gecreëerd en zorgt voor de koppeling van het DIV-element met de Trustbadge-code. Als je in stap 1 het ID hebt veranderd, vervang dan ook de waarde 'MyCustomTrustbadge' in deze parameter door het door jezelf gedefinieerde ID van het DIV-element.

De variant 'custom' is alleen beschikbaar voor webshops met het Trusted Shops keurmerk en is alleen zichtbaar als het keurmerk actief is. Als je keurmerk nog niet is geactiveerd en je toch een preview wilt zien, dan kun je dit doen met behulp van de ontwikkelaarsconsole van je browser. Voer daar eenvoudig het commando trustbadge.showIntegrationPlaceholder(); uit.

Optionele stap 4: de openingsrichting van de Trustbadge bepalen

Je klanten worden in je webshop continu vergezeld door de geminimaliseerde Trustbadge. Ze kunnen deze maximaliseren door er eenmaal op te klikken om meer informatie over je keurmerk of verzamelde beoordelingen te zien. De Trustbadge wordt standaard gemaximaliseerd in de richting waar de meeste ruimte is, ongeacht waar hij in de webshop staat.

Je kunt echter ook een vaste richting aangeven waarin de Trustbadge moet worden gemaximaliseerd. Voeg daarvoor eerst de volgende coderegel in in de Trustbadge-code, voor zover deze nog niet aanwezig is:

'trustcardDirection': '', /* topRight, topLeft, bottomRight, bottomLeft */

Bepaal nu de maximaliseringsrichting door één van de volgende waarden in te voeren voor de parameter:

  • 'topRight' voor maximaliseren naar rechtsboven.
  • 'topLeft' voor maximaliseren naar linksboven.
  • 'bottomRight' voor maximaliseren naar rechtsonder.
  • 'bottomLeft' voor maximaliseren naar linksonder.

Voor het maximaliseren naar rechtsboven moet de coderegel er na de aanpassing dus als volgt uitzien:

'trustcardDirection': 'topRight', /* topRight, topLeft, bottomRight, bottomLeft */

Hiermee is de integratie van de variant 'custom' c.q. 'custom_reviews' voltooid en kun je de weergave van de Trustbadge controleren in je webshop.

Aanwijzing: Verschijnt de Trustbadge toch in de hoek rechtsonder? Controleer dan:

  • of je in de parameter 'variant' daadwerkelijk de waarde "custom" of "custom_reviews" hebt ingevoerd,
  • of je in de parameter 'customElementId' verwijst naar het juiste ID van het, in stap 1 gecreëerde, DIV-element,
  • of je de hoogte en breedte van het DIV-element hebt gedefinieerd, zoals beschreven in stap 1.

In de ontwikkelaarsconsole van je browser krijg je in deze gevallen een melding met verdere aanwijzingen.

De mobiele Trustbadge-varianten 'floating', 'floating_reviews' en 'topbar'

Natuurlijk biedt Trusted Shops ook mobiele weergavevarianten van de Trustbadge aan. Deze worden standaard – dus als je de waarde voor de parameter 'disableResponsive' niet op "true" hebt gezet – getoond bij beeldschermbreedten van 648 px en kleiner.

mobile-trustmark-only.png

De hier getoonde zwevende variant ('floating') is de mobiele standaardvariant van de Trustbadge. In tegenstelling tot de varianten 'reviews' en 'default' wordt deze standaard in de linker onderhoek van je webshop getoond. Verder bevat deze variant alleen het keurmerk.

Wil je ook je beoordelingssterren presenteren, dan zijn hiervoor twee mogelijkheden.

  • De variant 'floating_reviews': wordt net als de variant 'floating' ook standaard linksonder in je webwinkel getoond. Anders dan bij de variant 'floating' toont deze variant echter ook de beoordelingssterren.

mobile-trustmark_reviews.png

  • De variant 'topbar': deze variant is een balk die boven je shopheader wordt getoond en die zowel het keurmerk als ook de beoordelingsscore laat zien.

trustbadge-mobile-topbar_NL.jpg

Kopieer de volgende coderegel en voeg deze onder de parameter 'variant' in je Trustbadge-code om de mobiele weergave van de Trustbadge te configureren:

'responsive': {'variant':'floating', 'position':'left', 'yOffset':'0'},

Binnen de parameter heb je drie configuratiemogelijkheden:

  • met de waarde die je voor 'variant' invoert bepaal je welke Trustbadge-variant je wilt laten zien bij beeldschermbreedtes kleiner dan 648 px. Je hebt de keuze uit de varianten 'floating', 'floating_reviews' en 'topbar'. Voer de waarde van de variant van je voorkeur in voor 'variant'.
  • De varianten 'floating' en 'floating_reviews' zijn niet verankerd aan de linkerrand van de webshop. De horizontale positie van deze twee varianten wordt gedefinieerd door de waarde die je invoert voor 'position'. Behalve de standaardwaarde 'left' kun je ook 'center' invoeren om de Trustbadge in het midden te plaatsen en 'right' om deze tegen de rechterrand te positioneren. Voor de variant 'topbar' kan de horizontale positie niet worden aangepast, omdat de balk zich over de hele breedte van het beeldscherm uitstrekt.
  • Voor de varianten 'floating' en 'floating_reviews' kan daarnaast de verticale positie worden aangepast. Dit wordt gedaan met de parameter 'yOffset'. Vervang de 0 simpelweg door het gewenste aantal pixels om de mobiele Trustbadge meer naar boven te plaatsen. Voor de variant 'topbar' kan de verticale positie niet worden gedefinieerd. Deze variant is verankerd aan de bovenrand van het shopvenster.
Naast deze varianten van de Trustbadge die voor mobiele apparaten zijn ontwikkeld kun je ook in de mobiele weergave van je webshop de varianten 'custom' en 'custom_reviews' gebruiken. Hoe je deze varianten kunt instellen voor mobiele weergave, leggen we uit in dit artikel: Hoe kan ik de mobiele weergave van de Trustbadge® aanpassen?

Aanvullende parameters

Flexibele positie van de Trustcard (Custom-Checkout)

Uiteraard kun je ook de Trustcard vrij positioneren op de bedankpagina. Deze instelling is niet gebonden aan de varianten 'custom' en 'custom_reviews', maar kan ook worden gebruikt met de varianten 'reviews' en 'default'. Volg hiervoor eenvoudig de volgende aanwijzingen.

Stap 1: een DIV-element creëren op de bedankpagina

Eerst moet je op de plek van de bedankpagina waar de Trustcard moet worden getoond, een DIV-element creëren. Voeg daarvoor eenvoudig de volgende coderegel in op de betreffende plek:

<div id="customCheckoutDiv"></div>

Het ID van het DIV-element is standaard 'customCheckoutDiv'. Je kunt dit ID ook vervangen door een zelfgekozen naam. Vergeet in dat geval niet om je zelfbedachte ID in de volgende stap ook te verwerken in de Trustbadge-code.

Stap 2: de Trustbadge-code en het DIV-element koppelen

Voeg onder de coderegel 'variant' de volgende coderegel in de Trustbadge-code:

'customCheckoutElementId': 'customCheckoutDiv',

De parameter 'customCheckoutElementId' is de referentiemarkering voor het in stap 1 aangemaakte DIV-element en koppelt dit aan je Trustbadge-code. Als je in stap 1 het ID van het DIV-element hebt veranderd, vervang dan ook de waarde 'customCheckoutDiv' in deze parameter door het ID van het DIV-element dat je zelf hebt gedefinieerd.

De Trustcard is nu met succes gepositioneerd op de plek van je voorkeur. Test of alle instellingen juist zijn door een testbestelling te plaatsen in je webshop. Als de Trustcard op de gewenste plek verschijnt, is de integratie geslaagd.


Was dit artikel nuttig?

Aantal gebruikers dat dit nuttig vond: 4 van 12