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

Een aanwijzing vooraf: wij bieden plug-ins en specifieke integratiehandleidingen aan voor veel winkelsoftwaresystemen. Een overzicht van deze systemen vind je hier: Hoe begin ik met de Trustbadge®-integratie? Is er nog geen specifieke handleiding voor jouw winkelsoftware? Gebruik dan de volgende tutorial en informeer ons daarnaast via e-mail, zodat we in de toekomst ook voor jouw winkelsoftware een individuele handleiding kunnen opstellen.

Natuurlijk kun je de Trustbadge® al op de eerste dag van je lidmaatschap bij Trusted Shops integreren. Het enige wat je daarvoor nodig hebt, zijn de URL van je webshop of de Trusted Shops ID die je in je welkomstmail hebt ontvangen, wat ervaring met programmeren en de volgende algemene integratiehandleiding. 

Stap 1: je persoonlijke Trustbadge code genereren

Om met de integratie te starten, heb je allereerst je individuele Trustbadge code nodig. Zo weet je zeker dat de Trustbadge na het inbouwen de informatie weergeeft die daadwerkelijk bij jouw shop hoort, zoals het keurmerk en de beoordelingssterren. De code kan hier worden gegenereerd met behulp van je Trusted Shops ID of de URL van je webshop. Vervolgens wordt je persoonlijke Trustbadge code automatisch gegenereerd.

Je vindt je Trusted Shops ID (beginnend met X ...) in het dashboard van de My Trusted Shops-backend. Hiervoor log je eerst in op My Trusted Shops. Na het inloggen kom je direct op het dashboard. In de rechterkolom van het dashboard worden de webshops die je bij Trusted Shops geregistreerd hebt, weergegeven met de respectievelijke Trusted Shops ID (TS-ID).

Stap 2: de Trustbadge code configureren in overeenstemming met je individuele behoeften

Binnen de gegenereerde Trustbadge code kun je nu een aantal aanpassingen doen om de weergave van de Trustbadge aan te passen aan de individuele eigenschappen van jouw webshop. Dit wordt gedaan met de parameters in het _tsConfig script. Hieronder lichten we de afzonderlijke parameters en de mogelijke aanpassingen voor elke parameter toe.

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

Standaard wordt de Trustbadge van je webshop rechts onderin 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.

Standaard wordt de Trustbadge 54 px boven de onderste rand getoond. Als je de Trustbadge iets lager wilt zetten, kun je een overeenkomstige negatieve waarde invoeren. Deze dient echter niet lager dan -54 te zijn.
'variant': 'reviews', /* default, reviews, custom, custom_reviews */

Er zijn vier varianten van de Trustbadge beschikbaar. Met behulp van de parameter 'variant' bepaal je welke variant van de Trustbadge moet worden getoond in je 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'. De vier varianten zien er als volgt uit:

  • reviews: In deze uitvoering worden je beoordelingssterren en je keurmerk getoond.

trustbadge_trustmark_reviews_NL.png

  • default: In deze uitvoering wordt het keurmerk alleen weergegeven als je shop gecertificeerd is.

trustbadge_no_reviews_NL.png

  • custom_reviews: In deze variant laat de Trustbadge net als bij de variant 'reviews' je beoordelingssterren en je keurmerk zien. De uitvoering 'custom_reviews' kan echter flexibel in je webwinkel worden gepositioneerd.

TB5-custom-trustmark-only_NL.png

  • custom: In deze uitvoering toont de Trustbadge net als bij de default-variant uitsluitend je keurmerk. De custom-variant kan echt flexibel in je webshop worden gepositioneerd.

custom.png

