Hoe kan ik de mobiele weergave van de Trustbadge® aanpassen?

Volgens een consumentenonderzoek van ShoppingTomorrow gebruikt bijna twee derde van de Nederlanders hun smartphone om online aankopen te doen – een stijgende tendens.  Om optimaal voorbereid te zijn op deze trend, biedt Trusted Shops je meerdere mogelijkheden aan voor de mobiele weergave van de Trustbadge®, zodat deze goed aansluit bij het design van je mobile shop.

In het volgende artikel stellen wij de verschillende varianten aan je voor. Bovendien lichten we toe hoe je deze in je webshop kunt integreren.

De Floating-variant

custom-tb.pngMobile_custom_device_TB.png

Voor kleinere beeldschermbreedtes zoals die van smartphones en tablets, wordt de Trustbadge standaard als Floating-variant weergegeven. De Floating-variant zorgt ervoor dat het keurmerk steeds in het blikveld van je klanten aanwezig is. Daarbij bedekt deze de webshop nauwelijks en wordt er niet te veel van de waardevolle plek in de header ingenomen. Bij het scrollen verdwijnt de Trustbadge automatisch en deze verschijnt pas opnieuw als de user naar boven scrolt. Via je smartphone kun je deze mobiele varianten in onze Demoshop bekijken.

Je kunt de positionering en weergave van de Trustbadge aanpassen door middel van de parameter 'responsive' in de Trustbadge-configuratie. Wat je precies moet doen, lichten we toe in de volgende paragrafen.

Zo kun je de Floating-variant horizontaal verschuiven

De Floating-variant van de Trustbadge wordt bij de mobiele weergave standaard linksonder getoond. Daarnaast heb je de mogelijkheid om de Trustbadge in het midden of rechtsonder te positioneren.

Open hiervoor je bestaande Trustbadge-configuratie en controleer of de parameter 'responsive' reeds deel uitmaakt van de code. Zo ja, tref je de volgende coderegel in de Trustbadge-configuratie aan:

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

Als je de bovengenoemde coderegel in je Trustbadge-configuratie hebt gevonden, dient deze vervangen te worden door de onderstaande coderegel:

'responsive': {'variant':'floating', 'position':'right'},

Let goed op dat je ook de komma aan het einde van de coderegel meeneemt als je de code kopieert. Anders kan de Trustbadge niet goed worden weergegeven.

Als de parameter 'responsive' nog geen deel uitmaakt van je Trustbadge-configuratie, moet je deze alsnog in de code invoegen. Hiervoor kun je onder de regel

