Chatfenster: Stil, Größe, Seitenleiste und Mobilansicht

Farben bestimmen den Charakter, die Form den Rest. Unter /app/projects/{id} im Reiter Aussehen, Abschnitt Marke, findest du zwei Gruppen von Schaltern: Stil (Form statt Farbe) und Fenster (wie das geöffnete Fenster erscheint). Ohne Auswahl bleibt alles in der Vorgabe. Gespeichert wird mit Speichern, die Vorschau unter Startseite des Widgets zeigt das echte Widget.

Die Vorlagen des Design-Assistenten setzen diese Schalter gleich mit.

Stil

• Kopf – Verlauf (Vorgabe), flach oder Glas. Gilt für den Kopf der Startseite und die Titelzeile.
• Dichte – normal (Vorgabe), kompakt oder luftig. Abstände auf der Startseite und im Gesprächsverlauf.
• Sprechblasen – weich (Vorgabe, folgt deinem Eckenradius), rund (18 px) oder eckig (4 px).
• Schatten – weich (Vorgabe), hart oder keiner. Gilt für das Fenster, nicht für den Starter.
• Avatar – rund (Vorgabe) oder eckig.
• Eingabefeld – flach (Vorgabe) oder Pille (stark gerundet, mit runden Knöpfen).
• Karten – mit Rahmen (Vorgabe) oder flach. Gilt für Kacheln der Startseite, Hilfezeilen und Karten im Gespräch.

Fenster

• Fenstergröße – normal (Vorgabe, 380 px breit), breit (440 px), schmal (340 px) oder hoch (fast die ganze Bildschirmhöhe, höchstens 960 px). Die normale Höhe ist 620 px, auf kleinen Bildschirmen weniger.
• Darstellung – schwebendes Fenster (Vorgabe) oder Seitenleiste. Die Seitenleiste steht in voller Höhe am Rand, auf der Seite des Starters, und gleitet von dort herein. Der Starter tritt zurück, solange sie offen ist. Geschlossen wird über den Knopf im Kopf.
• Hintergrund – Grund des Nachrichtenbereichs: schlicht (Vorgabe), Punkte, Raster oder Verlauf (ein Hauch deiner Markenfarbe).
• Schriftgröße – normal (Vorgabe, 14 px), groß (15,5 px) oder klein (13 px). Gilt für Blasen und Eingabe, nicht für den Starter.
• Öffnungsanimation – gleiten (Vorgabe), heranzoomen, einblenden oder keine. Hat der Besucher in seinem System „Bewegung reduzieren“ eingestellt, entfällt die Animation ohnehin.
• Besucherblase – Farbe der Blasen deiner Besucher: Primärfarbe (Vorgabe, eine helle Mischung deiner Markenfarbe), Akzentfarbe oder neutral (grau). Auch hier rechnet das Widget die Schrift lesbar.

Fenstergröße und Darstellung wirken erst ab 481 px Bildschirmbreite. Darunter öffnet der Chat immer im Vollbild (siehe unten).

Per Code

Alle Schalter stehen in der Marke unter stil. Die Werte sind die internen 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

Ein unbekannter Wert fällt auf die Vorgabe zurück.

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

Am Schnipsel als data-rc-brand='{"stil":{"ansicht":"seite"}}' gilt die Marke als eigene Marke dieser Seite und schlägt das Konto, siehe Farben, Schrift und Thema.

Bewegung

Mit data-rc-motion am Schnipsel steuerst du Animationen: auto (Vorgabe, folgt der Systemeinstellung des Besuchers), reduced (keine Bewegung) oder full.

data-rc-motion="reduced"

Kopfzeile

Im Kopf steht, wer antwortet:

• Schreibt jemand aus deinem Team, steht dort sein Anzeigename. Jedes Teammitglied pflegt ihn in seinen persönlichen Einstellungen, siehe Team, Konsole und Benachrichtigungen.
• Antwortet der KI-Assistent, steht dort sein Name aus KI & Wissen → Assistent (Vorgabe „Ada“), siehe KI-Assistent.
• Sonst der Titel „Chat“. Diesen und die Unterzeile („Wir sind da“, „KI-Assistenz“) änderst du unter Texte und Sprachen mit den Schlüsseln header.title, header.subtitle_online und header.subtitle_bot.

Avatare zeigen den Anfangsbuchstaben des Namens, beim Assistenten das Zeichen ✦. Eigene Fotos für Teammitglieder lassen sich derzeit nicht hinterlegen.

Im Kopf steht außerdem ein Briefsymbol, über das Besucher sich den Gesprächsverlauf mailen lassen können. Du schaltest es unter Regeln & Service → Gesprächsverlauf per E-Mail ab, siehe Erreichbarkeit, Formulare und Service.

Hinweis „Powered by reactive.chat“

Unten im Fenster steht im kostenlosen Tarif der Hinweis „Powered by reactive.chat“. Ab einem bezahlten Tarif entscheidest du unter Aussehen → reactive.chat im Chat mit dem Schalter „Powered by reactive.chat“ verbergen selbst. Vorgabe ist dann: verborgen. Der Wortlaut des Hinweises lässt sich nicht ändern.

Auf dem Handy

Bis 480 px Breite, und auf liegenden Geräten bis 480 px Höhe, öffnet der Chat im Vollbild: ohne Ecken, in der vollen sichtbaren Höhe, auch wenn die Bildschirmtastatur aufgeht. Das Eingabefeld hat 16 px Schrift, damit das Telefon nicht hineinzoomt, Knöpfe sind mindestens 44 px groß. Der Starter tritt zurück, solange der Chat offen ist.

Fenstergröße und Seitenleiste gelten auf dem Handy nicht. Die übrigen Stilschalter, Farben und Schriftgröße schon. Die Größe des Starters auf dem Handy stellst du unter Der Starter ein.