Farben, Schrift und Thema

Das Widget übernimmt deine Markenfarbe, deine Schrift und auf Wunsch einen ganzen eigenen Farbsatz. Dabei rechnet es nach, bis jeder Text auf jeder Fläche lesbar bleibt. Du wählst deine Farbe, das Widget kümmert sich um den Kontrast.

Alle Einstellungen dieser Seite findest du unter /app/projects/{id} im Reiter Aussehen, Abschnitt Marke. Ausnahme ist das Farbschema (hell, dunkel, automatisch): Es steht im Reiter Einbau unter Grunddaten.

Der Design-Assistent

Oben im Abschnitt Marke führt dich ein Assistent in vier Schritten durch die Gestaltung:

1. Aussehen – 18 fertige Vorlagen, filterbar nach Hell, Dunkel, Seriös, Verspielt, Warm, Kühl und Schlicht. Darunter sind zum Beispiel Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit und Espresso.
2. Farben – Primärfarbe und Akzent, eine Schnellwahl aus acht Farbpaaren und die Wahl der Flächen: Vorgabe, hell, dunkel oder eigene.
3. Form – Stil des Fensters, Eckenradius, Form und Größe des Starters.
4. Fertig – eine Zusammenfassung.

Der Assistent hat keine eigene Speicherung. Er füllt nur die Felder darunter, gespeichert wird erst mit Speichern. Die Miniatur im Assistenten ist eine Skizze. Das echte Widget mit deinen Werten siehst du in der Vorschau des Abschnitts Startseite des Widgets.

Für die Feinarbeit klappst du Alle Einstellungen einzeln auf. Schrift und eigenes CSS gibt es nur dort.

Die Felder

• Primärfarbe – deine Markenfarbe als #rrggbb. Sie färbt den Starter, den Sendeknopf, Links, den Fokus und (gemischt) die Blasen deiner Besucher. Ohne eigene Angabe: Violett #6D28D9 im hellen Thema, #9B7BFF im dunklen.
• Akzent – eine zweite Farbe als #rrggbb, etwa für Zähler und Hervorhebungen. Ohne eigene Angabe: #BE185D hell, #FF6B8A dunkel.
• Eckenradius (px) – 0 bis 28. 0 ist eckig. Vorgabe 12.
• Schriftfamilie (CSS) – eine CSS-Angabe wie Inter, system-ui, sans-serif, höchstens 120 Zeichen. Das Widget lädt keine Schriftdateien nach. Nimm also eine Schrift, die deine Seite ohnehin lädt, oder eine Systemschrift. Leer heißt: die Systemschriften des Geräts.
• Vorlagen – ein Klick füllt Farben, Flächen, Radius, Starter und Stil auf einmal. Gespeichert wird erst mit Speichern.

Gültig sind nur Farben in der Form #rrggbb mit sechs Stellen. Kurzformen wie #f00 oder rgb(…) werden verworfen, dann gilt die Vorgabe.

Flächen und Schrift

Unter Flächen und Schrift setzt du bei Bedarf fünf weitere Farben. Jede hat einen Haken eigene Farbe:

• Hintergrund – die Fläche des Fensters.
• Blasenfläche – die Blasen deines Teams und des Assistenten.
• Schrift – die Textfarbe.
• Nebentext – Uhrzeiten, Hinweise, Unterzeilen.
• Linien – Trennlinien und Rahmen.

Ohne Haken nimmt das Widget den Farbsatz, der zur Webseite passt, hell oder dunkel. Der Wert im Feld ist dann nur ein Ausgangspunkt, keine Anzeige. Mit Haken gilt deine Farbe.

Setzt du nur einen eigenen Hintergrund, leitet das Widget den Rest daraus ab: Blasenfläche, Schrift, Nebentext und Linien.

Lesbarkeit: was das Widget nachrechnet

Kunden wählen ihre Markenfarbe, nicht eine lesbare Farbe. Deshalb prüft das Widget jede Kombination aus Schrift und Fläche auf ein Kontrastverhältnis von mindestens 4,5:1. Das ist die Grenze aus WCAG 2.x für normalen Text.

• Schrift auf deiner Markenfarbe (etwa im Sendeknopf) wird automatisch weiß oder fast schwarz gesetzt, je nachdem, was besser lesbar ist.
• Deine Markenfarbe als Textfarbe (Links, Hervorhebungen) wird so lange in kleinen Schritten aufgehellt oder abgedunkelt, bis 4,5:1 erreicht sind. Die Flächen behalten deine Farbe unverändert, also Starter und Sendeknopf.
• Die Blase deiner Besucher ist eine Mischung aus Markenfarbe und Hintergrund. Reicht der Kontrast nicht, nimmt das Widget weniger Markenfarbe hinein.
• Eigene Schrift- und Nebentextfarben laufen durch dieselbe Prüfung, und zwar gegen alle Flächen, auf denen sie stehen.

Was nachgerechnet wurde, sagt dir das Konto direkt unter dem Formular in der Zeile Nachgerechnet, damit die Schrift lesbar bleibt. Ein helles Gelb als Textfarbe sieht im Widget also dunkler aus als eingegeben, und du siehst dort, warum.

Auf deiner Seite kannst du die gemessenen Werte auch selbst abfragen:

ReactiveChat('brandCheck');   // Liste der Paarungen mit gemessenem und gefordertem Kontrast
ReactiveChat('brandTokens');  // die Farben, die tatsächlich im Widget stehen

Hell, dunkel oder wie die Webseite

Unter Einbau → Grunddaten → Farbschema des Widgets wählst du:

• wie die Webseite (sonst wie beim Besucher) – Vorgabe. Das Widget sieht nach, ob deine Seite hell oder dunkel ist, und passt sich an.
• hell – immer hell.
• dunkel – immer dunkel.