Als je de varianten 'custom' of 'custom_reviews' gebruikt in je webshop, zijn er nog enkele aanvullende aanpassingen in de Trustbadge code en in de gebruikte template nodig. Hier lichten we de noodzakelijke stappen nader toe: Welke weergavevarianten van de Trustbadge® bestaan er en hoe integreer ik deze in mijn webshop? In deze tutorial gaan we echter dieper in op de varianten 'reviews' en 'default'.
Met de parameter 'variant' bepaal je welke elementen benadrukt worden in de Trustbadge. Om het keurmerk te tonen, moet je webshop de certificering uiteraard met succes hebben afgerond. Daarnaast kunnen de beoordelingssterren natuurlijk pas worden getoond, wanneer je shopbeoordelingen hebt verzameld via Trusted Shops. In dit artikel leggen we de verschillende weergavemogelijkheden nader uit: Wat is de Trustbadge®?
'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' naar 'true', wordt deze automatische aanpassing uitgeschakeld. In plaats daarvan wordt dan ook op mobiele apparaten 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.

Stap 3: de Trustbadge code kopiëren naar de footer van je shoptemplate

Open op je FTP-server het templatebestand van de footer die je gebruikt (footer.php of iets dergelijks). Kopieer vervolgens de hele code die je eerder in het veld erboven hebt gegenereerd en eventueel hebt geconfigureerd. Voeg deze code direct voor de afsluitende </body>-tag in in de footer-template.

Zo wordt de Trustbadge getoond op iedere pagina van je shop, ook op de bedankpagina. Ze zijn bijna klaar, maar er ontbreekt nog iets belangrijks.

Stap 4: de gegevensoverdracht voor de Trustcard definiëren

Om je klanten beoordelingsverzoeken te kunnen sturen en na de certificering de kopersbescherming aan te kunnen bieden, heeft de Trustbadge nog wat hulp nodig. Dit doe je door een DIV-element aan te brengen op de bedankpagina, op basis waarvan de nodige bestelgegevens worden overgedragen. De Trustbadge opent daar dan automatisch de Trustcard voor je bezoekers, die de verzekering van de bestelling en/of de toestemming voor de beoordelingsherinnering bevat.

website_integration_custom_nl-NL.png

Om het je klanten zo gemakkelijk mogelijk te maken en ervoor te zorgen dat hij/zij de bestelgegevens niet nog een keer in hoeft te voeren, worden de gegevens die nodig zijn voor de kopersbescherming en de beoordelingsuitnodiging, rechtstreeks aan de Trustbadge gecommuniceerd. Voeg daarvoor de onderstaande code in de template van de bedankpagina in (finish.tpl, thankyou.php, success.phtml of iets dergelijks) en vervang de vetgedrukte voorbeeldwaarden door de variabelen die je shopsysteem gebruikt. Zo wordt het DIV-element dynamisch met de juiste bestelgegevens gevuld.

<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">2020-05-21-001</span>
<span id="tsCheckoutBuyerEmail">mijn.klant@mail.nl</span>
<span id="tsCheckoutOrderAmount">4005.95</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">PAYPAL</span>
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>
</div> 

 

Hieronder leggen we kort de parameters in het codevoorbeeld uit, zodat ook jij ervoor kunt zorgen dat de vereiste gegevens worden overgedragen.

<span id="tsCheckoutOrderNr">2020-05-21-001</span>

Vereist. Met deze parameter wordt het bestelnummer doorgegeven. Dit is nodig om een afgegeven beoordeling te kunnen koppelen aan de betreffende bestelling. Als er geen bestelnummer beschikbaar is, kan ook een tijdstempel van de betreffende bestelling worden overgedragen, voor zover dit een unieke referentie is.

<span id="tsCheckoutBuyerEmail">klant@mail.nl</span>

Vereist. Met deze parameter wordt het e-mailadres van je klant doorgegeven. Dit is nodig om je klant enkele dagen na de bestelling een beoordelingsuitnodiging of een bevestigingsmail over de afgesloten kopersbescherming te kunnen sturen.

<span id="tsCheckoutOrderAmount">4005.95</span>

