Chat-Oberfläche konfigurieren

Farben, Fensterform, Position und Begrüßungstext des Chat-Widgets an Ihr Branding anpassen.

Das Chat-Widget lässt sich optisch an Ihre Website anpassen, ohne den Einbindungscode zu ändern.

Farben anpassen

Unter Kanäle Chat-Widget Design legen Sie Markenfarbe und Logo fest, dazu Form und Schatten des Chat-Fensters sowie das Aussehen des Chat-Buttons. Änderungen sind sofort in der Live-Vorschau daneben sichtbar.

Wer nicht bei Null anfangen möchte, startet mit einer der vier Design-Vorlagen: Ruhig, Rund, Auffällig oder Kantig. Sie ändern nur Form, Größe und Stil. Ihre Markenfarbe und Ihre Texte bleiben, wie Sie sie eingestellt haben.

Form und Breite des Chat-Fensters

Für das Fenster, das sich beim Klick auf den Button öffnet, stehen zwei Formen zur Wahl.

  • Schwebendes Fenster: Der Chat liegt als Karte über der unteren Ecke Ihrer Seite. Die Seite bleibt daneben sichtbar.
  • Seitliche Schublade: Der Chat reicht vom oberen bis zum unteren Bildschirmrand und schiebt sich von der Seite herein, auf der Ihr Chat-Button steht. Die Seite dahinter wird grau hinterlegt, ein Klick daneben schließt den Chat wieder.

Die Schublade lohnt sich, wenn im Chat längere Inhalte stehen: ein Terminkalender, ein Formular oder eine Liste mit Produkten. Für kurze Fragen wirkt das schwebende Fenster zurückhaltender, weil die Seite daneben bedienbar bleibt.

Die Breite stellen Sie in vier Stufen von schmal bis sehr breit ein, unabhängig von der gewählten Form. Auf dem Smartphone füllt der Chat immer den Bildschirm, dort wirkt die Einstellung nicht.

Dazu kommen die Ecken von eckig bis rund und der Schatten von keinem bis tief. Die Ecken gelten auch innerhalb des Fensters, etwa für die Sprechblasen und das Logo im Kopfbereich, damit ein eckig eingestelltes Widget nicht außen kantig und innen rund ist.

Aussehen der Startfragen

Die Startfragen über dem Eingabefeld bekommen ihren eigenen Stil: neutral in Grau, dezent oder kräftig in Ihrer Markenfarbe, nur als Umriss oder in zwei frei gewählten Farben für Fläche und Rand. Dazu stellen Sie Ecken und Größe ein. Bei den Ecken bedeutet Wie das Fenster, dass sich die Fragen automatisch mitändern, sobald Sie die Ecken des Fensters anpassen.

Wählen Sie eine eigene Fläche, zeigt go33 darunter, wie gut die Schrift darauf lesbar ist. Ab 4,5:1 gilt der Kontrast als ausreichend, darunter warnt der Hinweis. Die Schriftfarbe wird dabei automatisch gesetzt, hell auf dunklen Flächen und dunkel auf hellen.

Folgefragen statt Startfragen

Über dem Eingabefeld stehen zunächst Ihre Startfragen. Schalten Sie Folgefragen vorschlagen ein, tritt nach jeder Antwort etwas anderes an ihre Stelle: zwei bis drei Fragen, die sich aus genau dieser Antwort ergeben. Ein Klick darauf sendet sie wie eine getippte Nachricht.

Ihre Startfragen bleiben erhalten. Sie erscheinen weiterhin zu Beginn eines Gesprächs und immer dann, wenn sich aus einer Antwort nichts Sinnvolles ergibt.

Jede Antwort, unter der Vorschläge erscheinen, kostet einen zusätzlichen Credit. Kommen keine zustande, wird auch nichts berechnet.

Nicht vorgeschlagen wird dort, wo eine Frage den Besucher von etwas wegführen würde: unter einem Formular oder einer Terminbuchung, die noch auszufüllen sind, und wenn das Gespräch gerade an einen Menschen übergeben wurde.

