Startseite des Chats: Begrüßung, Logo, Kacheln und Reiter

Die Startseite ist das Erste, was ein Besucher sieht, wenn er den Chat öffnet: eine Begrüßung, dein Logo, ein farbiger Kopf und bis zu zehn Kacheln. Darunter wechselt er zwischen den Reitern Start, Nachrichten und Hilfe. Ohne Startseite öffnet sich der Chat direkt im Gespräch.

Du findest die Einstellungen unter /app/projects/{id} im Reiter Aussehen, Abschnitt Startseite des Widgets.

Die Live-Vorschau

Neben dem Formular läuft das echte Widget, gefüttert aus deinen Eingaben. Was du tippst, erscheint sofort in der Vorschau. Gespeichert ist damit noch nichts – erst der Knopf Speichern übernimmt die Änderung. Nach dem Speichern dauert es bis zu einer Minute, bis deine Besucher sie sehen.

Der Hilfe-Reiter fehlt in der Vorschau: Er hängt an den veröffentlichten Artikeln deines Help-Centers, und die holt das Widget von deiner eigenen Domain. Auf deiner Website ist er da.

Die Schalter

• Startseite zeigen – Aus (Vorgabe): Der Chat öffnet sich direkt im Gespräch, es gibt keine Reiterzeile. An: Der Chat beginnt auf der Startseite.
• Hilfe-Reiter zeigen – Zeigt die veröffentlichten Artikel deines Help-Centers zum Durchsuchen. Der Reiter erscheint nur, wenn das Help-Center eine Adresse hat und mindestens ein Artikel veröffentlicht ist. Wie du das Help-Center einrichtest, steht im Produkt-Handbuch.
• Letzte Nachricht auf der Startseite zeigen – An (Vorgabe): Wiederkehrende Besucher sehen, wo sie stehengeblieben sind, und kommen mit einem Klick zurück ins Gespräch.
• Knopf „Mit dem Team sprechen“ unter dem Eingabefeld zeigen – An (Vorgabe). Der Knopf erscheint, solange der KI-Assistent antwortet. Ist niemand aus deinem Team online, heißt er „Nachricht ans Team“.

Logo, Farben und Begrüßung

• Logo auf der Startseite – eine Adresse, die mit https:// beginnt, oder ein Bild als data:image/…. Höchstens 255 Zeichen. Leer heißt: kein Logo, dann steht nur die Begrüßung.
• Verlauf oben, von und bis – zwei Farben für den farbigen Kopf der Startseite. Ohne Angabe nimmt das Widget deine Markenfarbe (siehe Farben, Schrift und Thema).
• Begrüßung – die große Zeile oben. Leer heißt: unser übersetzter Text („Hallo 👋“).
• Zeile darunter – die kleinere Zeile. Leer heißt: „Wie können wir helfen?“ in der Sprache des Besuchers.

Begrüßung, Zeile darunter und die Texte der Kacheln fasst du in der Vorgabesprache des Projekts (Einbau → Grunddaten). Höchstens 400 Zeichen je Text. Eine eigene Übersetzung je Sprache gibt es dafür nicht: Was du einträgst, sehen auch Besucher, deren Widget in einer anderen Sprache läuft. Schreib die Startseite deshalb in der Sprache, die die meisten deiner Besucher lesen. Lässt du Begrüßung oder Zeile darunter leer, erscheint unser Text in der Sprache des Besuchers.

Wie der Kopf gestaltet ist (Verlauf, flach oder Glas) und wie dicht die Startseite wirkt, stellst du unter Aussehen → Marke → Stil ein, siehe Chatfenster: Stil, Größe und Seitenleiste.

Kacheln

Kacheln sind große Schaltflächen auf der Startseite. Du kannst bis zu zehn anlegen. Eine Kachel ohne Überschrift wird nicht gezeigt – so löschst du sie auch wieder: Überschrift leeren und speichern.

Jede Kachel hat:

• Verhalten – was ein Klick tut:
• ins Gespräch – öffnet das Gespräch. Steht bei Ziel ein Satz, wird er dem Besucher ins Eingabefeld geschrieben. Abgeschickt wird er nicht.
• Link öffnen – öffnet die Adresse bei Ziel. Sie muss mit https:// beginnen, sonst wird nicht gespeichert.
• Hilfe öffnen – wechselt in den Hilfe-Reiter.
• Nachricht hinterlassen – öffnet das Formular für eine Nachricht per E-Mail.
• Überschrift – Pflicht, sonst erscheint die Kachel nicht.
• Zeile darunter – optional.
• Ziel – je nach Verhalten die Adresse oder der vorbelegte Satz, höchstens 200 Zeichen.

Die ganze Startseite (Kacheln, Texte und Werbekarte zusammen) darf beim Speichern höchstens 16 KB groß sein. Zehn Kacheln mit Überschrift und Unterzeile liegen weit darunter. Wird es zu viel, nennt das Konto den Grund, statt still etwas wegzulassen.

Werbekarte

Auf der Startseite und/oder oben im Gespräch kannst du eine Karte für dein eigenes Angebot zeigen, etwa für deinen Bezahltarif. Sie steht unter Aussehen → Werbekarte und hat ihre eigene Anleitung: Die Werbekarte im Chat. Für den Ort „Startseite“ muss die Startseite eingeschaltet sein.

Einen Reiter beim Öffnen wählen

Welcher Reiter beim Öffnen vorne liegt, kannst du je Link oder Aufruf bestimmen – mit data-rc-tab oder der Angabe tab:

<a href="#rc-open" data-rc-tab="help">Hilfeartikel durchsuchen</a>

ReactiveChat('open', { tab: 'home' });

Erlaubt sind home (Startseite), msg (Gespräch) und help (Hilfe). Gibt es den Reiter nicht, öffnet sich der Chat ganz normal. Mehr dazu unter Chat über einen eigenen Link oder Knopf öffnen.

Wenn etwas nicht erscheint

• Keine Reiterzeile: Ist Startseite zeigen angehakt und gespeichert?
• Kein Hilfe-Reiter: Hat dein Help-Center eine Adresse und mindestens einen veröffentlichten Artikel?
• Kachel fehlt: Hat sie eine Überschrift?
• Logo fehlt: Beginnt die Adresse mit https:// oder data:image/?

Die Texte der Reiter („Start“, „Nachrichten“, „Hilfe“) und der eingebauten Kacheln kannst du unter Texte und Sprachen ändern.