Hoe pas ik de Trustbadge® op mijn vereisten aan?

Heb je de Trustbadge® nog niet geïntegreerd? Voer dan eerst de standaardintegratie uit voordat je verdergaat. Dit artikel kan daarbij handig zijn: Hoe kan ik de Trustbadge® zonder plug-in in mijn shop integreren?
Via de link naar het artikel hierboven vind je ook de Trustbadge-code, die de basis vormt voor alle aanpassingen in de volgende tekst.

Binnen de standaardintegratie zijn voor de Trustbadge® de volgende regels vastgelegd:

• De Trustbadge presenteert jouw verzamelde beoordelingssterren en – na succesvolle certificering – het keurmerk.
• Voor desktops wordt de Trustbadge rechts op het scherm weergegeven en in de mobiele versie aan de linkerkant van het scherm.
• Op desktops wordt de Trustbadge 54 pixels boven de onderste rand van het scherm weergegeven en op mobiele apparaten 10 pixels erboven.

Je kunt deze regels natuurlijk aanpassen aan jouw individuele behoeften.

De Trustbadge voor nieuwe leden wordt op je website weergegeven tot je jouw eerste beoordeling of het keurmerk hebt ontvangen:

Nieuwe leden kunnen de plaatsing van de Trustbadge slechts beperkt aanpassen:
 

• Je kunt hem aan de rechter- of linkerkant van het scherm plaatsen.
• Je kunt hem hoger of lager plaatsen.

De integratie van de aangepaste variant is momenteel nog niet mogelijk.
Wil je verdere aanpassingen uitvoeren? Wacht dan tot je je eerste beoordeling hebt verzameld of het keurmerk hebt ontvangen. Alle mogelijke aanpassingen die dit artikel beschrijft, staan dan ter beschikking.

In dit artikel leggen we uit hoe je de Trustbadge®-code kunt gebruiken om...

• ...de weergave van de Trustbadge aan te passen.
• ...de Trustbadge ergens anders op je website te plaatsen.
• ...de Trustbadge tijdelijk te verbergen op je website.

Hoe kan ik de Trustbadge anders weergeven?

Binnen de standaardintegratie presenteert de Trustbadge jouw verzamelde beoordelingssterren en – na succesvolle certificering – het keurmerk.

(desktopvariant)                                   (mobiele variant)

Met behulp van de Trustbadge-code kun je de weergave van de Trustbadge op vier manieren veranderen:

• Je kunt de verzamelde beoordelingssterren verbergen en alleen het keurmerk weergeven.
  
  (desktopvariant)               (mobiele variant)
• Je kunt de donkere modus van de Trustbadge gebruiken.
  
  (desktopvariant)                                     (mobiele variant)
• Je kunt de desktopvariant van de Trustbadge ook gebruiken in de mobiele versie van jouw website.
• Je kunt de top bar variant van de Trustbadge gebruiken in de mobiele versie van jouw website.
  

Beoordelingssterren verbergen in de desktopversie

1. In de Trustbadge-code vind je de volgende codestring:

   data-desktop-disable-reviews="false"

2. Vervang de code string door de volgende codestring:

   data-desktop-disable-reviews="true"

Nu heb je de beoordelingssterren verborgen in de desktopweergave.

Beoordelingssterren verbergen in de mobile versie

1. In de Trustbadge-code vind je de volgende codestring:

   data-mobile-disable-reviews="false"

2. Vervang de code string door de volgende codestring:

   data-mobile-disable-reviews="true"

Nu heb je de beoordelingssterren verborgen in de mobiele versie van jouw website.

De donkere modus van de Trustbadge gebruiken

1. In de Trustbadge-code vind je de volgende codestring:

   data-color-scheme="light"

De kleurschema-instelling is een optionele parameter. Als je de bovenstaande coderegel niet in je Trustbadge-code vindt, kun je deze zelf toevoegen.

2. Vervang de code string door de volgende codestrings:
   - Als je wilt dat de Trustbadge continu in donkere modus wordt weergegeven:

   data-color-scheme="dark"

   - Als de instellingen voor de donkere modus van je klant aangeven of de Trustbadge in donkere modus wordt weergegeven:

   data-color-scheme="os-default"

De desktopvariant van de Trustbadge gebruiken in de mobiele versie van jouw website

