Hoe kan ik de Trustbadge® zonder plug-in in mijn website integreren?

Er bestaan plug-ins voor veel e-commerceplatforms. Deze plug-ins helpen je om de producten die je hebt geboekt te integreren in jouw website. Dit maakt de integratie heel eenvoudig en handig.
Controleer in dit overzicht of er een plug-in beschikbaar is voor jouw e-commerceplatform: Integreer Trusted Shops in je shop
 
  • Is er een plug-in beschikbaar? Zo ja, volg dan de integratie-instructies die je aan de hand van het overzicht hierboven hebt gevonden.
  • Is er geen plug-in beschikbaar? Ga dan terug naar deze handleiding en volg de stappen hieronder.

Je kunt de Trustbadge® op de eerste dag van je Trusted Shops lidmaatschap integreren. Er zijn slechts vijf stappen nodig:

  1. Zoek jouw Trusted Shops ID
  2. Configureer de Trustbadge-code
  3. Integreer de Trustbadge-code in jouw website
  4. Definieer de dataoverdracht voor de Trustcard
  5. Controleer de integratie van Trustbadge

Stap 1: zoek jouw Trusted Shops ID

Je hebt je individuele Trusted Shops ID nodig voor de integratie van Trustbadge. Je vindt jouw Trusted Shops ID in My Trusted Shops.

  1. Log in op My Trusted Shops. Het dashboard wordt geopend.
  2. Zoek jouw Trusted Shops ID ('TS-ID') in de rechterkolom van het dashboard.

01_NL.png

Stap 2: configureer de Trustbadge-code

De basis voor je Trustbadge-integratie is de volgende integratiecode:

<script async 
data-desktop-y-offset="0"
data-mobile-y-offset="0"
data-desktop-disable-reviews="false"
data-desktop-enable-custom="false"
data-desktop-position="right"
data-desktop-custom-width="156"
data-desktop-enable-fadeout="false"
data-disable-mobile="false"
data-disable-trustbadge="false"
data-mobile-custom-width="156"
data-mobile-disable-reviews="false"
data-mobile-enable-custom="false"
data-mobile-position="left"
data-mobile-enable-topbar="false"
data-mobile-enable-fadeout="true"
data-color-scheme="light"
charset="UTF-8"
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
</script>
  1. Zoek de volgende codestring binnen de integratiecode:
    src="//widgets.trustedshops.com/js/YOUR_TSID.js">
  2. Vervang het vetgedrukte gedeelte YOUR_TSID door je Trusted Shops ID.

02_NL.pngJe hebt nu je Trustbadge-code aangemaakt. Als je geen verdere aanpassingen doet, zal de Trustbadge...

...jouw verzamelde beoordelingen laten zien en – na succesvolle certificering – het keurmerk.

...rechts in de desktopweergave staan en links in de mobiele weergave.

...54 pixels boven de onderkant van het scherm worden weergegeven in de desktopweergave en 10 pixels boven de onderkant van het scherm in de mobiele weergave.

Op dit punt heb je twee mogelijkheden:

  • Zijn deze instellingen voor jou in orde? Ga dan meteen naar stap 3.
  • Wil je een andere weergave van je Trustbadge of deze ergens anders integreren in jouw website? Ga dan verder met het configureren van de Trustbadge-code met behulp van dit artikel: Hoe pas ik de Trustbadge® op mijn vereisten aan? Daarna ga je terug naar dit artikel om verder te gaan met stap 3.

Stap 3: integreer de Trustbadge-code in jouw website

Heb je de Trustbadge-code volgens je behoeften geconfigureerd? Integreer hem dan in jouw website.

  1. Open je footer bestand binnen je e-commerceplatform. 
Het footer bestand heet waarschijnlijk footer.php of iets dergelijks.
  1. Kopieer de volledige Trustbadge-code naar je klembord. 
  2. Voer de Trustbadge-code in het footer bestand in vlak voor de afsluitende </body> tag. 

De Trustbadge is dan beschikbaar op elke pagina van jouw website, waaronder de bedankpagina.

Stap 4: definieer de dataoverdracht voor de Trustcard

Een belangrijke functionaliteit van de Trustbadge is de Trustcard. Na het afrekenen gaat de Trustcard open op je website. Met behulp van de Trustcard kunnen je klanten toestemming geven voor het ontvangen van een beoordelingsverzoek en/of hun bestelling beschermen met de kopersbescherming.

03_NL.png

Om ervoor te zorgen dat de Trustcard op het juiste moment wordt geopend, moet de Trustbadge de bedankpagina herkennen. Hiervoor moet je een DIV-element integreren in het sjabloon van de bedankpagina.

Dit DIV-element wordt ook gebruikt om gegevens van jouw website over te dragen naar de Trustbadge, die nodig is voor de kopersbescherming en voor het verzenden van een beoordelingsverzoek.

De volgende stappen zijn afhankelijk van het feit of je alleen shopbeoordelingen of zowel shop- als productbeoordelingen bij Trusted Shops verzamelt. Klik nu op de link die overeenkomt met je website om verder te gaan:

De gegevensoverdracht voor servicebeoordelingen definiëren

De volgende stappen beschrijven hoe je de gegevensoverdracht alleen voor shopbeoordelingen definieert. Wil je naast shopbeoordelingen ook productbeoordelingen verzamelen? Volg de hieronder beschreven stappen: De dataoverdracht voor shop- en productbeoordelingen definiëren

De basis voor het DIV-element is de volgende code:

<div id="trustedShopsCheckout" style="display: none;"> 
<span id="tsCheckoutOrderNr">2020-05-21-001</span>
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span>
<span id="tsCheckoutOrderAmount">1.01</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">VORKASSE</span>
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>
</div>

De gegevens van de bestelling moeten dynamisch ingevuld worden en doorgegeven worden via het DIV-element. Kopieer de bovenstaande voorbeeldcode daarom niet ongewijzigd naar je bedankpagina.

  1. Vervang het voorbeeld en de vet gemarkeerde waarden van de parameters. Gebruik de overeenkomstige variabelen in de programmeertaal die jouw e-commerceplatform gebruikt. De volgende tabel geeft een verklaring van de afzonderlijke parameters: 
Parameter Functie Opmerkingen
<span id="tsCheckoutOrderNr">2020-05-21-001</span> Overdracht van het bestelnummer  
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> Overdracht van het e-mailadres van je klant  
<span id="tsCheckoutOrderAmount">1.01</span> Overdracht van de waarde van de bestelling Zoals te zien in het voorbeeld 1.01 is het decimale scheidingsteken een komma en wordt het bedrag met twee decimalen ingesteld.
<span id="tsCheckoutOrderCurrency">EUR</span> Overdracht van de valutacode van de bestelling De ISO 4217-norm wordt ondersteund voor valutacodes. Als je slechts één munteenheid aanbiedt, kan deze waarde hard-coded zijn.
<span id="tsCheckoutOrderPaymentType">VORKASSE</span> Overdracht van de gebruikte betaalmethode  
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> Overdracht van de verwachte leveringsdatum Vereist als je een beoordelingsverzoek wilt verzenden op basis van de verwachte leveringsdatum. De overgedragen datum mag niet later zijn dan een jaar. Het datumformaat JJJJ-MM-DD wordt ondersteund.
In de programmeertaal PHP kan bijvoorbeeld de overdracht van het e-mailadres er als volgt uitzien:
<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>

$customer_email komt overeen met het e-mailadres van de klant in het systeem van jouw shop. De exacte definitie van de te gebruiken variabele moet uit de documentatie van jouw e-commerceplatform worden overgenomen, aangezien deze van systeem tot systeem verschilt. Daarom kunnen wij helaas geen algemeen geldige verklaringen afgeven.
  1. Open het voorbeeldbestand van je bedankpagina. 
Het voorbeeldbestand heet waarschijnlijk Finish.tpl, Thankyou.php, Success.phtml of iets dergelijks.
  1. Kopieer de volledige voorbereide DIV-elementcode naar je klembord.
  2. Voeg de code toe aan het voorbeeldbestand van je bedankpagina. 

Hiermee wordt de Trustcard geopend op de bedankpagina na het afrekenen. Op die manier is de Trustbadge met al z'n functies in jouw website geïntegreerd.

Wil je niet dat de Trustcard als pop-up wordt geopend? Vervolgens kun je deze op je bestelbevestigingspagina een vaste positie geven. Je leest er hier meer over: Hoe plaats ik de Trustcard ergens anders?

De dataoverdracht voor shop- en productbeoordelingen definiëren

De volgende stappen beschrijven hoe je de gegevensoverdracht alleen voor shop- en productbeoordelingen definieert. Wil je alleen shopbeoordelingen verzamelen? Volg de hieronder beschreven stappen: De gegevensoverdracht voor servicebeoordelingen definiëren

De basis voor het DIV-element is de volgende code:

<div id="trustedShopsCheckout" style="display: none;"> 
<span id="tsCheckoutOrderNr">2020-05-21-001</span>
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span>
<span id="tsCheckoutOrderAmount">1.01</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">VORKASSE</span>
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>

<!-- product reviews start -->
 <!-- for each product in the basket full set of data is required -->
 <span class="tsCheckoutProductItem">
 <span class="tsCheckoutProductUrl">http://www.shop.url/product_page.html</span>
 <span class="tsCheckoutProductImageUrl">http://www.shop.url/image.png</span>
 <span class="tsCheckoutProductName">Product Name</span>
 <span class="tsCheckoutProductSKU">0123456789</span>
 <span class="tsCheckoutProductGTIN">0123456789</span>
 <span class="tsCheckoutProductMPN">0123456789</span>
<span class="tsCheckoutProductBrand">My Great Brand</span>
 </span>
 <!-- product reviews end -->
</div>

De gegevens van de bestelling moeten dynamisch ingevuld worden en doorgegeven worden via het DIV-element. Kopieer de bovenstaande voorbeeldcode daarom niet ongewijzigd naar je bedankpagina.

  1. Vervang het voorbeeld en de vet gemarkeerde waarden van de parameters. Gebruik de overeenkomstige variabelen in de programmeertaal die jouw e-commerceplatform gebruikt. De volgende tabel geeft een verklaring van de afzonderlijke parameters: 
