Het toevoegen van Tolkie Leeshulp is vrij eenvoudig. Toch kan het aan het begin overweldigend voelen. Merk je dat je er niet uit komt? Neem dan altijd contact op. We staan namelijk klaar om je te helpen!
Het toevoegen van de leeshulp aan jouw website is een kwestie van 1 regel code toevoegen aan diezelfde website. Op iedere pagina waar deze code wordt geladen, is de leeshulp actief. De code krijg je van ons en ziet er ongeveer zo uit:
<script class="tolkieIntegrationScript" type="module" src="https://tool.tolkie.nl/src/outside_script.js" crossorigin="anonymous" token="1234567890abcdefghijk" defer=""></script>
Let op: In principe werkt de code zowel als je hem in de <head> van de site plaatst als ergens anders op de pagina. Dit is alleen wel afhankelijk van welke variant van de leeshulp je kiest.
Voordat we de code kunnen sturen, moeten we aan onze kant een aantal zaken instellen, zoals:
In welk deel van de pagina Tolkie Leeshulp actief moet zijn
Welke tekstelementen moeten worden meegenomen in Tolkie Leeshulp
Welke elementen moeten worden uitgesloten van leeshulp
Welke functies moeten worden geactiveerd (Woordenboek, Simpele tekst en/of voorlezen)
Op welke URL's Tolkie Leeshulp geactiveerd wordt (bijvoorbeeld: wordt de leeshulp eerst getest op een acceptatie-website?)
Welke kleur de knoppen krijgen
Op welke pagina's de samenvatting eventueel moet worden uitgeschakeld
Deze instellingen worden meestal besproken tijdens een implementatiegesprek.
Of je de code makkelijk zelf kunt plaatsen, is afhankelijk van je technische kennis en de mogelijkheden die het Content Management Systeem van je website je biedt. Overleg dit eventueel met je webbeheerder.
Kan ik ook zelf bepalen op welk deel van de pagina de leeshulp actief wordt?
Dat kan door aan de class tolkie-main toe te voegen aan het hoofdelement waarbinnen de leeshulp actief moet zijn. Dit kan bijvoorbeeld een main element zijn of een container-div.
Mocht je hier niet uitkomen, neem dan contact met ons op.
Kan ik ook zelf bepalen welke tekstelementen wel en niet moeten worden meegenomen in de leeshulp?
Dat kan door de class tolkie-include toe te voegen aan elementen die moeten worden meegenomen. Uitsluiten van elementen kan door het toevoegen van de class tolkie-ignore.
Let op: Door classes toe te voegen, wordt alleen het betreffende element toegevoegd of uitgesloten. Dit geldt niet voor onderliggende (child-)elementen.
Mocht je hier niet uitkomen, neem dan contact met ons op.
Kan ik Tolkie aanpassen aan mijn huisstijl?
Ja, dat kan. Het eenvoudigst is door ons een kleurcode door te geven die past bij de huisstijl van de website. Hierdoor worden kleuren van knoppen en andere elementen van Tolkie Leeshulp aangepast.
Let op: Om ervoor te zorgen dat onze leeshulp voor zoveel mogelijk mensen toegankelijk is, moet de gekozen kleur voldoende contrast hebben met een witte achtergrond. Kies dus niet voor een te lichte kleur. Je kunt met een contrast checker controleren of de door jou gekozen kleur voldoende contrast heeft. De minimumscore voor de contrast ratio is 4.5:1 zijn.
Daarnaast is het mogelijk om via CSS-instellingen het uiterlijk van Tolkie Leeshulp verder aan te passen. Hoe je dat doet is afhankelijk van het Content Management Systeem dat je gebruikt. Je webbeheerder kan je hierbij helpen.
Is het mogelijk om Tolkie Leeshulp eerst te testen op een acceptatie- of testwebsite?
Jazeker! Geef de url van de testomgeving even aan ons door, dan zorgen wij ervoor dat de leeshulp ook op die url kan worden ingeschakeld.
Kan ik zelf kiezen welke variant van de leeshulp we gebruiken?
Tolkie is beschikbaar in 3 varianten: 3 losse knoppen, een zwevende knop rechtsonderin of een losse knop die de zwevende functie activeert (zie ook Hoe ziet Tolkie Leeshulp er uit). Voor alle drie de varianten wordt dezelfde <script>-code gebruikt, aangevuld met een extra attribuut.
tolkie-buttons="true"voegt de losse knoppen toeDe zwevende variant wordt actief als er geen attribuut is toegevoegd
tolkie-single-button="true"voegt de enkele losse knop toe
Wie bepaalt waar de losse knoppen op de pagina komen staan?
De losse knoppen worden geladen op de plek waar de <script>-code op de pagina staat. Op die manier bepaalt de webbeheerder zelf waar de knoppen op de pagina verschijnen.
Een andere optie is om de <script>-code in de head van de pagina te plaatsen en vervolgens door middel van een van de volgende classes voor een element op de pagina aan te geven waar de knoppen moeten worden geplaatst:
tolkie-buttons-beforebegin (de knoppen worden voor het element met deze class geplaatst)
tolkie-buttons-afterend (de knoppen worden na het element met deze class geplaatst)
tolkie-buttons-afterbegin (de knoppen worden aan het begin van het element met deze class geplaatst)
tolkie-buttons-beforeend (de knoppen worden aan het einde van het element met deze class geplaatst)
Het zelf toevoegen van code of het zelf bepalen van de positie van de code is echter niet voor iedereen mogelijk. Daarom bieden wij de optie om de positie van de knoppen te bepalen. Het nadeel hiervan is dat als de website wordt aangepast, we de positie van de knoppen misschien opnieuw moeten bepalen.
Hoe zorg ik ervoor dat privacy-gevoelige informatie niet wordt meegenomen in de leeshulp?
Tolkie Leeshulp wordt alleen geladen op pagina's waaraan de <script>-code is toegevoegd. Om ervoor te zorgen dat de leeshulp helemaal niet wordt geladen, is het aan te raden om de code voor die pagina uit te schakelen. Als dit niet mogelijk is, stuur dan de url van de pagina aan ons door. Wij zorgen ervoor dat de Leesulp op de betreffende pagina niet wordt geactiveerd.
Soms is het niet nodig om de hele pagina uit te sluiten, maar slechts bepaalde delen. Dit kan door de tolkie-ignore class toe te voegen aan een tekstelement. Lukt dat niet, dan kunnen wij dat voor je doen. Geef ons in dat geval door welk(e) element(en) moeten worden uitgesloten.
Welke CSP-headers moeten worden toegevoegd?
Als de website waarop Tolkie Leeshulp wordt geactiveerd een Content Security Policy hanteert, dan moeten CSP-instellingen worden aangevuld met de volgende instellingen:
default-src 'self'; style-src 'self' *.tolkie.nl fonts.googleapis.com; script-src 'self' *.tolkie.nl; connect-src 'self' *.tolkie.nl; frame-src 'self' *.tolkie.nl; img-src 'self' data: *.tolkie.nl; font-src 'self' fonts.gstatic.com;