Hoe voeg je een info-button (tooltip) toe aan een filteroptie in Datamotive?

Met een info-button geef je bezoekers extra uitleg bij een filter in het voertuig- of vacatureoverzicht. Zodra de bezoeker met de muis over het info-icoon beweegt of erop klikt, verschijnt een korte toelichting in een tooltip. Zo maak je begrippen als Bijtelling, BTW/marge of Koopprijs direct begrijpelijk, zonder dat je de filterlabels zelf langer hoeft te maken. Dit verlaagt de drempel om te filteren en verbetert de gebruikerservaring van het overzicht.

De info-button stel je niet in als apart onderdeel of blok. Je activeert hem door voor de betreffende filter een tooltiptekst in te vullen binnen Instellingen > Vertalingen.

Voorwaarde: de betreffende filter staat aan in het voertuig- of vacatureoverzicht. Staat de filter niet in het overzicht, dan is er ook geen plek waar de info-button getoond kan worden.

Voorwaarde: het toevoegen van een tooltip verloopt via de vertalingenmodule. Werk je hier voor het eerst mee? Raadpleeg dan eerst de handleiding [Hoe pas je vertalingen aan binnen Instellingen in Datamotive?]

Hoe de info-button werkt

De info-button verschijnt automatisch zodra er voor een filter een tooltiptekst is ingevuld. Laat je de waarde leeg, dan toont Datamotive geen info-icoon naast de filter.

Belangrijke uitgangspunten:

• De tooltip wordt per taal ingesteld. Een taal zonder ingevulde waarde toont in die taal geen info-button.
• De teksten staan in de vertalingenset Content binnen de omgeving Website.
• Tooltips zijn beschikbaar voor zowel het voertuigoverzicht (sleutels die beginnen met vehicle.) als het vacatureoverzicht (sleutels die beginnen met vacancy.).
• Elke tooltipsleutel eindigt op .tooltip, bijvoorbeeld vehicle.attribute.price.tooltip.

Een tooltip toevoegen aan een filteroptie

Stap 1 – Open de vertalingen
Navigeer in het linkermenu naar Instellingen en klik vervolgens op Vertalingen.

Stap 2 – Kies de omgeving
Selecteer rechtsboven bij Omgeving de optie Website. De filters van het voertuig- en vacatureoverzicht vallen onder deze omgeving.

Stap 3 – Kies de taal
Selecteer de taal waarvoor je de tooltip wilt invullen. Ondersteun je meerdere talen, begin dan met de hoofdtaal en herhaal de stappen later voor de overige talen.

Stap 4 – Kies de vertalingenset
Selecteer bij Vertalingenset de optie Content. Hierin staan de teksten van de overzichten en filters.

Stap 5 – Zoek de juiste filter op
Gebruik de zoekfunctie van je browser met CMD+F (Mac) of CTRL+F (Windows) om de juiste regel te vinden. Zoek op de beschrijving, bijvoorbeeld Voertuigoverzicht > filter > Koopprijs > tooltip, of op de sleutel, bijvoorbeeld vehicle.attribute.price.tooltip.

Stap 6 – Vul de tooltiptekst in
Vul in het veld Waarde de uitlegtekst in die je aan de bezoeker wilt tonen. Houd de tekst kort en concreet.

Stap 7 – Sla de vertaling op
Klik rechtsonder op het blauwe opslaan-icoon om de ingevulde waarde te bewaren.

Stap 8 – Herhaal per taal
Wissel bij Taal naar de volgende taal en herhaal stap 5 tot en met 7. Doe dit voor elke taal die je website ondersteunt.

Let op: vul je een taal niet in, dan ziet een bezoeker in die taal geen info-button bij de filter. De filter zelf blijft wel gewoon werken.

Voorbeeld

Een voorbeeld van een ingevulde tooltip bij de filter Koopprijs in het voertuigoverzicht:

• Sleutel: vehicle.attribute.price.tooltip
• Waarde: De koopprijs is de vraagprijs van het voertuig. Kosten rijklaar maken kunnen hier los van staan.

Na het opslaan verschijnt naast de filter Koopprijs een info-icoon. Beweegt de bezoeker hierover, dan verschijnt bovenstaande toelichting in een tooltip.

Tips voor goede tooltipteksten

• Leg uit wat de filter inhoudt en gebruik geen marketingtekst.
• Houd de tekst kort: één of twee zinnen is meestal voldoende.
• Gebruik dezelfde terminologie als op de rest van de website, zodat de uitleg herkenbaar blijft.
• Behoud eventuele opmaak of variabelen die al in de vertaling staan. Meer hierover lees je in de handleiding [Hoe pas je vertalingen aan binnen Instellingen in Datamotive?]
• Vul alleen tooltips in bij filters waar daadwerkelijk uitleg nodig is. Te veel info-buttons maken het overzicht onrustig.

Controleren op de live website

Open na het opslaan het live voertuig- of vacatureoverzicht en zoek de filter op waarvoor je de tekst hebt ingevuld. Naast het filterlabel staat nu een info-icoon. Beweeg met de muis over het icoon of klik erop: de door jou ingevulde tekst verschijnt in de tooltip. Controleer dit ook in de andere talen die je hebt ingevuld, door de taalwisselaar op de website te gebruiken.

Overzicht instellingen