Thema & Uiterlijk
De Thema pagina is waar u uw assistent zijn visuele identiteit geeft — naam, avatar, merk kleuren — en de kanalen kiest waar het actief zal zijn. Alles wordt live in de pagina zelf weergegeven, zodat u kunt itereren zonder het dashboard te verlaten.
Laat uw AI-agent er merkwaardig uitzien · Thema + GDPR-widget
→ Beheerderspad: Aanpassing → Thema (/admin/chatModel/{id}/settings/theme)
Wat u configureert
De pagina is georganiseerd in drie stappen. U kunt op elk moment vooruit en achteruit gaan; wijzigingen in stap 2 worden opgeslagen wanneer u op Opslaan & Volgende klikt.
Stap 1 — Identiteit
- Naam — de openbare naam van uw assistent (bijv. "Emma", "Support Bot"). Overal zichtbaar waar uw assistent met gebruikers communiceert.
- Avatar — de afbeelding die gebruikers zien in de chatkop en berichtballonnen. Upload een vierkante afbeelding; wij passen deze aan en serveren deze vanuit onze CDN.
De naam is hoe uw gebruikers de bot aanspreken. Kies iets dat bij het merk past en gemakkelijk te typen is — het wordt de identiteit van de assistent op elk kanaal.
Stap 2 — Kleuren
Twee kleuren definiëren de gehele widgetpalet:
| Kleur | Waar het wordt weergegeven |
|---|---|
Primair (brand.200) | Achtergrond van de zwevende knop, accentkleuren van berichtballonnen, hover-toestanden |
Secundair (brand.500) | Verzenden knop, links binnen het gesprek, focusringen, actieve toestanden |
Beide invoervelden accepteren elke HEX-waarde. De live preview onderaan de pagina weerspiegelt uw wijzigingen in real-time, zodat u een paar kunt kiezen die goed leesbaar zijn op uw site voordat u opslaat.
Waarom slechts twee kleuren? Ons ontwerpsysteem haalt een volledige 5-staps palet (100/200/500/700/900) uit deze twee ankers. U stelt de toon in; wij houden de rest consistent.
Stap 3 — Integreren
Zodra uw assistent er goed uitziet, spring dan direct naar het integratiekanaal van uw keuze:
- Web Widget — embedcode voor elke website, met volledige controle over knoppen en lay-out
- WordPress — automatische injectie via de WordPress-plugin
- PrestaShop — automatische injectie via de PrestaShop-module
- Shopify — verbind uw winkel en injecteer de chatbot automatisch
- Joomla — automatische injectie via de Joomla-plugin
Elke kaart brengt u naar de specifieke integratiepagina waar u de knopstijl, positie, feedbackmodus, spraakfuncties en kanaalspecifiek gedrag kunt afstemmen.
Live preview
Een live chatwidget wordt weergegeven op de Thema-pagina zelf. Het wordt automatisch opnieuw geïnjecteerd elke keer dat u een kleur wijzigt, zodat u de exacte weergave ziet die uw eindgebruikers zullen krijgen — geen noodzaak om te publiceren of een ander tabblad te openen.
De preview gebruikt dezelfde universal-chatbot.js bundel als productie, dus wat u ziet is wat uw bezoekers zullen zien.
Toestemmingen
| Actie | Vereiste toestemming |
|---|---|
| Bekijk de Thema-pagina | THEME_READ |
| Wijzig kleuren / sla thema op | THEME_UPDATE |
| Hernoem de assistent | CHAT_MODEL_UPDATE |
Leden zonder THEME_UPDATE zien de pagina in alleen-lezen modus (invoervelden uitgeschakeld, geen Opslaan-knop). Zie Toegangscontrole voor hoe deze toe te wijzen.
Tips
- Test op uw echte achtergrond. Open uw site in een tweede tab terwijl u kleuren kiest — wat er goed uitziet in het dashboard kan botsen met uw hero-sectie.
- Houd contrast. De secundaire kleur wordt ook gebruikt voor klikbare tekst in het gesprek. Als gebruikers het niet kunnen lezen, zullen ze niet klikken.
- Stem uw CTA af, niet uw logo. De widget is een interactieve oppervlakte, dus koppel het aan de actie kleur van uw site (de "Koop nu" / "Aanmelden" toon) in plaats van de kleur van uw logo.
- Avatar is belangrijker dan u denkt. Een echt gezicht of een gestileerd karakter converteert beter dan een generiek roboticoon — gebruikers openen de chat vaker wanneer het menselijk uitziet.
Gerelateerd
- Biografie — definieer de persoonlijkheid en besluitregels van uw assistent
- De Chatbot Integreren — embed het op een website
- Kanalen — verbind messagingplatforms
- Toegangscontrole — beheer wie het thema kan bewerken