Als de vertaalfunctie voor de hele website actief is voor jouw website, dan zie je de knop 'Vertalen' in het menu van Tolkie Leeshulp. Voor bezoekers van je website is het vaak handiger als er ook nog een losse vertaalknop op de pagina staat. In dit kennisbank-artikel lees je hoe je een vertaalknop toevoegt.
Om een eigen vertaalknop te gebruiken, volg je de volgende stappen.
Voeg een ‘domme’ knop toe aan de website. Deze knop doet in eerste instantie nog niets. Je kunt de knop zelf plaatsen of door je webbouwer laten maken. Een goede plek voor de vertaalknop is in de header, rechtsboven op de pagina. Dat is waar bezoekers vaak kijken als ze op zoek zijn naar een vertaalknop.
Voeg nu de class 'tolkie-translate-button' toe aan de knop.
Belangrijk:
Zodra ons script op de website wordt geladen, kijkt het script of het de 'tolkie-translate-button' class tegenkomt op de pagina. Als het script de class vindt, voegt het een klik-functionaliteit toe aan de knop met deze class. Het script zorgt er ook voor dat de knop met een druk op ‘Enter’ wordt geactiveerd, zodat de knop ook meteen toegankelijk is voor gebruikers van een toetsenbord
Klikt of drukt een gebruiker op de knop? Dan opent de vertaalfunctie in de leeshulp. Het script geeft de knop dan ook de class ‘active’, zodat via styling kan worden aangegeven dat de functie actief is
Deze oplossing werkt voor meerdere knoppen op een pagina. Zo kun je een vertaalknop toevoegen aan bovenkant van de pagina en nog eentje onderaan, bijvoorbeeld in de footer
Voorbeeld-html voor de vertaalknop
Dit is voorbeeldcode voor het toevoegen van de vertaalknop aan je website:
<div class="tolkie-button-wrapper">
<button class="tolkie-single-button tolkie-translate-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/globe-translate.svg">
Vertalen
</button>
</div>