Optioneel, maar vereist als je het keurmerk hebt. Met deze parameter wordt het totaalbedrag van de bestelling overgedragen. Zoals je aan het voorbeeld 4005.95 ziet, is het decimaalteken een punt. Het bedrag wordt doorgegeven met twee decimalen.

<span id="tsCheckoutOrderCurrency">EUR</span>

Optioneel, maar vereist als je het keurmerk hebt. Deze parameter staat voor de valuta waarin de bestelling is geplaatst conform ISO-norm 4217. Als je maar één valuta gebruikt in je webshop, kun je deze waarde ook hardgecodeerd invoeren.

<span id="tsCheckoutOrderPaymentType">PAYPAL</span>

Optioneel, maar vereist als je het keurmerk hebt. Met deze parameter wordt de gebruikte betalingswijze doorgegeven. Hiervoor volstaat een eenvoudige tekststring. Als bij het afsluiten van de bestelling de betalingswijze niet (meer) beschikbaar is, kun je het woord OTHER invoeren als hardgecodeerde waarde voor deze parameter.

<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>

Optioneel, maar noodzakelijk als de beoordelingsverzoeken afhankelijk van de verwachte leveringsdatum moeten worden verstuurd. Hierbij gaat het om een parameter waarmee de verwachte leveringsdatum wordt overgedragen. Zoals je kunt zien aan het voorbeeld 2020-05-24, wordt de datumindeling YYYY-MM-DD ondersteund.

Omdat het DIV-element dynamische bestelgegevens moet bevatten, kun je het bovenstaande codevoorbeeld niet ongewijzigd in je bevestigingspagina plakken en kopiëren. Zoals hierboven al uitgelegd, dien je in plaats daarvan de vet gedrukte waarden van iedere parameter te vervangen door de overeenkomstige variabelen die in de programmeertaal van je shopsysteem worden gebruikt. In de programmeertaal PHP zou de overdracht van het e-mailadres er bijvoorbeeld zo uit kunnen zien:

<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>

$customer_email staat daarbij voor het e-mailadres van je klant in het shopsysteem. Raadpleeg voor een precieze definitie van de te gebruiken variabelen de documentatie van je shopsysteem, omdat deze van systeem tot systeem anders zijn. Daardoor kunnen wij hier helaas geen algemeen geldende aanwijzingen geven. Wanneer je het bovenstaande codevoorbeeld hebt aangepast, kun je het zoals hierboven beschreven kopiëren en invoegen in de template van je bedankpagina.

Stap 5: de Trustbadge testen in je webshop

Je kunt de werking van de Trustbadge nu testen door zelf een bestelling in je webwinkel te plaatsen. Controleer of helemaal aan het einde van het bestelproces de hierboven getoonde Trustcard verschijnt, waarmee je klanten zich met één druk op de knop kunnen aanmelden voor een beoordelingsuitnodiging. Als dit vlekkeloos verloopt, heb je de Trustbadge met succes in je shop geïntegreerd. Voortaan hebben je klanten direct na het afsluiten van de bestelling de mogelijkheid om aan te geven dat ze een beoordelingsuitnodiging wensen te ontvangen. Zodra je webwinkel gecertificeerd is, krijgt je klantenkring daarnaast de kopersbescherming aangeboden. Controleer daarnaast in de browserconsole of de DIV-container "trustedShopsCheckout" nu volledig en correct wordt gevuld.

Wil je naast deze handleiding meer ondersteuning bij de integratie van de Trustbadge? Neem dan contact met ons op via members@trustedshops.com of +31 20 709 1235.

Behalve de standaard integratie van de Trustbadge in de weergavevarianten 'reviews' en 'default' die in deze tutorial wordt beschreven, zijn er nog meer varianten. Hier gaan we dieper op in in dit artikel: Welke weergavevarianten van de Trustbadge® bestaan er en hoe integreer ik deze in mijn webshop?

Was dit artikel nuttig?

Aantal gebruikers dat dit nuttig vond: 6 van 6