1. In de Trustbadge-code vind je de volgende codestring:

   data-disable-mobile="false"

2. Vervang de code string door de volgende codestring:

   data-disable-mobile="true"

Dit betekent dat je de desktopvariant van de Trustbadge ook kunt gebruiken in de mobiele versie van jouw website.

De top bar variant van de Trustbadge gebruiken in de mobiele versie van je website

1. In de Trustbadge-code vind je de volgende codestring:

   data-mobile-enable-topbar="false"

2. Vervang de code string door de volgende codestring:

   data-mobile-enable-topbar="true"

Hiermee kun je de top bar variant van de Trustbadge gebruiken in de mobiele versie van jouw site.

Bij de top bar variant van de Trustbadge is deze vast geplaatst aan de bovenkant van het scherm. Je kunt deze positie niet wijzigen.

Hoe kan ik de Trustbadge naar een andere positie verplaatsen?

Met de Trustbadge-code kun je de Trustbadge op verschillende plekken in de desktop- en mobiele weergave bekijken, onafhankelijk van elkaar. Je kunt de Trustbadge verplaatsen...

...horizontaal naar links of rechts.

...verticaal omhoog of omlaag.

Zijn dit nog niet genoeg keuzemogelijkheden voor jou? Met de aangepaste variant van de Trustbadge kun je de Trustbadge op elke gewenste plek op jouw website plaatsen.

Aanpassen van de plaatsing van de Trustbadge in de desktopversies van jouw website

In de desktopweergave kun je de Trustbadge horizontaal verplaatsen van rechts naar links op het scherm of verticaal omhoog en omlaag.

De Trustbadge aan de linkerkant van het scherm plaatsen in de desktopversie van jouw website

In de standaardinstellingen van de desktopweergave bevindt de Trustbadge zich aan de rechterkant van het scherm. Met de volgende aanpassing van de code kun je de Trustbadge naar de linkerkant van het scherm verplaatsen.

1. In de Trustbadge-code vind je de volgende codestring:

   data-desktop-position="right"

2. Vervang de code string door de volgende codestring:

   data-desktop-position="left"

Je hebt de Trustbadge nu aan de linkerkant van het scherm geplaatst.

De Trustbadge naar boven of beneden verplaatsen in de desktopversie van jouw website

In de standaardinstellingen van de desktopweergave is de Trustbadge 54 pixels boven de onderkant van het scherm geplaatst. Met de volgende aanpassing van de code kun je de Trustbadge naar boven of beneden verplaatsen.

1. In de Trustbadge-code vind je de volgende codestring:

   data-desktop-y-offset="0"

2. Vervang de 0 door het aantal pixels waarmee de Trustbadge omhoog of omlaag moet worden gebracht.

Twee voorbeelden:

• Wil je de Trustbadge 20 pixels hoger plaatsen? Gebruik dan de volgende codestring:

  data-desktop-y-offset="20"

• Wil je de Trustbadge naar beneden verplaatsen? Gebruik dan de minwaarden. Gebruik de volgende codestring om de Trustbadge 20 pixels lager te plaatsen:

  data-desktop-y-offset="-20"

Met een waarde van -54 wordt de Trustbadge zonder tussenruimte op de onderrand van het scherm geplaatst. We raden daarom aan geen waarden van meer dan -44 te gebruiken.

Je hebt de Trustbadge nu naar boven of beneden verplaatst.

Aanpassen van de plaatsing van de Trustbadge in de mobiele versie van jouw website

In de mobiele weergave kun je de Trustbadge horizontaal van de linkerrand naar de rechterrand van het scherm verplaatsen. Ook naar het midden van het scherm of verticaal omhoog en omlaag zijn mogelijke opties.

In de mobiele weergave plaats je de Trustbadge aan de rechterkant van het scherm of in het midden

In de standaardinstellingen staat de Trustbadge aan de linkerkant van het scherm. Met de volgende aanpassing van de code kun je de Trustbadge naar de rechterkant of het midden van het scherm verplaatsen.

1. In de Trustbadge-code vind je de volgende codestring:

   data-mobile-position="left"

2. Vervang de code string door de volgende codestrings:
   - Als je de Trustbadge aan de rechterkant wilt plaatsen:

   data-mobile-position="right"

   - Als je de Trustbadge in het midden wilt plaatsen:

   data-mobile-position="center"

