Styling & Aanpassing
Leer hoe je het uiterlijk van de widget aanpast om bij jouw locatie aan te
laten sluiten
Aanpassen aan locatie kleuren
De widget past automatisch tekstkleuren aan op basis van jouw locatie
kleur voor optimaal contrast en toegankelijkheid:
<!-- Light brand colors will use dark text -->
<constell-widget brand-color="#FFE082"></constell-widget>
<!-- Dark brand colors will use light text -->
<constell-widget brand-color="#1565C0"></constell-widget>
Richtlijnen positie widget
Kies posities op basis van jouw website-indeling en
gebruikerservaring overwegingen:
- bottom-right: Meest voorkomende
keuze, interfereert niet met hoofdnavigatie
- bottom-left: Goed voor RTL lay-outs
of wanneer de rechterkant bezet is door andere elementen
- bottom-center: Prominente
plaatsing, gebruik spaarzaam om niet opdringerig te zijn
- top-*: Gebruik wanneer het onderste
gebied belangrijke inhoud of andere widgets bevat
Kleurpsychologie & Branding
Kies kleuren die aansluiten bij jouw branding en locatie type:
🌿
Restaurants & Cafés
Warme, uitnodigende
kleuren zoals groen, bruin en aardse tinten creëren een eetlust-vriendelijke sfeer.
🏢
Bedrijfsevenementen
Professionele blauwtinten,
grijs en marineblauw stralen vertrouwen en professionaliteit uit.
💐
Trouwlocaties
Romantische roze, paars en
gouden tinten creëren een elegante, feestelijke sfeer.
🎉
Feestlocaties
Levendige oranje, gele en rode
tinten creëren energie en opwinding.
Toegankelijkheids Overwegingen
De widget handelt toegankelijkheid automatisch af, maar hier zijn
best practices:
- Kleurcontrast: De
widget zorgt automatisch voor WCAG AA naleving voor tekstcontrast
- Focus Beheer:
Toetsenbordnavigatie wordt volledig ondersteund
- Schermlezers: Alle
inhoud is correct gelabeld voor ondersteunende technologie
- Hoog Contrast: De
widget respecteert systeem hoog-contrast voorkeuren
Responsiviteit
De widget past zich automatisch aan aan verschillende schermformaten:
📱 Mobiele Optimalisaties:
- Knopgrootte neemt toe voor betere aanraakinteractie
- Modale dialoogvensters passen zich aan aan
schermgrootte
- Tekst blijft leesbaar op alle zoomniveaus
- Positie-aanpassingen voorkomen overlap met
mobiele browser UI
Aangepaste labels voor startknop widget
Pas de tekst van de startknop aan om bij uw locatie te laten
passen:
<!-- Formal/Professional -->
<constell-widget
button-label="Request Information"
button-label-close="Close Inquiry">
</constell-widget>
<!-- Casual/Friendly -->
<constell-widget
button-label="Let's Chat!"
button-label-close="Talk Soon!">
</constell-widget>
<!-- Action-Oriented -->
<constell-widget
button-label="Book Now"
button-label-close="Close Booking">
</constell-widget>
Integratie met Bestaand Ontwerp
Tips voor een naadloze integratie met jouw website:
- Match kleuren:
Gebruik jouw primaire of accent kleuren voor consistentie
- Overweeg Z-index: De widget
gebruikt hoge z-index waarden om zichtbaar te blijven
- Test
Positionering: Zorg ervoor dat de widget belangrijke UI-elementen niet overlapt
- Mobiele Test: Verifieer
dat de widget goed werkt met jouw mobiele navigatie
⚠️ Belangrijke Opmerkingen
- De widget gebruikt Shadow DOM - externe CSS kan
interne elementen niet stylen
- Test altijd widget-plaatsing op mobiele
apparaten en verschillende schermformaten
- Houd rekening met bestaande chatwidgets of
zwevende elementen van jouw website
- Verifieer dat kleurkeuzes werken in zowel lichte
als donkere modus als jouw site dit ondersteunt
Jouw styling testen
Gebruik onze interactieve testruimte om verschillende styling opties te
testen: