7. Customize

Dieser Leitfaden beschreibt die „Advanced“-Einstellungen im Anpassungsbereich Ihres Chatbot-Widgets, die es Ihnen ermöglichen, das Verhalten und die Funktionalität des Chatbots weiter zu verfeinern.

Anpassung des Erscheinungsbildes Ihres Chatbots

Die Anpassungsseite Ihres Chatbots ist in verschiedene Tabs unterteilt: Content, Appearance, Advanced, Offline Message und Custom CSS. In diesem Leitfaden konzentrieren wir uns auf den Content-Tab, der es Ihnen ermöglicht, den Text zu ändern, den Benutzer sehen, wenn sie mit dem Chatbot interagieren.

Content-Tab

Im Content-Tab können Sie den Text anpassen, der den Benutzern angezeigt wird, wenn sie mit dem Chatbot interagieren.

Überschrift (Heading)

• Überschrift eingeben – Geben Sie eine Überschrift in das Feld „Heading“ ein. Dieser Text ist das Erste, was die Benutzer sehen, normalerweise oben im Chat-Widget. Beispiel: „Ich bin Ihr AI-Assistent.“

Beschreibung (Description)

• Beschreibung hinzufügen – Geben Sie eine Beschreibung in das Feld „Description“ ein. Diese sollte den Benutzern mehr Kontext über die Fähigkeiten des Chatbots geben, z. B. „Fragen Sie mich alles. Ich versuche, auf Basis der Daten dieser Website zu antworten.“

Platzhaltertext für Chat-Eingabefeld

• Platzhaltertext anpassen – Geben Sie den gewünschten Text in das Feld „Chat Input Placeholder Text“ ein. Dies könnte eine Aufforderung wie „Geben Sie Ihre Nachricht ein“ sein.

Willkommensnachrichten (Welcome Messages)

• Willkommensnachricht hinzufügen – Fügen Sie eine Willkommensnachricht hinzu, die Benutzer beim ersten Kontakt mit dem Chatbot erhalten. Tippen Sie Ihre Nachricht in das entsprechende Feld und klicken Sie auf „Add welcome message“.

Popup Willkommensnachricht und Verzögerung

• Willkommensnachrichten als Popup anzeigen – Aktivieren Sie „Show welcome messages as popup“, wenn die Willkommensnachricht als Popup erscheinen soll.
• Popup-Verzögerung festlegen – Geben Sie einen Wert in Millisekunden in das Feld „Show popup after (ms)“ ein, um festzulegen, nach wie vielen Millisekunden das Popup nach dem Laden der Seite erscheinen soll.

Das Popup stört Besucher Ihrer Homepage nicht und kann auch durch Emojis auf dem Chat hinweisen.

Beispiel-Fragen (Sample Questions)

• Beispiel-Fragen hinzufügen – Geben Sie eine Beispiel-Frage ein, um den Benutzern zu zeigen, was sie den Chatbot fragen können. Fügen Sie die Frage in das Feld „Question“ ein und geben Sie im Feld „Label“ eine Bezeichnung an. Klicken Sie dann auf „Add Sample Question“.

Vorschau der Änderungen

• Live-Vorschau – Auf der rechten Seite des Bildschirms sehen Sie eine Live-Vorschau des Chatbot-Widgets. Während Sie Änderungen in den Anpassungseinstellungen vornehmen, wird diese Vorschau in Echtzeit aktualisiert, um die Änderungen widerzuspiegeln.

Speichern Ihrer Anpassungen

• Anpassungen speichern – Wenn Sie mit den Änderungen zufrieden sind, klicken Sie auf die Schaltfläche „Update widget style“ unten rechts auf der Seite, um die Änderungen auf Ihr Live-Chatbot-Widget anzuwenden.
• Zurück ohne Speichern – Wenn Sie ohne Speichern zur vorherigen Seite zurückkehren möchten, klicken Sie auf die Schaltfläche „Go back“ unten links.

Appearance

Anpassung des Erscheinungsbildes Ihres Chatbot-Widgets

Dieser Leitfaden hilft Ihnen dabei, das visuelle Erscheinungsbild Ihres Chatbot-Widgets zu personalisieren, damit es nahtlos zum Design und zur Markenidentität Ihrer Website passt.

Zugriff auf die Einstellungen für das Erscheinungsbild

1. Melden Sie sich in Ihrem Chatbot-Dashboard an.
2. Klicken Sie im Navigationsmenü auf der linken Seite auf „Customize“.
3. Navigieren Sie innerhalb der „Customize“-Sektion zur Registerkarte „Appearance“, die im Interface hervorgehoben ist.

Anpassung des Erscheinungsbildes des Chatbot-Widgets

Hintergrundfarbe (Background Color)