Bei der automatischen Wahl schaut das Widget in dieser Reihenfolge:

1. die Hintergrundfarbe deiner Seite in der Bildmitte,
2. die CSS-Angabe color-scheme an <html>, wenn sie genau dark oder light lautet,
3. übliche Umschalter an <html> oder <body>, etwa die Klasse dark oder data-theme="dark",
4. zuletzt die Systemeinstellung des Besuchers.

Schaltet deine Seite zwischen hell und dunkel um, zieht das Widget mit. Es prüft auch beim Öffnen des Fensters neu.

Per Code legst du das Thema am Schnipsel oder zur Laufzeit fest. Diese Angabe hat Vorrang vor der Kontoeinstellung:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' oder 'auto'

Mit setTheme merkt sich das Widget die Wahl im Browser des Besuchers. setTheme('auto') hebt sie wieder auf. Das passt zu einem eigenen Hell-/Dunkel-Schalter auf deiner Seite.

Farben per Code setzen

Für einzelne Seiten, etwa eine Kampagne, kannst du die Marke am Schnipsel oder zur Laufzeit setzen. Die Feldnamen sind:

• primary, accent – Markenfarbe und Akzent,
• bg, surface, text, textDim, line – die fünf Flächen,
• onPrimary – Schriftfarbe auf der Markenfarbe (sonst automatisch),
• radius – 0 bis 28,
• font – CSS-Schriftangabe,
• launcher und stil – siehe Der Starter und Chatfenster.

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand rechnet Kontrast und Ableitungen sofort neu, ohne das Widget neu aufzubauen. null nimmt einen Wert wieder heraus, dann gilt die Vorgabe.

Am Schnipsel heißt das Attribut data-rc-brand und nimmt JSON:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Wichtig – wer gewinnt, Schnipsel oder Konto? Der Schnipsel, den dir das Konto erzeugt, trägt bereits deine Markenfarbe, Radius sowie Form und Größe des Starters. Das ist nur der Startzustand, damit der Starter sofort in der richtigen Farbe erscheint. Sobald das Widget die Einstellungen vom Server hat, gilt das Konto vollständig.

Schreibst du dagegen irgendein weiteres Feld in data-rc-brand, zum Beispiel accent, stil oder eine Beschriftung, gilt die Marke im Schnipsel als eigene Marke dieser Seite. Sie schlägt dann das Konto. Vom Konto gilt auf dieser Seite nur noch die Anzeige „Nur über eigene Links“. Außerdem nimmt die Seite an keinen A/B-Tests teil.

Ändere die Markenfarbe im Konto, kopiere danach den Einbindungsschnipsel unter Einbau neu. Sonst blitzt beim Laden kurz die alte Farbe auf.

Wie der Schnipsel selbst funktioniert und welche weiteren Wege es gibt (window.ReactiveChatSettings, ReactiveChat('boot', …)), steht in der Technischen Integration.

Eigenes CSS

Unter Alle Einstellungen einzeln → Eigenes CSS schreibst du CSS, das zuletzt angewendet wird, nach allen anderen Regeln.

• Höchstens 20.000 Zeichen.
• @import wird entfernt, beim Speichern und im Widget.
• Das CSS wirkt nur im Widget. Es läuft in einem abgeschotteten Bereich (Shadow DOM) und kann deine Seite nicht verändern. Umgekehrt erreicht das CSS deiner Seite das Widget nicht. Hier ist der richtige Ort dafür.
• Zwei Regeln setzt das Widget danach wieder durch: den sichtbaren Fokusrahmen für Tastaturnutzer und den Schließen-Knopf im Kopf. Wer den Weg aus dem Chat wegformatiert, baut eine Falle für Tastaturnutzer.
• Die inneren Klassennamen des Widgets sind keine zugesicherte Schnittstelle. Prüfe dein CSS nach Änderungen in der Vorschau.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

Per Code geht dasselbe mit customCss, etwa in ReactiveChat('boot', { customCss: '…' }) oder als Attribut data-rc-custom-css.

Logo im Kopf des Fensters

Am einfachsten trägst du das Logo im Konto ein: Projekt → Aussehen → Marke, Feld Logo (Adresse). Es erscheint dann im Kopf des Chatfensters, spätestens eine Minute nach dem Speichern.

Per Code über logo legst du zusätzlich Höhe, Alternativtext und Platz fest, etwa das Logo im Starter. Ein Logo im Code hat Vorrang vor dem Kontofeld:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Beispiel GmbH","height":24,"placement":"header"}'
        async></script>

• src – Adresse mit https:// oder ein Bild als data:image/…. Ein kleines SVG als data:-Adresse spart einen Abruf.
• alt – Alternativtext.
• height – Höhe in Pixeln, 12 bis 40, Vorgabe 20.
• placement – header (Kopf, Vorgabe), launcher (im Starter) oder both.

Das Logo auf der Startseite stellst du dagegen bequem im Konto ein, siehe Startseite des Chats.

Wenn etwas anders aussieht als erwartet

• Die Farbe ist dunkler oder heller als eingegeben: Das ist der Kontrastschutz. Die Zeile Nachgerechnet unter dem Formular nennt, was angepasst wurde.
• Änderungen im Konto kommen nicht an: Steht in deinem Schnipsel ein data-rc-brand mit weiteren Feldern? Dann gewinnt der Schnipsel. Nach dem Speichern dauert es außerdem bis zu einer Minute.
• Beim Laden blitzt kurz eine andere Farbe: Kopiere den Schnipsel nach einer Farbänderung neu.
• Die Schrift wirkt nicht: Lädt deine Seite die Schrift? Das Widget lädt keine Schriftdateien.