Trustbadge integratie in enkele stapjes

Rechtsonder, of toch ergens anders op uw website?

De Trustbadge flexibel in de webwinkel plaatsen

Wilt u de Trustbadge niet rechtsonder, maar liever op een andere plek laten weergeven in uw webwinkel?
Geen probleem - pas met deze handleiding de Trustbadge aan uw voorkeur aan.

Stap 1: Voer hieronder uw webwinkel-URL in om uw persoonlijke Trustbadge®-code te genereren.


 

Stap 2:  Ga in de hierboven gegenereerde integratiecode op zoek naar de volgende regel

'variant': 'reviews', /* text, default, small, reviews, custom, custom_reviews */
en wijzig de waarde voor de parameter in 'custom_reviews' of 'custom', afhankelijk van de vraag of u ook uw actuele webwinkelbeoordeling in de Trustbadge wilt laten weergeven of alleen het keurmerk.

Tip:  In de ‘custom‘  variant wordt enkel het Trusted Shops keurmerk getoond. Deze is alleen zichtbaar als uw webshop is gecertificeerd en het keurmerk mag tonen. Voer het volgende commando uit in de ontwikkelaarsconsole van uw browser om een preview te zien:

trustbadge.showIntegrationPlaceholder();

Stap 3: voeg de volgende code daar in, waar de Trustbadge moet worden weergegeven – bijv. in de kop of in de voetregel van de pagina:

<div id="MyCustomTrustbadge" style="width:100px;height:50px"></div>

Door het aanpassen van de CSS-eigenschappen ‘width’ en ‘height’  in deze HTML code, kunt u bepalen hoe groot u de Trustbadge weer wilt geven. Beide waarden moeten worden ingevuld. Let er hierbij wel op dat de hoogte-breedteverhouding van de Trustbadge in de ‘custom_reviews’  variant 2:1 dient te zijn, en 1:1 voor de ‘custom’  variant.

Stap 4:  Ga in de hierboven gegenereerde integratiecode op zoek naar de volgende regel

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

en voeg ‚ MyCustomTrustbadge‘ als waarde voor de parameter 'customElementId' in:

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

Stap 5: Voor de locatie van de Trustcard gebruikt u de parameter in de regel trustcardDirection. U heeft de keuze uit ‘topLeft’, ‘topRight’, ‘bottomLeft’ of ‘bottomRight’.

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

Stap 6: Voor de automatische verzameling van klantbeoordelingen en om de garantie af te sluiten heeft de Trustbadge® een klein steuntje in de rug nodig. Die wordt geboden door het opnemen van een <div>-element ter herkenning van de bevestigingspagina voor bestellingen (bedankpagina). De Trustbadge® opent dan daar voor uw bezoeker automatisch de Trustcard die de registratie voor de geld-terug-garantie en/of de toestemming voor de beoordelingsherinnering inhoudt. 

Voor zover dit nog niet gebeurd is, voegt u nu nog deze <div>-container toe op de bevestigingspagina voor bestellingen:

<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">2017-012345</span>
<span id="tsCheckoutBuyerEmail">klant@provider.de</span>
<span id="tsCheckoutOrderAmount">1001.25</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">creditkaart</span>
<span id="tsCheckoutOrderEstDeliveryDate">2017-08-30</span></div> 

Vul de waarden van de parameters in met behulp van de programmeertaal die door uw shopsysteem wordt gebruikt. In PHP zou de overdracht van het e-mailadres er ongeveer zo uit kunnen zien, waarbij $customer_email  overeenkomt met het e-mailadres van de klant in uw shopsysteem (de exacte definitie en benaming van de parameter vindt u in de documentatie van uw shopsysteem - daarop hebben wij geen invloed):

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

Op de bevestigingspagina voor bestellingen verschijnt nu de Trustcard in een lightbox en biedt de afsluiting van de garantie aan.

Tip: Wordt de Trustbadge nog altijd in de rechter benedenhoek weergegeven, controleer dan of u al een ‘custom’ of ‘custom_reviews’  variant heeft aangegeven in de integratie code, of er in de parameter ‘customElementId’ wordt verwezen naar de ID van een bestaand element van de shop pagina , en of de ‘width’ en ‘height’ zijn ingesteld zoals hierboven beschreven in Stap 3.
Mocht dit het geval zijn, ontvangt u een bericht met meer informatie in de ontwikkelaarsconsole van uw browser.


Individualiseer de mobiele Trustbadge

Voor displays met een kleinere schermbreedte wordt de Trustbadge standaard weergegeven als een balk bovenaan het scherm.

De "responsive" parameter binnen de Trustbadge-configuratie kan worden gebruikt om de presentatie en positie van de Trustbadge aan te passen.

Zwevende versie

Voeg op eenvoudige wijze de volgende code toe aan de bestaande Trustbadge-configuratie als een extra parameter en u profiteert automatisch van onze nieuwe zwevende Trustbadge variant.

'responsive': {'variant': 'floating'}

Kies voor de parameter ‚variant‘ de waarde ‘floating_reviews’ of enkel ‘ floating’ , afhankelijk van de vraag of jullie in de Trustbadge zowel het keurmerk als de shopbeoordelingen wensen te tonen, of enkel het keurmerk.

Custom integratie anders gepositioneerd voor mobiele versie dan voor desktopversie 

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustomTrustbadge'}

De varianten "custom" en "custom_reviews" kunnen worden gebruikt voor de parameter "variant".

Voeg de volgende HTML-code in op de plek waar u de Trustbadge wilt weergeven, bijvoorbeeld in de koptekst of in de voettekst van de pagina:

<div id="myMobileCustomTrustbadge" style="width:100px;height:50px"></div>

Gebruik de CSS-eigenschappen 'width' en 'height' in deze HTML-code om de grootte van de Trustbadge in te stellen. Beide waarden moeten worden opgegeven.
Houd daarbij rekening met de oorspronkelijke beeldverhouding (breedte: hoogte) van de Trustbadge. Dit is 2: 1 in de variant 'custom_reviews' of 1: 1 bij de 'custom'-variant.
 
 
 

Trustcard op de bevestigingspagina op een willekeurige plek weergeven

De afsluiting van de Trusted Shops garantie of de registratie voor de afgifte van een beoordeling op de bedankpagina voor bestellingen kunnen eveneens vrij gepositioneerd worden.

Stap 1: Voeg op uw bedankpagina voor bestelling een lege <div>-container in op de plek waar uw Trustcard moet worden weergegeven. Geef deze <div>-container een eigen ID-aanduiding, bijv.

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

Stap 2: In de Trustbadge-code voegt u dan in het gedeelte _tsConfig als extra parameter 'customCheckoutElementId': 'customCheckoutDiv' in en u voegt de door u in de eerste stap geselecteerde ID-aanduiding als waarde voor de parameter toe 'customCheckoutElementId' (in het voorbeeld zou dat 'customCheckoutDiv' zijn).