Parameter Functie Opmerkingen
<span id="tsCheckoutOrderNr">2020-05-21-001</span> Overdracht van het bestelnummer  
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> Overdracht van het e-mailadres van je klant  
<span id="tsCheckoutOrderAmount">1.01</span> Overdracht van de waarde van de bestelling Zoals te zien in het voorbeeld 1.01 is het decimale scheidingsteken een komma en wordt het bedrag met twee decimalen ingesteld.
<span id="tsCheckoutOrderCurrency">EUR</span> Overdracht van de valutacode van de bestelling De ISO 4217-norm wordt ondersteund voor valutacodes. Als je slechts één munteenheid aanbiedt, kan deze waarde hard-coded zijn.
<span id="tsCheckoutOrderPaymentType">VORKASSE</span> Overdracht van de gebruikte betaalmethode  
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> Overdracht van de verwachte leveringsdatum Vereist als je een beoordelingsverzoek wilt verzenden op basis van de verwachte leveringsdatum. De overgedragen datum mag niet later zijn dan een jaar. Het datumformaat JJJJ-MM-DD wordt ondersteund.
<span class="tsCheckoutProductUrl">http://www.shop.url/product_page.html</span> Overdracht van de volledige URL van de productdetailpagina  
<span class="tsCheckoutProductName">Product Name</span> Overdracht van de productnaam  
<span class="tsCheckoutProductSKU">0123456789</span> Overdracht van de Stock Keeping Unit (SKU), d.w.z. het artikelnummer dat je hebt toegewezen  
<span class="tsCheckoutProductImageUrl">http://www.shop.url/image.png</span> Overdracht van de URL van een productafbeelding Optioneel, maar zeker aan te raden. Het productafbeelding wordt getoond in de beoordelingsvragenlijst en maakt het voor je klanten gemakkelijker om het product te herinneren. Dit verhoogt de conversieratio van je beoordelingsverzoeken.
<span class="tsCheckoutProductGTIN">0123456789</span> Overdracht van het Global Trade Item Number (GTIN) Optioneel, maar vereist bij het gebruik met Google-integratie. Omdat de GTIN wereldwijd wordt gebruikt om producten te identificeren, maakt de overdracht van de GTIN het voor Google veel gemakkelijker om je verzamelde productbeoordelingen aan het juiste product toe te wijzen.
<span class="tsCheckoutProductMPN">0123456789</span> Overdracht van het onderdeelnummer van de fabrikant (Manufacturer Part Number, MPN) Optioneel. De parameter wordt ook gebruikt om het product eenduidig te identificeren.
<span class="tsCheckoutProductBrand">My Great Brand</span> Overdracht van het productmerk Optioneel. Net als de GTIN en de MPN, draagt het productmerk ertoe bij dat producten worden geïdentificeerd en dat de verzamelde beoordelingen correct aan Google worden verzonden.
In de programmeertaal PHP kan bijvoorbeeld de overdracht van het e-mailadres er als volgt uitzien:
<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>

$customer_email komt overeen met het e-mailadres van de klant in het systeem van jouw shop. De exacte definitie van de te gebruiken variabele moet uit de documentatie van jouw e-commerceplatform worden overgenomen, aangezien deze van systeem tot systeem verschilt. Daarom kunnen wij helaas geen algemeen geldige verklaringen afgeven.
  1. Open het voorbeeldbestand van je bedankpagina. 
Het voorbeeldbestand heet waarschijnlijk Finish.tpl, Thankyou.php, Success.phtml of iets dergelijks.
  1. Kopieer de volledige voorbereide DIV-elementcode naar je klembord.
  2. Voeg de code toe aan het voorbeeldbestand van je bedankpagina. 

Hiermee wordt de Trustcard geopend op de bedankpagina na het afrekenen. Op die manier is de Trustbadge met al z'n functies in jouw website geïntegreerd.

Wil je niet dat de Trustcard als pop-up wordt geopend? Vervolgens kun je deze op je bestelbevestigingspagina een vaste positie geven. Je leest er hier meer over: Hoe plaats ik de Trustcard ergens anders?

Stap 5: controleer de integratie van Trustbadge

Test nu de werking van je Trustbadge door een testbestelling op je website te doen. Als de Trustbadge correct is geïntegreerd, verschijnt aan het einde van het betaalproces de Trustcard.

03_NL.png

Dit artikel helpt je om de integratie van Trustbadge te testen: Hoe controleer ik mijn Trustbadge®-integratie?

Bij vragen of problemen met je integratie, kun je contact opnemen met ons Customer Success team via members@trustedshops.com
Heb je een Beveiligingsbeleid voor content op jouw website geformuleerd? Controleer dan of je je beleid na de integratie van Trustbadge moet aanpassen. Dit artikel kan daarbij handig zijn: Hoe pas ik mijn contentbeveiligingsbeleid aan na integratie van de Trustbadge®?

Was dit artikel nuttig?

Aantal gebruikers dat dit nuttig vond: 20 van 34