• Farbe auswählen – Suchen Sie das Feld „Background color“. Klicken Sie auf das Farbfeld, um eine Farbe auszuwählen, oder geben Sie einen Hex-Code ein (z. B. #000000 für Schwarz), um die Farbe an das Farbschema Ihrer Website anzupassen.

Textfarbe (Text Color)

• Textfarbe ändern – Im Feld „Text color“ können Sie auf das Farbfeld klicken, um eine Farbe auszuwählen, oder einen Hex-Code eingeben (z. B. #FFFFFF für Weiß), der einen guten Kontrast zur Hintergrundfarbe bietet, um die Lesbarkeit zu verbessern.

Eckenradius (Border Radius)

• Ecken abrunden – Passen Sie das Feld „Border radius“ an, um die Abrundung der Ecken des Chatbot-Widgets zu verändern. Geben Sie einen Pixelwert ein (z. B. 12px), um zu bestimmen, wie stark die Ecken abgerundet sein sollen.

Position des Widgets (Widget Position)

• Widget-Position festlegen – Wählen Sie die Position des Widgets auf Ihrer Website, indem Sie „Left“ oder „Right“ auswählen. Dies bestimmt, auf welcher Seite der Seite das Chatbot-Symbol und das Fenster erscheinen.

Vorschau Ihrer Änderungen

• Live-Vorschau – Während Sie Änderungen an den Einstellungen für das Erscheinungsbild vornehmen, wird die Live-Vorschau auf der rechten Seite des Bildschirms aktualisiert, um Ihre Anpassungen widerzuspiegeln. Nutzen Sie diese Vorschau, um zu beurteilen, wie der Chatbot auf Ihrer Website aussehen wird.

Anwenden des benutzerdefinierten Erscheinungsbildes

• Änderungen speichern – Sobald Sie mit dem Erscheinungsbild des Chatbot-Widgets zufrieden sind, klicken Sie auf die Schaltfläche „Update widget style“ unten rechts, um Ihre Änderungen zu speichern und auf Ihrer Website anzuwenden.
• Zurück ohne Speichern – Wenn Sie zur vorherigen Seite zurückkehren möchten, ohne die Änderungen zu speichern, klicken Sie auf die Schaltfläche „Go back“ unten links.

Advanced Tab

Basis-Prompt

Im Feld „Base Prompt“ definieren Sie die grundlegenden Anweisungen, die Ihr Chatbot befolgen soll. Dies dient als Fundament für die Antworten des Chatbots.

• Base Prompt-Beispiel – „You are a very enthusiastic chatbot who loves to help people! Your name is {{chatbotName}} and Your task is to answer queries based on the provided context and past messages, outputting in Markdown. If the provided data doesn’t allow a response, reply with ‚{{defaultAnswer}}‘.“

Diese Grundanweisung kann nach Ihren Bedürfnissen angepasst werden. Zum Beispiel, wenn Sie möchten, dass Ihr Chatbot ausschließlich auf Französisch antwortet, könnten Sie die Anweisung hinzufügen: „Reply only in the French language“.

Tipp:

Es ist ratsam, dem Chatbot einige grundlegende Informationen über Ihre Website im Base Prompt zu geben, um den Antworten mehr Kontext zu verleihen.

Standardantwort (Default Answer)

Das Feld „Default Answer“ ermöglicht es Ihnen, eine Standardantwort festzulegen, die der Chatbot verwendet, wenn er keine passende Antwort auf eine Anfrage finden kann.

• Beispiel für eine Standardantwort – „I don’t know how to answer that“
• Sie können diesen Text nach Belieben anpassen oder in eine andere Sprache übersetzen. Zum Beispiel könnten Sie schreiben:
  „Sorry, I don’t have the answer to that. Please email hi@example.com for help.“

Diese Antwort gibt dem Chatbot eine Möglichkeit, höflich auf Anfragen zu reagieren, die er nicht verarbeiten kann.

E-Mail-Erfassung (Collect Email)

Wenn diese Option aktiviert ist, kann der Chatbot eine E-Mail-Adresse von Benutzern anfordern, falls er ihre Anfrage nicht beantworten kann. Dies ist nützlich, um das Follow-up mit dem Kunden zu ermöglichen.

„Read More“-Links anzeigen (Show Read More Links)

Wenn Sie diese Option aktivieren, fügt der Chatbot „Read more“-Links zu den Antworten hinzu, die den Nutzern ermöglichen, zusätzliche Informationen zu erhalten.

• Read More Text – Hier können Sie den Text anpassen, der für die „Read More“-Links angezeigt wird. Standardmäßig ist dies „Read more:“
• Sie können diesen Text ändern, um ihn besser an Ihre Marke oder die Benutzererfahrung anzupassen.

Auswahl des Modells für den Chatbot

In dieser Sektion können Sie das Sprachmodell auswählen, das Ihr Chatbot verwenden soll. Je nach gewähltem Modell ändert sich die Leistungsfähigkeit und das Verhalten Ihres Chatbots. Hier sind die verfügbaren Modelle im Detail beschrieben:

1. GPT-3.5-Turbo

• Beschreibung – GPT-3.5-Turbo ist eine optimierte Version von GPT-3 und bietet schnellere und effizientere Leistung. Es ist gut für Standard-KI-Aufgaben geeignet und bietet eine gute Balance zwischen Kosten und Leistung.
• Vorteile: Schnelle Antwortzeiten und eine breite Anwendbarkeit für alltägliche Konversationsaufgaben.

2. GPT-4

• Beschreibung – GPT-4 ist das neueste Sprachmodell von OpenAI und bietet eine verbesserte Sprachverarbeitung, mehr Kontextverständnis und präzisere Antworten im Vergleich zu seinen Vorgängern.
• Vorteile: Höhere Genauigkeit und bessere Qualität der Antworten, ideal für komplexere Aufgaben.

3. GPT-4-Turbo

• Beschreibung – GPT-4-Turbo ist eine leistungsstärkere und schnellere Version von GPT-4. Es kombiniert die fortschrittlichen Fähigkeiten von GPT-4 mit optimierten Ressourcen für schnellere Berechnungen.
• Vorteile – Hohe Reaktionsgeschwindigkeit bei gleichzeitiger Nutzung der fortschrittlichen GPT-4-Funktionalitäten. Ideal für Szenarien, in denen Geschwindigkeit und Präzision gleichermaßen wichtig sind.

4. GPT-4o

• Beschreibung – Dieses Modell ist eine experimentelle Variante von GPT-4, die spezifisch auf Optimierungen und Erweiterungen ausgerichtet ist. Sie bietet einzigartige Anpassungen, die auf spezielle Anwendungsfälle abzielen.
• Vorteile – Erweiterte Anpassungsmöglichkeiten für sehr spezifische Anforderungen oder experimentelle Einsatzszenarien.

Fazit – Die Wahl des richtigen Modells hängt von den Anforderungen Ihrer Anwendung ab. Wenn Sie eine Standardlösung mit hoher Performance möchten, könnte GPT-4 oder GPT-4-Turbo die beste Wahl sein. Für datenschutzkritische Anwendungen kann ein Private LLM von Konfuzio durch optimale Balance zwischen Leistung und Sicherheit eine Alternative bieten.

Zusammenfassung

Die „Advanced“-Einstellungen bieten Ihnen flexible Möglichkeiten, die Reaktionen Ihres Chatbots weiter anzupassen. Sie können die Basisanweisungen verfeinern, eine Standardantwort bereitstellen und zusätzliche Funktionen wie die Erfassung von E-Mail-Adressen und „Read more“-Links hinzufügen. Diese Konfigurationen tragen dazu bei, dass Ihr Chatbot benutzerfreundlicher und effizienter wird und gleichzeitig den Bedürfnissen Ihrer Kunden entspricht.

Custom CSS

Zugriff auf die Custom-CSS-Funktionen

• Melden Sie sich in Ihrem Chatbot-Dashboard an.
• Wählen Sie im Navigationsmenü auf der linken Seite die Option „Customize“, um die Anpassungsoptionen zu öffnen.
• Klicken Sie auf die Registerkarte „Custom CSS“, die die letzte Option im Tab-Menü ist.

Verständnis von Custom CSS

• Custom CSS (Cascading Style Sheets) ermöglicht es Ihnen, spezifische Stiländerungen am Chatbot-Widget vorzunehmen, die in der Standard-Anpassungsschnittstelle nicht verfügbar sind. Dazu gehören Änderungen an Schriftgrößen, Farben, Abständen und anderen visuellen Elementen.

Vorsicht beim Anwenden

• Es ist wichtig, die Custom-CSS-Funktion vorsichtig zu verwenden. Falsches CSS kann zu Anzeigeproblemen oder Konflikten mit den bestehenden Stilen Ihrer Website führen.
• Verwenden Sie Custom CSS nur, wenn Sie mit der CSS-Syntax vertraut sind und die Änderungen, die Sie vornehmen, verstehen.
• Beachten Sie, dass Sie dafür verantwortlich sind, die Rückwärtskompatibilität bei zukünftigen Updates der Chatbot-Plattform sicherzustellen.

Custom CSS anwenden

• Im Textbereich „Custom CSS“ können Sie Ihren CSS-Code schreiben oder einfügen. Zum Beispiel passt der bereitgestellte Code .ai-assistant-header p { line-height: 1.6; } die Zeilenhöhe der Absätze im Header des Chatbots an.
• Sie können spezifische Elemente innerhalb des Chatbot-Widgets durch ihre Klassennamen anvisieren und die gewünschten Stile mit Standard-CSS-Regeln anwenden.

Vorschau der Änderungen

• Während Sie Custom CSS anwenden, wird die Live-Vorschau auf der rechten Seite des Bildschirms aktualisiert, um Ihre Änderungen widerzuspiegeln. So können Sie sofort sehen, wie sich Ihr Code auf das Erscheinungsbild des Chatbots auswirkt.

Speichern Ihrer Custom-CSS-Änderungen

• Nachdem Sie Ihre Custom-CSS-Anpassungen abgeschlossen haben, klicken Sie auf die Schaltfläche „Update widget style“ unten rechts auf dem Bildschirm, um Ihre Änderungen zu speichern und auf das Chatbot-Widget anzuwenden.
• Wenn Sie sich entscheiden, die Änderungen nicht zu übernehmen oder zu den Standardstilen zurückzukehren, klicken Sie auf die Schaltfläche „Go back“ unten links, um die Custom-CSS-Oberfläche zu verlassen, ohne zu speichern.