Je hebt de Trustbadge nu aan de rechterkant van het scherm of in het midden geplaatst.

De Trustbadge naar boven of beneden verplaatsen in de mobiele versie van jouw website

In de standaardinstellingen van de mobiele weergave is de Trustbadge 10 pixels boven de onderkant van het scherm geplaatst. Met de volgende aanpassing van de code kun je de Trustbadge naar boven of beneden verplaatsen.

1. In de Trustbadge-code vind je de volgende codestring:

   data-mobile-y-offset="0"

2. Vervang de 0 door het aantal pixels waarmee de Trustbadge omhoog of omlaag moet worden gebracht.

Twee voorbeelden:

• Wil je de Trustbadge 5 pixels hoger plaatsen? Gebruik dan de volgende codestring:

  data-mobile-y-offset="5"

• Wil je de Trustbadge naar beneden verplaatsen? Gebruik dan de minwaarden. Gebruik de volgende codestring om de Trustbadge 5 pixels lager te plaatsen:

  data-mobile-y-offset="-5"

  Gebruik alleen waarden tot -10.

Je hebt de Trustbadge nu naar boven of beneden verplaatst.

De Trustbadge flexibel op jouw website plaatsen

Naast de eerder beschreven standaardvariant van de Trustbadge kun je ook de aangepaste versie in jouw website integreren.

De aangepaste variant verschilt op drie manieren van de standaardvariant:

1. Hij ziet er anders uit dan de standaardvariant. Hier kun je de aangepaste variant bekijken:
   
         (met beoordelingssterren)                                            (zonder beoordelingssterren)
2. Je kunt de aangepaste variant volledig flexibel op jouw website plaatsen.
3. Je kunt de grootte van de aangepaste variant wijzigen.

Je kunt de aangepaste variant van de Trustbadge op verschillende plekken in de desktop- en mobiele weergave plaatsen, onafhankelijk van elkaar.

Flexibele plaatsing van de Trustbadge in de desktopversie van jouw website

De aangepaste variant heeft standaard een breedte van 156 pixels en een hoogte van 78 pixels. Hieronder leggen we uit hoe je de grootte van de Trustbadge in de desktopweergave kunt wijzigen. Vind je de bovenvermelde standaardwaarden in orde? Sla dan de volgende twee stappen over en ga verder met stap 3.

1. In de Trustbadge-code vind je de volgende codestring:

   data-desktop-custom-width="156"

2. Vervang de 156 door het aantal pixels dat je als breedte van de Trustbadge wilt instellen.

Het aantal pixels dat je hier kunt instellen, hangt af van de vraag of je de beoordelingssterren in de desktopweergave hebt verborgen.

• Heb je de beoordelingssterren verborgen? Als dat het geval is, selecteer je tussen 32 en 58 pixels.
• Heb je de beoordelingssterren niet verborgen? Dan selecteer je tussen 100 en 500 pixels.

Het aantal pixels voor de hoogte van de Trustbadge wordt automatisch bepaald door de breedte die je hebt geselecteerd. Je kunt dit niet zelf specificeren.

3. In de Trustbadge-code vind je de volgende codestring:

   data-desktop-enable-custom="false"

4. Vervang de code string door de volgende codestring:

   data-desktop-enable-custom="true"

5. Open de broncode van jouw website.
6. Plaats de volgende codestring op jouw website op de plek waar de Trustbadge moet worden weergegeven:

   <div id="trustbadgeCustomContainer"></div>

Mogelijke opties zijn bijvoorbeeld de header of de footer.

Je hebt de Trustbadge nu geïntegreerd op de positie die je op jouw website hebt geselecteerd.

Flexibele plaatsing van de Trustbadge in de mobiele versie van jouw website

De aangepaste variant heeft standaard een breedte van 156 pixels en een hoogte van 78 pixels in de mobiele weergave. Hieronder leggen we uit hoe je de grootte van de Trustbadge in de mobiele weergave kunt wijzigen. Vind je de bovenvermelde standaardwaarden in orde? Sla dan de volgende twee stappen over en ga verder met stap 3.

1. In de Trustbadge-code vind je de volgende codestring:

   data-mobile-custom-width="156"

2. Vervang de 156 door het aantal pixels dat je als breedte van de Trustbadge wilt instellen.

