Kleuren, lettertype en thema

De widget neemt uw merkkleur, uw lettertype en desgewenst een volledig eigen kleurenpalet over. Daarbij rekent hij opnieuw totdat elke tekst op elk vlak leesbaar blijft. U kiest uw kleur, de widget zorgt voor het contrast.

Alle instellingen op deze pagina vindt u onder /app/projects/{id} op het tabblad Uiterlijk, in het gedeelte Merk. De uitzondering is het kleurenschema (licht, donker, automatisch): dat staat op het tabblad Installatie, onder Basisgegevens.

De ontwerpassistent

Bovenaan het gedeelte Merk leidt een assistent u in vier stappen door het ontwerp:

1. Uiterlijk — 18 kant-en-klare sjablonen, te filteren op Licht, Donker, Professioneel, Speels, Gezellig, Koel en Minimaal. Daaronder vallen bijvoorbeeld Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit en Espresso.
2. Kleuren — primaire kleur en accent, snelkeuzes uit acht kleurenparen en de keuze van vlakken: standaard, licht, donker of eigen.
3. Vorm — vensterstijl, hoekradius, vorm en grootte van de chatknop.
4. Klaar — een samenvatting.

De assistent slaat zelf niets op. Hij vult alleen de velden eronder in; er wordt pas iets opgeslagen wanneer u op Opslaan drukt. De miniatuur in de assistent is een schets. De echte widget met uw waarden ziet u in het voorbeeld van het gedeelte Startscherm van de widget.

Voor fijnafstemming klapt u Alle instellingen afzonderlijk open. Lettertype en eigen CSS zijn alleen daar beschikbaar.

De velden

• Primaire kleur — uw merkkleur als #rrggbb. Deze kleurt de chatknop, de verzendknop, links, de focus en (gemengd) de ballonnen van uw bezoekers. Zonder eigen waarde: violet #6D28D9 in het lichte thema, #9B7BFF in het donkere.
• Accent — een tweede kleur als #rrggbb, bijvoorbeeld voor tellers en accenten. Zonder eigen waarde: #BE185D licht, #FF6B8A donker.
• Hoekradius (px) — 0 tot 28. 0 is hoekig. Standaard 12.
• Lettertypefamilie (CSS) — een CSS-waarde zoals Inter, system-ui, sans-serif, maximaal 120 tekens. De widget laadt geen lettertypebestanden. Gebruik dus een lettertype dat uw pagina toch al laadt, of een systeemlettertype. Leeg betekent: de systeemlettertypen van het apparaat.
• Sjablonen — één klik vult kleuren, vlakken, radius, chatknop en stijl tegelijk in. Er wordt pas iets opgeslagen wanneer u op Opslaan drukt.

Alleen kleuren in de vorm #rrggbb met zes cijfers zijn geldig. Verkorte vormen zoals #f00 of rgb(…) worden genegeerd; in plaats daarvan geldt de standaardwaarde.

Vlakken en tekst

Onder Vlakken en tekst kunt u zo nodig nog vijf kleuren instellen. Elk heeft een selectievakje eigen kleur:

• Achtergrond — het vlak van het venster.
• Ballonvlak — de ballonnen van uw team en de assistent.
• Tekst — de tekstkleur.
• Secundaire tekst — tijdstippen, opmerkingen, tweede regels.
• Lijnen — scheidingslijnen en randen.

Zonder vinkje gebruikt de widget het kleurenpalet dat bij de website past, licht of donker. De waarde in het veld is dan slechts een startpunt, geen meting. Met vinkje geldt uw kleur.

Als u alleen een eigen achtergrond instelt, leidt de widget de rest daarvan af: ballonvlak, tekst, secundaire tekst en lijnen.

Leesbaarheid: wat de widget herberekent

Klanten kiezen hun merkkleur, geen leesbare kleur. Daarom controleert de widget elke combinatie van tekst en vlak op een contrastverhouding van minstens 4,5:1. Dat is de grens van WCAG 2.x voor gewone tekst.

• Tekst op uw merkkleur (bijvoorbeeld in de verzendknop) wordt automatisch wit of bijna zwart, afhankelijk van wat beter leesbaar is.
• Uw merkkleur als tekstkleur (links, accenten) wordt in kleine stappen lichter of donkerder gemaakt totdat 4,5:1 is bereikt. De vlakken behouden uw kleur ongewijzigd, dus de chatknop en de verzendknop.
• De ballon van uw bezoekers is een mengsel van merkkleur en achtergrond. Als het contrast onvoldoende is, voegt de widget minder merkkleur toe.
• Uw eigen kleuren voor tekst en secundaire tekst ondergaan dezelfde controle, tegen elk vlak waarop ze verschijnen.

Wat is herberekend, staat in uw account direct onder het formulier, op de regel Herberekend zodat de tekst leesbaar blijft. Lichtgeel als tekstkleur ziet er in de widget daarom donkerder uit dan u hebt ingevoerd; daar ziet u ook waarom.

Op uw pagina kunt u de meetwaarden ook zelf opvragen:

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

Licht, donker of zoals de website

Onder Installatie → Basisgegevens → Kleurenschema van de widget kiest u:

• zoals de website (anders het systeem van de bezoeker) — standaard. De widget controleert of uw pagina licht of donker is en past zich aan.
• licht — altijd licht.
• donker — altijd donker.