_tsConfig = {

een nieuwe coderegel aanmaken en op deze plaats de onderstaande codering invoeren:

'responsive': {'variant':'floating', 'position':'right'},

Binnen deze coderegel wordt de positionering van de Trustbadge bepaald door de waarde 'right', wat betekent dat de Trustbadge in de mobiele weergave nu rechtsonder wordt getoond. Als je de Trustbadge in het midden wilt positioneren, verander je de waarde 'right' in 'center'. Als je de waarde 'left' invult, dan zal de Trustbadge weer linksonder worden weergegeven.

Zo kun je de Floating-variant verticaal verschuiven

Bovendien heb je de mogelijkheid de verticale positionering van de Trustbadge afzonderlijk aan te passen. Ga hiervoor te werk zoals bij de aanpassing van de horizontale positionering en controleer als eerste of de parameter 'responsive' al deel uitmaakt van je Trustbadge-configuratie.

Vervolgens kun je de parameter uitbreiden of vervangen door de volgende coderegel:

'responsive': {'variant':'floating', 'position':'right', 'yOffset':'150'},

Let goed op dat je ook de komma aan het einde van de coderegel meeneemt als je de code kopieert. Anders kan de Trustbadge niet goed worden weergegeven.

Via de waarde 'yOffset' kun je nu bepalen hoeveel pixels de Trustbadge omhoog moet worden geschoven. In de bovengenoemde coderegel is 150 het aantal voorstelde pixels. Deze waarde kun je nu aan de afzonderlijke vereisten van je shop aanpassen.

In de bovengenoemde coderegel is de horizontale positionering via de waarde 'right' gedefinieerd. Als gevolg daarvan zal de Trustbadge bij gebruik van deze coderegel rechtsonder worden weergegeven. Als je de Trustbadge liever linksonder of in het midden wilt hebben, wijzig dan de waarde 'right' in 'left' voor links, of 'center' voor een weergave in het midden.

Beoordelingssterren binnen de Floating-variant weergeven

Standaard wordt in de Floating-variant alleen het keurmerk weergegeven. Maar daarnaast heb je de mogelijkheid om ook een Trustbadge met beoordelingssterren te tonen in de mobiele weergave. Als de voorkeur hiernaar uitgaat, dan dient voor de parameter 'responsive', de waarde 'floating' vervangen te worden door 'floating_reviews'.

Als de parameter 'responsive' nog geen deel uitmaakt van je Trustbadge-configuratie, moet je onder de regel

_tsConfig = {

een nieuwe coderegel aanmaken en op deze plaats de onderstaande codering invoeren:

'responsive': {'variant': 'floating_reviews'},

Let goed op dat je ook de komma aan het einde van de coderegel meeneemt als je de code kopieert. Anders kan de Trustbadge niet goed worden weergegeven.

Als je bovendien de positionering van de Trustbadge wilt veranderen, vragen wij je de bovenstaande paragrafen over de horizontale en verticale positionering van de Floating-variant door te nemen.

De Topbar-variant

trustbadge-mobile-topbar_NL.jpg

Naast de Floating-variant kun je de Trustbadge ook als Topbar weergeven. Het betreft een balk die boven de titel van je shop wordt weergegeven, waarin zowel het keurmerk als informatie over de beoordeling is opgenomen. Deze variant werd tot begin maart 2020 standaard getoond.

Zo kun je de Trustbadge als Topbar weergeven

Als je de Trustbadge in je shop als Topbar weer wilt geven, vervang dan voor de parameter 'responsive', de waarde 'floating' door 'topbar'.

Als de parameter 'responsive' nog geen deel uitmaakt van je Trustbadge-configuratie, moet je onder de regel

_tsConfig = {

een nieuwe coderegel aanmaken en op deze plaats de onderstaande codering invoeren:

'responsive': {'variant': 'topbar'},      

Let goed op dat je ook de komma aan het einde van de coderegel meeneemt als je de code kopieert. Anders kan de Trustbadge niet goed worden weergegeven.

Omdat de Trustbadge in de Topbar-variant altijd over de gehele breedte wordt weergegeven, kan het zijn dat de positionering niet altijd automatisch op de juiste manier wordt aangepast.

De custom versies voor mobiele weergave

Net als voor desktops en laptops kun je ook voor mobiele apparaten instellen waar de Trustbadge wordt getoond in je webshop. Dit wordt gedaan met de weergavevariant 'custom' of 'custom_reviews'.

helpcenter_BILD.png

De variant 'custom'

TB5-custom-trustmark-only_NL.pngreviews-only_NL.png

De variant 'custom_reviews' (met en zonder keurmerk)

Hoe je de custom varianten van de Trustbadge kunt integreren voor desktopweergave, wordt uitgelegd in dit artikel: Welke weergavevarianten van de Trustbadge® bestaan er en hoe integreer ik deze in mijn webshop?

Met de parameter 'responsive' en een DIV-element kun je één van de twee custom varianten integreren in de mobiele weergave van je webshop. Volg hiervoor eenvoudig de volgende aanwijzingen.

Je kunt de Trustbadge op deze manier desgewenst ook op een andere plek positioneren dan bij je desktopweergave.

Stap 1: een DIV-element creëren

Om de Trustbadge-varianten custom of custom_reviews te kunnen gebruiken, moet je eerst een DIV-element aanmaken. Kopieer daartoe de onderstaande HTML-code en plak deze op de plek in je shopsysteem waar de Trustbadge moet verschijnen. Mogelijke posities zijn bijvoorbeeld de header of de footer.

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

Met de eigenschappen 'width' en 'height' kun je de hoogte en breedte van de Trustbadge aanpassen. Vervang hiervoor simpelweg de numerieke waarden achter 'width' (breedte) en 'height' (hoogte) met waarden die het best aansluiten op jouw behoeften. Let er wel op dat de oorspronkelijke breedte-hoogteverhouding (de breedte gedeeld door de hoogte) van de Trustbadge behouden blijft. Deze verhouding is 2:1 voor de variant 'custom_reviews' en 1:1 voor de variant 'custom'.

Stap 2: Koppel het DIV-element aan de Trustbadge-configuratie

Om de Trustbadge op de gewenste plek te laten zien, hoef je nu alleen nog het DIV-element dat je in stap 1 hebt gemaakt, te koppelen aan de bestaande configuratie van je Trustbadge. Open hiervoor eerst de Trustbadge-configuratie en controleer of de parameter 'responsive' al in de code aanwezig is. Zo ja, tref je de volgende coderegel in de Trustbadge-configuratie aan:

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

Als je de bovengenoemde coderegel in je Trustbadge-configuratie hebt gevonden, dient deze vervangen te worden door de onderstaande coderegel:

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustomTrustbadge'},
Met deze coderegel activeer je de variant 'custom'. Wil je liever de variant 'custom_reviews' gebruiken, verander dan de waarde van de eigenschap 'variant' van 'custom' in 'custom_reviews'.

Zie je de parameter 'responsive' niet in de configuratie van je Trustbadge, dan moet je deze nog invoegen. Voeg daartoe onder de regel

_tsConfig = {

een nieuwe regel in en plak het bovenstaande codefragment in de code.


Was dit artikel nuttig?

Aantal gebruikers dat dit nuttig vond: 7 van 11