Eingabefeld

Die Zeile, in die Besucher tippen, lässt sich getrennt vom Rest einstellen: Ecken von eckig bis Pille, Rand dezent, deutlich, ohne oder in einer eigenen Farbe, dazu die Füllung in Weiß oder einer eigenen Farbe.

Der farbige Ring, der beim Tippen um das Feld erscheint, trägt immer Ihre Markenfarbe. Er zeigt Besuchern, wo sie gerade schreiben, und bleibt deshalb bewusst fest.

Chat-Button gestalten

Der Button, über den Besucher den Chat öffnen, lässt sich in Größe (klein, mittel, groß), Form (Kreis, abgerundet, quadratisch) und Position (rechts oder links unten) einstellen. Zwei Regler bestimmen den Abstand zum Seitenrand. Damit rücken Sie den Button aus dem Weg, wenn dort bereits ein Cookie-Hinweis oder ein anderes festes Element Ihrer Website sitzt.

Die Markenfarbe steht auch hier zur Auswahl, damit Sie sie nicht im Kopfbereich suchen müssen. Es ist derselbe Wert an beiden Stellen: Was Sie hier wählen, färbt ebenso den Kopf des Chat-Fensters.

Der Glüh-Effekt legt einen farbigen Schein um den Button. Unschärfe, Intensität, Richtung und Farbe stellen Sie einzeln ein. Pulsieren lässt den Button in Wellen aufleuchten, entweder dauerhaft oder für zwei, drei oder fünf Durchläufe.

Geht der Button auf einem dunklen oder farbigen Hintergrund unter, hilft ein Rahmen. Sie legen die Stärke fest (1 bis 3 Pixel), die Farbe und den Abstand zwischen Button und Rahmen. Beim Einschalten übernimmt der Rahmen Ihre Markenfarbe, danach können Sie ihm eine eigene geben. Bleibt der Abstand bei 0, sitzt der Rahmen direkt an der Fläche. Mit ein paar Pixeln entsteht daraus ein freistehender Ring.

Begrüßungstext und Chat-Vorschläge

Ein individueller Begrüßungstext sowie 2 bis 3 vorgeschlagene Einstiegsfragen helfen Besuchern, schneller mit dem Assistenten zu interagieren.

Logo und Avatar

Sofern Ihr Paket das umfasst, lässt sich ein eigenes Logo oder Avatar-Bild hochladen, das im Chat-Header angezeigt wird. Dazu können Sie eine Adresse hinterlegen, auf die das Logo im Chat verlinkt, etwa Ihre Startseite.

Das eigene Logo gehört zu einem höheren Paket. Zusammen mit dem abgeschalteten go33-Hinweis darunter ergibt das den Auftritt unter Ihrer eigenen Marke. In den übrigen Paketen trägt das Widget Ihre Markenfarbe, aber kein Logo; das Feld ist dort gesperrt. In der Tarifübersicht sehen Sie, was Ihr Paket umfasst.

Hinweis auf go33 in der Fußzeile

Unter dem Chat steht ein kurzer Hinweis auf go33. Ab einem höheren Paket lässt er sich abschalten, dann trägt das Widget ausschließlich Ihre Marke. In der Tarifübersicht sehen Sie, ab welchem Paket das gilt.

Bilder im Chat

Ist unter KI-Einstellungen ein Vision-fähiges Modell ausgewählt, erscheint im Chat-Widget zusätzlich eine Büroklammer neben dem Eingabefeld. Besucher können darüber ein Foto anhängen, etwa ein Bild eines Produkts oder einer Fehlermeldung, und der Assistent bezieht es in seine Antwort mit ein.

Ist kein Vision-fähiges Modell ausgewählt, bleibt die Büroklammer ausgeblendet. Die Text-Antworten funktionieren davon unabhängig wie gewohnt.

Prüfen Sie das Widget nach Design-Änderungen auf einem mobilen Endgerät. Die meisten Website-Besucher interagieren über das Smartphone mit dem Chat.