Aussehen des Chat-Widgets anpassen
Lege Theme, Schrift, Farben, Ecken, Avatar, Launcher, Begrüßungen und Fußzeile des Chat-Widgets fest, öffne es automatisch oder übernimm Logo und Farben.
Im Tab Appearance (Aussehen) legst du fest, wie das Chat-Widget aussieht und was es sagt, bevor Besucher etwas schreiben. Deine Website lädt diese Einstellungen bei jedem Seitenaufruf von intoCHAT. Den Einbettungscode musst du dafür nie ändern.
Wo du es findest
Öffne deinen Agenten und wähle den Tab Appearance. Die Live preview (Live-Vorschau) neben den Einstellungen zeigt das Widget so, wie es auf deiner Website erscheint, mit dem Launcher auf der gewählten Seite. Auf kleineren Bildschirmen tippst du stattdessen auf Preview.
Änderungen gehen erst live, wenn du oben auf der Seite auf Save changes klickst. Lade danach deine Website neu.
An deine Website anpassen
Gib unter Match your website deine Domain ein und klicke auf Detect branding. intoCHAT liest deine Startseite und schlägt ein Logo und vier Farben vor. Es ändert sich nichts, bis du den Vorschlag übernimmst:
- Apply colours & logo setzt alle vier Farben und nutzt das Logo als Avatar des Agenten.
- Colours only setzt nur die Farben und behält deinen Avatar.
Ist deine Markenfarbe zu hell für weiße Schrift, dunkelt der Import sie ab. Das Logo wird kreisrund zugeschnitten, ein quadratisches Bildzeichen funktioniert daher besser als ein breiter Schriftzug. Das Launcher-Icon bleibt unverändert. Eine Abfrage verbraucht kein Crawl-Guthaben.
Texte
| Feld | Funktion |
|---|---|
| Welcome message (Begrüßung) | Die erste Nachricht des Agenten in jedem neuen Chat, bis zu 500 Zeichen. Wenn leer: Hello! How can I help you today? Mit Add another message fügst du bis zu 3 weitere gleicher Länge hinzu. Jede erscheint als eigene Sprechblase nach der ersten. |
| Suggested questions (Fragevorschläge) | Bis zu 6 Fragen mit je bis zu 120 Zeichen. Sie stehen als Buttons über dem Eingabefeld, bis Besucher ihre erste Nachricht senden. Ein Klick sendet die Frage. |
| Launcher tooltip | Der Hinweis neben dem Launcher. Er erscheint eine Sekunde nach dem Laden, verschwindet nach drei Sekunden und zeigt sich wieder, wenn man mit der Maus darüberfährt. Wenn leer: „Chat with“ und der Name deines Agenten, etwa „Chat with Example Bikes“. |
| Input placeholder (Platzhalter) | Der Hinweistext im Eingabefeld. Wenn leer: Type your message... |
| Footer text (Fußzeile) | Kleingedrucktes unter dem Eingabefeld, etwa ein Datenschutzhinweis, bis zu 300 Zeichen. Webadressen, die mit http:// oder https:// beginnen, werden zu Links, die sich in einem neuen Tab öffnen. Der Text steht über dem Hinweis „Powered by intoCHAT“. |
Die Standardtexte sind englisch. Ist deine Website deutschsprachig, trag eigene Texte ein. Der Agent antwortet zwar in der Sprache der Besucher, diese Texte erscheinen aber genau so, wie du sie schreibst. Auf mehrsprachigen Websites hältst du sie am besten kurz und in deiner Hauptsprache.
Bilder
- Agent avatar erscheint neben jeder Nachricht des Agenten, nicht in der Kopfzeile. Ohne Avatar steht dort „AI“. Nimm ein quadratisches Bild mit mindestens 64 × 64 Pixeln.
- Launcher icon ersetzt das Standard-Icon mit den Funkelsternen. Ein eigenes Icon füllt den ganzen 56-Pixel-Launcher aus, die Launcher-Farbe ist dann nicht mehr zu sehen.
Beide nehmen PNG, JPG, GIF oder WebP bis 5 MB an.
Stil
Unter Style legst du Theme, Schrift und Ecken des Chatfensters fest.
| Theme | Was Besucher sehen |
|---|---|
| Light (hell) | Ein weißes Fenster, wie das Widget schon immer aussah. Die Voreinstellung. |
| Dark (dunkel) | Ein dunkles Fenster. |
| Auto | Hell oder dunkel, je nach Geräteeinstellung der Besucher. Ändern Besucher die Einstellung bei offenem Chat, wechselt das Fenster mit. |
Im dunklen Theme bleiben deine Farben für Kopfzeile, Besuchernachrichten und Launcher so, wie du sie gesetzt hast. Die Nachrichten des Agenten werden nur dann dunkelgrau, wenn sie noch das voreingestellte Hellgrau nutzen; eine selbst gewählte Farbe bleibt. Bei Auto hat die Live preview die Buttons Light und Dark, damit du beide prüfen kannst.
Font (Schrift) gilt für alles im Chatfenster: System default, Inter, Roboto, Open Sans, Lato, Poppins oder Serif (Georgia). System default und Serif nutzen Schriften, die schon auf dem Gerät der Besucher sind. Die Webfonts liefert intoCHAT aus, und Besucher laden nur die Schrift, die du wählst. Tooltip und Begrüßungs-Pop-up auf deiner Seite behalten die Systemschrift.
Corners (Ecken) legt fest, wie rund Sprechblasen, Eingabefeld, Senden-Button, Fragevorschläge und eigene Buttons sind: Sharp (eckig), Soft (leicht gerundet) oder Rounded (rund). Soft ist die Voreinstellung und entspricht dem Aussehen des Widgets, bevor es die Einstellung gab.
Farben
Starte unter Colours mit einer Vorlage (Ink, Ocean, Forest, Plum, Ember) und passe dann jedes Feld mit dem Farbwähler oder einem Hex-Wert an.
| Farbe | Wofür |
|---|---|
| Header | Die Kopfzeile des Chats mit dem Namen des Agenten |
| Launcher bubble | Der runde Launcher und der Senden-Button |
| Visitor messages | Hintergrund der Nachrichten von Besuchern |
| Agent messages | Hintergrund der Nachrichten des Agenten |
Position
Unter Placement stellst du Side of the screen auf links (left) oder rechts (right). Der Launcher sitzt 20 Pixel von dieser unteren Ecke entfernt. Am Desktop öffnet sich der Chat darüber als Fenster mit 380 × 600 Pixeln. Auf Bildschirmen bis 768 Pixel Breite füllt der Chat den ganzen Bildschirm. Das Chatfenster hat in der Kopfzeile einen Schließen-Button, und ein weiterer Klick auf den Launcher schließt es ebenfalls.
„Powered by intoCHAT“ entfernen
Der Schalter Show "Powered by intoCHAT" steuert den kleinen Hinweis unter dem Eingabefeld. Im Free-Plan ist der Schalter fest eingeschaltet, und der Link Remove the intoCHAT credit on any paid plan darunter öffnet deine Abrechnungseinstellungen. In jedem bezahlten Plan kannst du ihn ausschalten. Mehr dazu unter Preise.
Launcher-Verhalten
Unter Launcher behaviour holen zwei optionale Einladungen Besucher in den Chat, ohne auf einen Klick zu warten. Jede hat einen Schalter und eine Verzögerung von 0 bis 300 Sekunden auf der Seite.
- Show the welcome message above the launcher zeigt deine Begrüßungen als kleine Sprechblasen neben dem Launcher, nach 5 Sekunden, wenn du die Verzögerung nicht änderst. Neben der ersten steht dein Avatar, lange Nachrichten werden nach vier Zeilen abgeschnitten. Ein Klick auf eine Sprechblase öffnet den Chat. Der Button × blendet sie aus.
- Open the chat automatically öffnet das Chatfenster von selbst, nach 10 Sekunden, wenn du die Verzögerung nicht änderst. Auf Bildschirmen bis 768 Pixel Breite entfällt das, weil der Chat dort den ganzen Bildschirm bedecken würde.
Ein Besuch dauert, bis Besucher den Browser-Tab schließen. Das automatische Öffnen passiert höchstens einmal pro Besuch. Das Pop-up erscheint auf jeder neuen Seite wieder, bis Besucher es ausblenden. Keines von beiden erscheint für den Rest des Besuchs, sobald Besucher den Chat geöffnet oder geschlossen, das Pop-up ausgeblendet haben oder sich der Chat automatisch geöffnet hat. Sind beide eingeschaltet, kommt die kürzere Verzögerung zuerst, und das Öffnen des Chats entfernt ein sichtbares Pop-up.
Häufige Probleme
- Änderungen erscheinen nicht auf deiner Website. Klicke auf Save changes und lade die Seite neu. Das Widget lädt seine Einstellungen bei jedem Seitenaufruf frisch.
- Die Launcher-Farbe ändert sich nicht. Ein Launcher-Icon ist gesetzt und verdeckt die Farbe. Entferne das Icon, um die Farbe wieder zu nutzen.
- „Logo could not be imported“. Die Farben wurden trotzdem übernommen. Lade unter Agent avatar selbst ein Logo hoch.
- Pop-up oder automatisches Öffnen erscheint nicht. Beides endet für den Rest des Besuchs, sobald der Chat geöffnet, geschlossen oder ausgeblendet wurde, das automatische Öffnen außerdem, nachdem es einmal gelaufen ist. Öffne deine Website zum erneuten Testen in einem neuen Tab. Auf Bildschirmen bis 768 Pixel Breite öffnet sich der Chat nie automatisch.
Als Nächstes: Widget per Script-Tag einbinden oder andere Plattformen.