Ga naar inhoud

Branding & Media

Pad: /dashboard/settings (Branding tab) · Rechten: Settings module

Pas de visuele identiteit van je AI-assistent aan om deze af te stemmen op je merk. Branding wordt toegepast op zowel het dashboard als de widget die je gebruikers zien.

Branding Settings Branding Settings

Je logo verschijnt in de header van het dashboard en optioneel in de widget.

Vereiste Details
Minimale breedte 200px
Maximale weergavegrootte Automatisch geschaald naar 350px breed
Aanbevolen formaat PNG met transparante achtergrond
Uploadmethode Drag-and-drop of bestands kiezer

Tips:

  • Gebruik een transparante PNG voor een strakke uitlijning op zowel lichte als donkere achtergronden.
  • Upload op 2x de gewenste weergavegrootte voor een scherpe weergave op retina-displays.
  • Vermijd erg hoge logo's — brede/horizontale formaten werken het beste in de header.

Favicon

De favicon verschijnt in browsertabbladen en bladwijzers.

Vereiste Details
Minimale grootte 16x16 pixels
Verwerking Bijgesneden tot vierkant, geschaald naar max 48x48
Aanbevolen formaat PNG of SVG

Tips:

  • Gebruik een eenvoudig icoon, letter of symbool — complexe afbeeldingen worden onleesbaar op klein formaat.
  • Als je logo gedetailleerd is, maak dan een vereenvoudigde favicon-versie (bijv. alleen de eerste letter of het icoonmerk).

Kleuren

Instelling Wat het beheert Voorbeeld
Primaire kleur Hoofdkleur van het thema — widget header, knoppen, actieve statussen, sidebar highlights #3b82f6 (blauw), #10b981 (groen)
Secundaire kleur Accentkleur — hover-statussen, links, secundaire knoppen #6366f1 (indigo), #f59e0b (amber)

Voer direct hex-kleurcodes in of gebruik de ingebouwde kleurkiezer. Wijzigingen worden onmiddellijk getoond in het dashboard-voorbeeld.

Kleurtips

  • Match je merk — Gebruik de primaire merkkleur van je bedrijf voor consistentie tussen je website en de widget.
  • Zorg voor contrast — Donkere kleuren werken het best voor headers en knoppen. Vermijd zeer lichte kleuren die niet leesbaar zijn op een witte achtergrond.
  • Test in de widget — Open na het wijzigen van de kleuren de widget op je website om de leesbaarheid en visuele consistentie te controleren.

Typografie

Kies uit premium font-families. De font-selector is taalbewust — deze toont automatisch lettertypen die de tekensets van je geactiveerde talen ondersteunen.

Taal Voorbeelden van lettertypen
Engels / Latijn Inter, Poppins, Open Sans, Roboto, Montserrat
Hebreeuws Heebo, Assistant, Rubik, Open Sans Hebrew
Arabisch Cairo, Tajawal, IBM Plex Arabic
CJK Noto Sans CJK (automatisch geselecteerd)

Het geselecteerde lettertype wordt toegepast op zowel het dashboard als de widget, wat zorgt voor een consistente merkervaring voor zowel je team als je gebruikers.

Widget avatars

De avatar is de profielafbeelding die gebruikers zien in de chat-widget. Het bepaalt de toon van het gesprek — vriendelijk, professioneel of in de stijl van het merk.

Optie Details Beste voor
Galerij Kies uit een samengestelde set van vooraf ontworpen avatars met grote voorbeeldkaarten Snelle installatie, professionele uitstraling
Uploaden Upload je eigen afbeelding — automatisch bijgesneden en geoptimaliseerd naar 100x100 PNG Merkmascotte, teamfoto, aangepast icoon
URL Plak een externe afbeelding-URL Dynamische avatars van een CDN (let op: afhankelijk van beschikbaarheid externe host)

Avatar tips

  • Gebruik een vriendelijk gezicht of icoon — Avatars met een gezicht (menselijk of geïllustreerd) verhogen de betrokkenheid met 15–25%.
  • Match je merk — Als je een mascotte of logo-icoon hebt, gebruik deze dan voor directe merkherkenning.
  • Vermijd afbeeldingen met veel tekst — Op 100x100 pixels wordt tekst onleesbaar.

Aangepaste CSS

Voor geavanceerde aanpassingen kun je aangepaste CSS toevoegen die de standaard dashboard-stijlen overschrijft. Dit is handig voor:

  • Het matchen van specifieke huisstijlrichtlijnen buiten de primaire/secundaire kleuren.
  • Het aanpassen van tussenruimtes, randen of kleurnuances.
  • Het verbergen of herpositioneren van UI-elementen voor gespecialiseerde implementaties.

Voorbeeld: Aangepaste knopstijl

.btn-primary {
    border-radius: 8px !important;
    font-weight: 700 !important;
}

Gebruik met zorg

Custom CSS-overschrijvingen kunnen de lay-out van het dashboard verstoren als selectors wijzigen tijdens updates. Houd overschrijvingen minimaal, documenteer wat je hebt gewijzigd en test na elke systeemupdate.

FAQ

V: Waarom ziet mijn logo er wazig uit?

  • Upload een grotere bronafbeelding (minstens 2x de gewenste weergavegrootte) en laat het systeem deze verkleinen. Een afbeelding van 700px breed ziet er scherp uit op een weergavegrootte van 350px.

V: Kan ik een URL gebruiken in plaats van uploaden?

  • Ja, voor logo's en avatars. Maar externe URL's kunnen onbruikbaar worden als de host paden wijzigt of offline gaat. Direct uploaden is betrouwbaarder.

V: Worden branding-wijzigingen onmiddellijk toegepast op de widget?

  • Ja. Branding-wijzigingen (kleuren, logo, avatar) worden onmiddellijk van kracht voor nieuwe widget-sessies. Bestaande open sessies moeten mogelijk de pagina verversen om updates te zien.

V: Is branding per bot of globaal?

  • Branding is per bot. Elke bot in een multi-bot setup kan zijn eigen kleuren, logo en avatar hebben.