Passen Sie das Erscheinungsbild, Verhalten und die Funktionalität Ihres Widgets über das Konfigurationssystem an.
Alle Widget-Einstellungen werden über die Widget-Konfiguration in Ihrem Dashboard verwaltet. Die Konfiguration umfasst Erscheinungseinstellungen, Verhaltensoptionen und Inhaltsanpassungen.
Betrachten Sie die Konfiguration als die DNA Ihres Widgets — sie definiert alles von Farben und Schriftarten bis hin zu Gesprächsflüssen und ersten Nachrichten. Das Beste daran? Änderungen an Ihrer Konfiguration treten sofort in Kraft, ohne dass Änderungen am Code auf Ihrer Website erforderlich sind.
🎨 Live-Anpassung
Verwenden Sie unseren visuellen Konfiguration-Editor im Dashboard, um Ihre Änderungen in Echtzeit zu sehen. Es ist nicht nötig zu raten, wie Farben aussehen oder wie Schaltflächen sich verhalten — alles vor der Veröffentlichung in der Vorschau anzeigen.
Das visuelle Erscheinungsbild ist entscheidend, um das Widget wie einen natürlichen Teil Ihrer Website wirken zu lassen. Unsere Erscheinungseinstellungen geben Ihnen die vollständige Kontrolle über jeden visuellen Aspekt.
Wählen Sie Farben, die mit Ihrer Markenidentität übereinstimmen. Alle Farbwerte sollten im Hex-Format vorliegen (z. B. #FF5733).
Pro-Tipp: Verwenden Sie ein Farbkontrastprüfwerkzeug, um sicherzustellen, dass Ihr Text gegen Ihre gewählten Hintergründe lesbar bleibt. Dies ist besonders wichtig für die Einhaltung der Barrierefreiheit.
Unter Erscheinung können Sie eine separate helle und dunkle Farbpalette festlegen — jeder Modus hat seine eigenen Voreinstellungen und Farben. Welches ein Besucher sieht, wird beim Einbetten mit data-theme="light|dark|system" (system folgt dem Gerät des Besuchers) oder zur Laufzeit mit CompaninWidget.setTheme() ausgewählt. Lassen Sie die dunkle Palette leer, um sie automatisch von Ihren hellen Farben abzuleiten.
Größen Sie Ihr Widget angemessen für Ihren Anwendungsfall und Ihr Publikum. Größere Dimensionen bieten mehr Gesprächskontext, während kleinere Dimensionen weniger aufdringlich wirken.
Mobile Überlegung: Das Widget passt sich automatisch auf mobilen Geräten an, aber testen Sie Ihre Konfiguration auf verschiedenen Bildschirmgrößen, um sicherzustellen, dass alle Benutzer eine gute Erfahrung haben.
Verhaltenseinstellungen steuern, wie das Widget mit Benutzern interagiert und auf verschiedene Kontexte reagiert.
⚠️ Empfehlung
Die meisten Websites sollten mit dem Widget zusammengeklappt beginnen (<code>start_open: false</code>), um nicht aufdringlich zu sein. Benutzer, die Hilfe benötigen, werden natürlich auf die Schaltfläche klicken. Für dedizierte Hilfe-/Unterstützungsseiten kann es vorteilhaft sein, offen zu beginnen.
Die Begrüßungsnachricht ist das Erste, was Benutzer sehen, wenn sie das Widget öffnen. Machen Sie sie einladend, klar und handlungsorientiert. Sie können interaktive Schaltflächen einfügen, um Benutzer zu häufigen Aufgaben zu leiten.
Eine gute Begrüßungsnachricht sollte:
Beispiel: "Hallo! 👋 Ich bin hier, um bei Fragen zu unseren Produkten, Preisen oder Konten zu helfen. Wie kann ich Ihnen heute helfen?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Gesprächsflüsse sind vordefinierte Pfade, die Benutzer durch häufige Szenarien führen. Sie sind perfekt für FAQs, Fehlerbehebung oder mehrstufige Prozesse wie Rückgaben oder Buchungen.
Flüsse werden durch spezifische Schlüsselwörter oder Schaltflächenklicks ausgelöst. Wenn sie ausgelöst werden, zeigen sie eine Reihe von Antworten mit optionalen Aktionsschaltflächen an und schaffen ein geführtes Gesprächserlebnis, ohne dass eine KI-Verarbeitung erforderlich ist.
Best Practices für Flüsse:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Konfigurieren Sie Texte für mehrere Sprachen:
Fügen Sie benutzerdefiniertes CSS für erweiterte Gestaltung hinzu:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Konfigurieren Sie externe API-Endpunkte für erweiterte Funktionalität: