Chatvenster: stijl, grootte, zijpaneel en mobiele weergave

Kleuren bepalen het karakter, de vorm doet de rest. Onder /app/projects/{id} op het tabblad Uiterlijk, gedeelte Merk, staan twee groepen schakelaars: Stijl (vorm in plaats van kleur) en Venster (hoe het geopende venster verschijnt). Als u niets kiest, blijven alle standaardwaarden gelden. U slaat op met Opslaan; het voorbeeld onder Startscherm van de widget toont de echte widget.

De sjablonen van de ontwerpassistent stellen deze schakelaars tegelijk in.

Stijl

• Kopbalk — kleurverloop (standaard), plat of glas. Geldt voor de kop van het startscherm en de titelbalk.
• Dichtheid — normaal (standaard), compact of luchtig. Afstanden op het startscherm en in het gesprek.
• Tekstballonnen — zacht (standaard, volgt uw hoekradius), rond (18 px) of hoekig (4 px).
• Schaduw — zacht (standaard), hard of geen. Geldt voor het venster, niet voor de chatknop.
• Avatar — rond (standaard) of hoekig.
• Invoerveld — plat (standaard) of pil (sterk afgerond, met ronde knoppen).
• Kaarten — met rand (standaard) of plat. Geldt voor startschermtegels, hulpregels en kaarten in het gesprek.

Venster

• Venstergrootte — normaal (standaard, 380 px breed), breed (440 px), smal (340 px) of hoog (bijna de volledige schermhoogte, maximaal 960 px). De normale hoogte is 620 px, op kleine schermen minder.
• Lay-out — zwevend venster (standaard) of zijpaneel. Het zijpaneel staat op volledige hoogte aan de rand, aan de kant van de chatknop, en schuift van daaruit naar binnen. De chatknop verdwijnt naar de achtergrond zolang het paneel open is. Sluiten gebeurt met de knop in de kopbalk.
• Achtergrond — de ondergrond van het berichtengebied: eenvoudig (standaard), stippen, raster of kleurverloop (een vleugje van uw merkkleur).
• Tekstgrootte — normaal (standaard, 14 px), groot (15,5 px) of klein (13 px). Geldt voor tekstballonnen en invoer, niet voor de chatknop.
• Openingsanimatie — inschuiven (standaard), inzoomen, infaden of geen. Als de bezoeker “minder beweging” in het systeem heeft ingesteld, vervalt de animatie sowieso.
• Bezoekersballon — de kleur van de ballonnen van uw bezoekers: primaire kleur (standaard, een lichte menging van uw merkkleur), accentkleur of neutraal (grijs). Ook hier herberekent de widget de tekst totdat deze leesbaar is.

Venstergrootte en lay-out werken pas vanaf 481 px schermbreedte. Daaronder opent de chat altijd schermvullend (zie hieronder).

In code

Alle schakelaars staan in het merk onder stil. De waarden zijn de interne namen:

• kopf: verlauf, flach, glas
• dichte: normal, kompakt, luftig
• blase: weich, rund, eckig
• schatten: weich, hart, keiner
• avatar: rund, eckig
• eingabe: flach, pille
• karten: rahmen, flach
• fenster: normal, breit, schmal, hoch
• ansicht: schwebend, seite
• hintergrund: schlicht, punkte, raster, verlauf
• schrift: normal, gross, klein
• animation: gleiten, zoom, blenden, keine
• besucher: marke, akzent, neutral

Een onbekende waarde valt terug op de standaardwaarde.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

Op het fragment als data-rc-brand='{"stil":{"ansicht":"seite"}}' geldt het merk als eigen merk van deze pagina en gaat het vóór uw account, zie Kleuren, lettertype en thema.

Beweging

Met data-rc-motion op het fragment bepaalt u de animaties: auto (standaard, volgt de systeeminstelling van de bezoeker), reduced (geen beweging) of full.

data-rc-motion="reduced"

Kopbalk

De kopbalk toont wie antwoordt:

• Als iemand uit uw team schrijft, staat daar de weergavenaam. Elk teamlid beheert die in de persoonlijke instellingen, zie Team, console en notificaties.
• Als de AI-assistent antwoordt, staat daar de naam uit AI & kennis → Assistent (standaard “Ada”), zie AI-assistent.
• Anders de titel “Chat”. U wijzigt die en de tweede regel (“We zijn er”, “AI-assistent”) onder Teksten en talen met de sleutels header.title, header.subtitle_online en header.subtitle_bot.

Avatars tonen de eerste letter van de naam en het teken ✦ voor de assistent. Eigen foto’s voor teamleden kunnen momenteel niet worden opgeslagen.

In de kopbalk staat ook een enveloppictogram waarmee bezoekers het gesprek per e-mail kunnen laten sturen. U schakelt dit uit onder Regels & service → Transcript van het gesprek per e-mail, zie Beschikbaarheid, formulieren en service.

De melding “Powered by reactive.chat”

Met Free staat onderaan het venster de melding “Powered by reactive.chat”. Vanaf een betaald abonnement bepaalt u dit zelf onder Uiterlijk → reactive.chat in de chat met de schakelaar “Powered by reactive.chat” verbergen. De standaard is dan: verborgen. De tekst van de melding kan niet worden gewijzigd.

Op telefoons

Tot en met 480 px breedte, en op apparaten in liggende stand tot en met 480 px hoogte, opent de chat schermvullend: zonder hoeken, over de volledige zichtbare hoogte, ook wanneer het schermtoetsenbord opent. Het invoerveld gebruikt tekst van 16 px zodat de telefoon niet inzoomt, en knoppen zijn minstens 44 px groot. De chatknop verdwijnt naar de achtergrond zolang de chat open is.

Venstergrootte en zijpaneel gelden niet op telefoons. De andere stijlschakelaars, kleuren en tekstgrootte wel. De grootte van de chatknop op telefoons stelt u in onder De chatknop.