Tolkie Leeshulp voeg je toe met één regel code: een script met het token van de website. Je plaatst dat script op alle pagina's, registreert de domeinen in Mijn Tolkie, bepaalt waar de knoppen komen en test of alles werkt. Aan het CMS en de servers van de website verandert verder niets. Deze pagina is je startpunt: bij elke stap vind je een link naar de uitgebreide uitleg.
Ben je contactpersoon bij een organisatie? Stuur deze pagina dan gerust door naar je webbouwer.
Wie doet wat bij de implementatie?
Meestal bekijkt Tolkie eerst de website en zet de belangrijkste instellingen klaar, zoals de functies, de kleur van de knoppen en de delen van de pagina waarop de leeshulp actief is. De code toevoegen aan de website doen de organisatie of de webbouwer zelf. Tolkie programmeert niet in je CMS, maar denkt wel mee, geeft advies en beantwoordt je vragen. Zo weet je precies wat je moet doen.
Stap | Wat doe je? | Meer uitleg |
1 | Toegang tot Mijn Tolkie regelen | |
2 | De code op alle pagina's plaatsen | |
3 | De domeinen registreren | |
4 | Bepalen waar de knoppen komen | |
5 | Rekening houden met CSP, single page applications en cookies | |
6 | Testen en controleren |
Stap 1: hoe krijg ik toegang tot Mijn Tolkie?
In Mijn Tolkie (mijn.tolkie.nl) vind je de code en regel je de instellingen van de website. Vraag je opdrachtgever om je een account te geven. Tolkie voegt een externe partij alleen toe met akkoord van de organisatie. Wil de organisatie dat Tolkie zaken rechtstreeks met jou afstemt? Dan kan Tolkie je ook zelf toevoegen.
Je logt in met alleen je e-mailadres. Je krijgt dan een inlogcode van [email protected]. Die code is 15 minuten geldig.
Stap 2: welke code plaats ik en waar?
De code vind je in Mijn Tolkie bij Code/token. Die ziet er zo uit:
<script id="tolkie-script" type="module" src="https://app.tolkie.nl" crossorigin="anonymous" data-tolkie-token="<token van de website>" data-tolkie-state="separateButtons" defer></script>
Plaats het script op alle pagina's waar de leeshulp moet werken. Meestal doe je dat één keer in de hoofdtemplate of in een veld voor header- of footercode. Heeft het CMS al een ingebouwde koppeling met Tolkie? Dan heb je soms alleen het token nodig.
Met data-tolkie-state kies je hoe de leeshulp op de pagina verschijnt:
separateButtons: losse knoppen bij de tekst, met een zwevend vraagteken zodra je naar beneden scrolt. Dit raden we aan.
singleButton: één knop die een menu met alle functies opent.
floatingButton: alleen een zwevende knop rechtsonder.
Stap 3: hoe registreer ik de domeinen?
De leeshulp laadt alleen op domeinen die in Mijn Tolkie geregistreerd zijn. Je voegt ze toe bij Geregistreerde URL's, met http:// of https:// ervoor. Een wildcard zoals https://*.voorbeeld.nl en een lokale omgeving zoals http://localhost:3000 kunnen ook.
Werk je met een test- of acceptatieomgeving? Registreer die dan ook. Heeft die omgeving in Mijn Tolkie een eigen website met een eigen token, gebruik dan die code. Plaats je de code van de live website op de testomgeving, dan gelden daar de instellingen van de live website. Is de testomgeving afgeschermd? Mail dan support; wij geven je het IP-adres door dat je kunt toestaan.
Stap 4: hoe bepaal ik waar de knoppen komen?
Standaard verschijnen de knoppen op de plek waar het script in de HTML staat. Staat het script in de head of in een globale template? Dan bepaal je de plek op een van deze manieren:
Met een class in de HTML, bijvoorbeeld tolkie-buttons-afterend op de paginatitel.
Met de instelling Ankerpunten in Mijn Tolkie: je vult een CSS-selector en een positie in.
De beste plek is direct boven of onder de titel van de pagina, links uitgelijnd, en op elke pagina op dezelfde plek. Zet de vertaalknop bij voorkeur apart in de header, rechtsboven. Dat doe je met de class tolkie-translate-button. Je kunt ook eigen knoppen maken voor andere functies.
Stap 5: waar moet ik nog meer rekening mee houden?
Content Security Policy (CSP). Gebruikt de website een CSP? Sta Tolkie dan toe. In de meeste gevallen breid je deze directives uit:
style-src 'self' https://app.tolkie.nl https://cdn.tolkie.nl;
script-src 'self' https://app.tolkie.nl;
connect-src https://app.tolkie.nl https://api.tolkie.nl;
frame-src https://app.tolkie.nl;
img-src data: https://app.tolkie.nl https://cdn.tolkie.nl;
font-src https://app.tolkie.nl;
Single page applications. Verandert de inhoud zonder dat de pagina herlaadt? Dan moet de leeshulp opnieuw starten. Dat kan automatisch bij een nieuwe URL, of je roept zelf window.tolkie.init() aan. Lees meer in Tolkie Leeshulp opnieuw initialiseren in single page applications.
Cookiebanner. Blokkeert de cookietool externe scripts zolang een bezoeker geen toestemming geeft? Markeer Tolkie dan als functioneel script. Tolkie gebruikt alleen functionele opslag. Lees meer in Hoe werkt Tolkie samen met onze cookiebanner?
Opmaak. De kleur van de knoppen stel je in Mijn Tolkie in. Voor meer aanpassingen kun je eigen css-regels toevoegen. Botst de opmaak van Tolkie met die van de website? Kleine aanpassingen doet support. Komt een conflict steeds terug, dan los je het op in de opmaak van de website zelf.
Stap 6: hoe test ik of de implementatie af is?
Loop deze punten na, op desktop én mobiel:
Staan de losse knoppen bij de tekst, zoals Lees voor, Uitleg woorden en Simpele tekst? Alleen een vraagteken rechtsonder is niet genoeg. Lees waarom in Waarom is de implementatie nog niet 'af' als er alleen maar een vraagteken staat?
Werken de functies? Probeer Lees voor, Uitleg woorden en Simpele tekst op een paar verschillende pagina's.
Valt het zwevende vraagteken over een chatknop of een andere knop? Verplaats het dan in Mijn Tolkie.
Blijven de knoppen zichtbaar als de header bij het scrollen verandert?
Werkt de leeshulp ook in een privévenster, als je alleen functionele cookies accepteert?
Pas je iets aan in Mijn Tolkie? Dan zie je dat meestal binnen een paar minuten op de website. Ververs eerst de pagina, open een privévenster of verwijder je cookies. Zie je de wijziging na 15 minuten nog niet? Mail dan support.
Hoe bereik ik support?
Mail naar [email protected]. Zet in je mail om welke website en pagina het gaat, wat je ziet en wat je verwacht. Een screenshot helpt ons om je snel verder te helpen.