Bij de automatische keuze kijkt de widget achtereenvolgens naar:

1. de achtergrondkleur van uw pagina in het midden van het scherm,
2. de CSS-waarde color-scheme op <html>, als deze precies dark of light is,
3. gebruikelijke schakelaars op <html> of <body>, zoals de klasse dark of data-theme="dark",
4. ten slotte de systeeminstelling van de bezoeker.

Als uw pagina wisselt tussen licht en donker, volgt de widget. Hij controleert dit ook opnieuw wanneer het venster wordt geopend.

In code stelt u het thema in op het insluitfragment of tijdens het draaien. Dit gaat vóór de accountinstelling:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

Met setTheme onthoudt de widget de keuze in de browser van de bezoeker. setTheme('auto') verwijdert deze weer. Dat past bij een eigen licht/donkerschakelaar op uw pagina.

Kleuren instellen in code

Voor afzonderlijke pagina’s, bijvoorbeeld een campagne, kunt u het merk op het insluitfragment of tijdens het draaien instellen. De veldnamen zijn:

• primary, accent — merkkleur en accent,
• bg, surface, text, textDim, line — de vijf vlakken,
• onPrimary — tekstkleur op de merkkleur (anders automatisch),
• radius — 0 tot 28,
• font — CSS-waarde voor het lettertype,
• launcher en stil — zie De chatknop en Chatvenster.

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand herberekent contrast en afgeleide kleuren direct, zonder de widget opnieuw op te bouwen. null verwijdert een waarde weer; dan geldt de standaardwaarde.

Op het insluitfragment heet het attribuut data-rc-brand en verwacht het JSON:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Belangrijk — wat heeft voorrang, het insluitfragment of het account? Het fragment dat uw account genereert, bevat al uw merkkleur, radius en de vorm en grootte van de chatknop. Dat is alleen de beginstand, zodat de chatknop meteen in de juiste kleur verschijnt. Zodra de widget de instellingen van de server heeft, geldt uw account volledig.

Als u echter een ander veld toevoegt aan data-rc-brand, bijvoorbeeld accent, stil of een opschrift, telt het merk in het fragment als het eigen merk van deze pagina. Het gaat dan vóór uw account. Vanuit uw account geldt op deze pagina alleen nog de weergave “Alleen via eigen links”. Bovendien neemt de pagina niet deel aan A/B-tests.

Als u de merkkleur in uw account wijzigt, kopieert u daarna de insluitcode onder Installatie opnieuw. Anders verschijnt bij het laden van de pagina kort de oude kleur.

Hoe het fragment zelf werkt en welke andere mogelijkheden er zijn (window.ReactiveChatSettings, ReactiveChat('boot', …)), staat in Technische integratie.

Eigen CSS

Onder Alle instellingen afzonderlijk → Eigen CSS schrijft u CSS die als laatste wordt toegepast, na alle andere regels.

• Maximaal 20.000 tekens.
• @import wordt verwijderd, zowel bij het opslaan als in de widget.
• De CSS werkt alleen binnen de widget. Deze draait in een afgeschermd gebied (shadow DOM) en kan uw pagina niet wijzigen. Omgekeerd bereikt de CSS van uw pagina de widget niet. Dit is daarvoor de juiste plek.
• De widget dwingt daarna twee regels opnieuw af: de zichtbare focusring voor toetsenbordgebruikers en de sluitknop in de kop. Als u de uitgang uit de chat wegstijlt, kunnen toetsenbordgebruikers vast komen te zitten.
• De interne klassenamen van de widget zijn geen gegarandeerde interface. Controleer uw CSS na wijzigingen in het voorbeeld.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

In code werkt hetzelfde met customCss, bijvoorbeeld in ReactiveChat('boot', { customCss: '…' }) of als attribuut data-rc-custom-css.

Logo in de vensterkop

Het eenvoudigst is het logo in uw account in te voeren: Project → Uiterlijk → Merk, veld Logo (adres). Het verschijnt dan in de kop van het chatvenster, uiterlijk één minuut na het opslaan.

In code kunt u met logo ook de hoogte, alternatieve tekst en positie instellen, bijvoorbeeld het logo in de chatknop. Een in code ingesteld logo gaat vóór het accountveld:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

• src — een adres met https:// of een afbeelding als data:image/…. Een kleine SVG als data:-adres bespaart een verzoek.
• alt — alternatieve tekst.
• height — hoogte in pixels, 12 tot 40, standaard 20.
• placement — header (kop, standaard), launcher (in de chatknop) of both.

Het logo op het startscherm stelt u juist eenvoudig in uw account in, zie Het startscherm van de chat.

Als iets er anders uitziet dan verwacht

• De kleur is donkerder of lichter dan ingevoerd: dat is de contrastbescherming. De regel Herberekend onder het formulier vermeldt wat is aangepast.
• Wijzigingen in uw account komen niet aan: bevat uw fragment een data-rc-brand met extra velden? Dan heeft het fragment voorrang. Bovendien duurt het na opslaan maximaal een minuut.
• Bij het laden verschijnt kort een andere kleur: kopieer het fragment opnieuw na een kleurwijziging.
• Het lettertype heeft geen effect: laadt uw pagina het lettertype? De widget laadt geen lettertypebestanden.