Het aantal pixels dat je hier kunt instellen, hangt af van de vraag of je de beoordelingssterren in de mobiele weergave hebt verborgen.

• Heb je de beoordelingssterren verborgen? Als dat het geval is, selecteer je tussen 32 en 58 pixels.
• Heb je de beoordelingssterren niet verborgen? Dan selecteer je tussen 100 en 500 pixels.

Het aantal pixels voor de hoogte van de Trustbadge wordt automatisch bepaald door de breedte die je hebt geselecteerd. Je hoeft dit niet zelf te specificeren.

3. In de Trustbadge-code vind je de volgende codestring:

   data-mobile-enable-custom="false"

4. Vervang de code string door de volgende codestring:

   data-mobile-enable-custom="true"

5. Open de broncode van jouw website.
6. Plaats de volgende codestring op jouw website op de plek waar de Trustbadge moet worden weergegeven:

   <div id="trustbadgeCustomMobileContainer"></div>

Mogelijke opties zijn bijvoorbeeld de header of de footer.

Je hebt de Trustbadge nu geïntegreerd op de positie die je op jouw website hebt geselecteerd.

Hoe kan ik de Trustbadge verbergen?

Als je de Trustbadge wilt verbergen, heb je twee opties:

• Je kunt de fade-outmodus in de desktopweergave activeren. In deze modus wordt de Trustbadge nog steeds bovenaan elke pagina weergegeven. Hij vervaagt echter naarmate je klanten verder naar beneden scrollen. Hij verschijnt weer zodra je klant terugkomt bovenaan de pagina.

In de mobiele weergave wordt de fade-outmodus automatisch geactiveerd. In deze weergave is het echter mogelijk deze te deactiveren.

• Je kunt de Trustbadge volledig verbergen. In dat geval is de Trustbadge niet meer te zien op jouw website. De Trustcard wordt pas geopend na ontvangst van een bestelling, zodat je klanten een aanvraag voor de Kopersbescherming kunnen indienen.

Als je de Trustbadge volledig verbergt, is hij niet zichtbaar in de desktop- of mobiele weergave.

Activeer de fade-outmodus in de desktopversie van je site

1. In de Trustbadge-code vind je de volgende codestring:

   data-desktop-enable-fadeout="false"

2. Vervang de code string door de volgende codestring:

   data-desktop-enable-fadeout="true"

Je hebt de fade-outmodus nu geactiveerd in de desktopweergave. De Trustbadge verdwijnt nu langzaam als je klanten naar beneden scrollen.

Deactiveer de fade-outmodus in de mobiele versie van je site

1. In de Trustbadge-code vind je de volgende codestring:

   data-mobile-enable-fadeout="true"

2. Vervang de code string door de volgende codestring:

   data-mobile-enable-fadeout="false"

Je hebt de fade-outmodus nu gedeactiveerd in de mobiele weergave. De Trustbadge wordt niet meer verborgen als je klanten naar beneden scrollen.

De Trustbadge verbergen

Een zichtbare Trustbadge geeft je klanten een veilig gevoel op jouw website. Het verbergen van de Trustbadge brengt je conversies en sales in gevaar. Daarom raden we je aan om de Trustbadge slechts tijdelijk te verbergen.

1. In de Trustbadge-code vind je de volgende codestring:

   data-disable-trustbadge="false"

2. Vervang de code string door de volgende codestring:

   data-disable-trustbadge="true"

Je hebt de Trustbadge nu zowel in de desktop- als de mobiele weergave verborgen.

Hoe plaats ik de Trustcard ergens anders?

Na het afrekenen verschijnt de Trustcard als pop-up op de bestelbevestigingspagina van je webshop. Met behulp van de Trustcard kunnen je klanten toestemming geven voor het ontvangen van een beoordelingsverzoek en/of hun bestelling beschermen met de kopersbescherming.

Wil je niet dat de Trustcard als pop-up wordt geopend? Vervolgens kun je deze op je bestelbevestigingspagina een vaste positie geven.

1. Open het voorbeeldbestand van je bestelbevestigingspagina.

2. Kopieer de volgende coderegel:

   <div id="trustbadgeCustomCheckoutContainer"></div>

3. Plak de codelijn op de positie van het voorbeeldbestand waar de Trustcard moet komen.

Je hebt de Trustcard nu met succes op een vaste plaats op je bestelbevestingspagina geplaatst.