Widget-Anpassung

Widget-Anpassung

Passen Sie das Erscheinungsbild Ihres Chat-Widgets an Ihre Marke und Ihr Website-Design an.

Einstellungen

Alle Widget-Anpassungsoptionen finden Sie unter Einstellungen → Kanäle → Web. Wählen Sie Ihren Web-Kanal und öffnen Sie die Registerkarte Erscheinungsbild.

---

Designfarbe

Die Designfarbe wird einheitlich im gesamten Widget angewendet:

• Hintergrund der Starter-Schaltfläche
• Hintergrund der Kopfzeile
• Farbe der Senden-Schaltfläche
• Hervorhebungsfarbe für Links
• Hintergrund der Benutzer-Nachrichtenblase

Wählen Sie eine Farbe, die zu Ihrer Markenidentität passt und einen guten Kontrast zu weißem Text gewährleistet.

---

Sekundärfarbe

v1.6.11

Eine optionale Akzentfarbe für sekundäre UI-Elemente wie Hervorhebungen und Symbole. Wenn nicht festgelegt, wird die Sekundärfarbe automatisch durch eine Farbtonverschiebung der Primärfarbe um 10° abgeleitet.

Standard: Automatisch aus der Primärfarbe abgeleitet (Farbton + 10°)

Format: 6-stelliger Hex-Wert (#RRGGBB)

Über das Dashboard: Unter Einstellungen → Kanäle → Web → Customizer → Sekundärfarbe festlegen.

Über den Einbettungscode: secondaryColor in der Design-Konfiguration übergeben:

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      secondaryColor: "#0062cc"
    }
  };
</script>

---

Willkommensnachricht

Die Willkommensnachricht ist der erste Text, den Kunden sehen, wenn sie das Widget öffnen. Halten Sie sie freundlich und erläutern Sie klar, womit der Bot helfen kann.

Beispiele:

1. „Hallo! Wie kann ich Ihnen heute helfen?”
2. „Willkommen beim Acme-Support. Fragen Sie mich alles über unsere Produkte und Dienstleistungen.”
3. „Hallo! Ich bin hier, um zu helfen. Womit kann ich Ihnen behilflich sein?”

---

Widget-Position

Position	Einstellungswert	Wann zu verwenden
Unten rechts	bottom-right (Standard)	Standardplatzierung, funktioniert für die meisten Websites
Unten links	bottom-left	Wenn die rechte Seite mit anderen Elementen kollidiert

---

Avatar

v1.6.4

Zeigen Sie einen benutzerdefinierten Avatar in der Widget-Kopfzeile und dem Startbildschirm an, indem Sie eine Bild-URL angeben.

Über das Dashboard: Legen Sie die Avatar-URL unter Einstellungen → Kanäle → Web → Customizer → Avatar-URL fest.

Über den Einbettungscode: Übergeben Sie avatarUrl in der Design-Konfiguration:

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      avatarUrl: "https://example.com/your-logo.png"
    }
  };
</script>

Anforderungen:

• Muss eine https://-URL sein (http-, data:- und javascript:-URLs werden aus Sicherheitsgründen abgelehnt)
• Empfohlene Größe: 128 × 128 Pixel (quadratisch)
• Unterstützte Formate: PNG, JPG, WebP, SVG
• Wenn die URL ungültig ist oder das Bild nicht geladen werden kann, wird das Standardsymbol angezeigt

---

Starter-Symbol

v1.6.11

Ersetzen Sie das Standard-Chat-Blasen-SVG durch ein benutzerdefiniertes Symbol auf der Starter-Schaltfläche.

Standard: Integriertes Chat-Blasen-SVG-Symbol

Format: https://-URL zu einem Bild (http:// wird aus Sicherheitsgründen abgelehnt)

Empfohlen: 28 × 28 Pixel, PNG oder SVG mit Transparenz

Über das Dashboard: Unter Einstellungen → Kanäle → Web → Customizer → Blasen-Symbol festlegen.

Über den Einbettungscode: bubbleIcon in der Design-Konfiguration übergeben:

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      bubbleIcon: "https://example.com/your-icon.png"
    }
  };
</script>

Anforderungen:

• Muss https:// verwenden (http:// und andere Protokolle werden aus Sicherheitsgründen abgelehnt)
• Wenn die URL nicht geladen werden kann, wird automatisch das Standard-SVG-Symbol angezeigt

---

Begrüßungsmodus

v1.6.2

Die Begrüßungsnachricht unterstützt drei Sprachmodi. Gehen Sie zu Einstellungen → Kanäle → Web → Customizer und suchen Sie den Abschnitt Begrüßungsmodus.

Statisch

Jedem Besucher wird unabhängig von der Sprache derselbe Begrüßungstext angezeigt. Dies ist der Standardmodus.

Geben Sie eine einzelne Begrüßung in das Textfeld ein. Beispiel: „Hallo! Wie kann ich Ihnen heute helfen?”

Besucher abgleichen (Spracheinstellung)

Zeigen Sie eine andere Begrüßung für jede Sprache an. Das Widget liest die erkannte Sprache des Besuchers aus und zeigt die passende Begrüßung an.

1. Wählen Sie den Modus Besucher abgleichen.
2. Für jede der 15 unterstützten Spracheinstellungen wird ein Feld angezeigt.
3. Tragen Sie den Begrüßungstext für jede Sprache ein, die Sie unterstützen möchten.
4. Lassen Sie das Feld einer Spracheinstellung leer, um für diese Sprache auf die statische Begrüßung zurückzugreifen.

Beispielkonfiguration:

• Thailändisch: “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
• Englisch: “Hi! How can I help you today?”
• Japanisch: “こんにちは！何かお手伝いできますか？“

Org-Hauptsprache

Die Begrüßung wird unabhängig von der Sprache des Besuchers immer in der Hauptantwortsprache der Organisation angezeigt. Dieser Modus liest die unter KI-Einstellungen → Hauptantwortsprache festgelegte Sprache aus.

Verwenden Sie Org-Hauptsprache, wenn Ihr Team in einer Sprache arbeitet und alle Begrüßungen einheitlich sein sollen.

---

Sprachauswahl

v1.6.2

Die Sprachauswahl fügt ein Globus-Symbol (🌐) zur Widget-Kopfzeile hinzu, damit Besucher ihre Sprache explizit auswählen können. Sie ist standardmäßig deaktiviert.

Zum Aktivieren: Schalten Sie unter Einstellungen → Kanäle → Web → Customizer die Option Sprachauswahl anzeigen auf EIN.

Wenn ein Besucher eine Sprache aus dem Dropdown-Menü auswählt:

• Alle KI-Antworten werden für die Sitzung auf diese Sprache festgelegt
• Die Festlegung überschreibt die automatische Erkennung, auch wenn der Besucher in einer anderen Sprache tippt
• Die Widget-Benutzeroberfläche wechselt zur ausgewählten Sprache

Weitere Informationen finden Sie unter Web-Widget — Sprachauswahl.

---

Standardsprache

v1.6.8

Legen Sie eine Standardsprache für das Widget fest, damit Besucher die Benutzeroberfläche in Ihrer bevorzugten Spracheinstellung sehen, bevor eine automatische Erkennung stattfindet. Gehen Sie zu Einstellungen → Kanäle → Web → Customizer → Standardsprache und wählen Sie aus dem Dropdown-Menü.

Die Sprachprioritätskette lautet:

1. Diese Sprache erzwingen (KI-Einstellungen) — überschreibt alles, wenn aktiviert
2. Explizite Auswahl des Besuchers (über Sprachauswahl, sofern aktiviert)
3. Standardsprache — diese Einstellung
4. Einbettungscode-Spracheinstellung — der locale-Wert im Einbettungscode
5. Thailändisch — Fallback, wenn nichts anderes festgelegt ist

Wählen Sie „Keine — Einbettungscode-Konfiguration verwenden”, um diese Einstellung zu überspringen und stattdessen den locale-Wert des Einbettungscodes zu verwenden.

Hinweis

Die Standardsprache wirkt sich nur auf die Sprache der Widget-Benutzeroberfläche aus. Die Sprache der KI-Antworten wird separat in den KI-Einstellungen gesteuert.

---

Dunkelmodus & CSS-Variablen

v1.6.8

Das Widget unterstützt einen integrierten Dunkelmodus-Umschalter, den Besucher über die Chat-Kopfzeile aktivieren können. Die gesamte Widget-Benutzeroberfläche wird mithilfe von benutzerdefinierten CSS-Eigenschaften gestaltet, was ein einheitliches Erscheinungsbild in beiden Modi gewährleistet.

Wichtige CSS-Variablen

Variable	Beschreibung
--cw-primary	Primäre Markenfarbe (aus Ihrer Designfarbeneinstellung)
--cw-primary-rgb	RGB-Komponenten der Primärfarbe, für Transparenzeffekte verwendet
--cw-bg	Hintergrundfarbe des Widgets
--cw-bg-secondary	Sekundärer Hintergrund (Eingabefelder, Formularelemente)
--cw-surface	Oberflächenfarbe für Karten, Tooltips, Zitatausschnitte
--cw-text	Primäre Textfarbe
--cw-text-secondary	Sekundäre/gedämpfte Textfarbe
--cw-border	Rahmenfarbe für Trennlinien und Eingabeumrandungen

Wenn der Dunkelmodus umgeschaltet wird, wendet das Widget die Klasse cw-dark oder cw-light auf den Stammcontainer an, und alle CSS-Variablen werden automatisch aktualisiert. Die Verlaufskopfzeile, Nachrichtenblasen, das Kontaktformular und die Zitatschaltflächen berücksichtigen den aktuellen Modus.

Hinweis

Der Dunkelmodus ist ein besucherseitiger Umschalter — er wird nicht sitzungsübergreifend gespeichert. Das Widget verwendet standardmäßig den Hellmodus, es sei denn, der Besucher aktiviert den Dunkelmodus während seiner Chat-Sitzung.

---

Vorschau

Verwenden Sie nach dem Vornehmen von Änderungen den Bereich Live-Vorschau auf der rechten Seite der Einstellungsseite, um genau zu sehen, wie das Widget auf Ihrer Website aussehen wird — bevor Sie speichern.

---

Tipps

Tipp

• Testen Sie Ihr Widget sowohl auf dem Desktop als auch auf Mobilgeräten, um sicherzustellen, dass es keine wichtigen Seiteninhalte verdeckt.
• Verwenden Sie eine kontrastreiche Designfarbe, damit das Widget für alle Benutzer zugänglich bleibt.
• Halten Sie die Willkommensnachricht kurz — ein oder zwei Sätze sind ideal. Kunden möchten ihre Frage stellen, keinen Absatz lesen.