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:
- Zoek jouw Trusted Shops ID
- Configureer de Trustbadge-code
- Integreer de Trustbadge-code in jouw website
- Definieer de dataoverdracht voor de Trustcard
- 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.
- Log in op My Trusted Shops. Het dashboard wordt geopend.
- Zoek jouw Trusted Shops ID ('TS-ID') in de rechterkolom van het dashboard.
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>
- Zoek de volgende codestring binnen de integratiecode:
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
- Vervang het vetgedrukte gedeelte YOUR_TSID door je Trusted Shops ID.
Je 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.
- Open je footer bestand binnen je e-commerceplatform.
- Kopieer de volledige Trustbadge-code naar je klembord.
- 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.
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 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.
- 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 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.
- Open het voorbeeldbestand van je bedankpagina.
- Kopieer de volledige voorbereide DIV-elementcode naar je klembord.
- 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.
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>
<!-- 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.
- 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. |
<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.
- Open het voorbeeldbestand van je bedankpagina.
- Kopieer de volledige voorbereide DIV-elementcode naar je klembord.
- 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.
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.
Dit artikel helpt je om de integratie van Trustbadge te testen: Hoe controleer ik mijn Trustbadge®-integratie?