Benutzerdefiniertes CSS & JavaScript im Eddy AI Chatbot ermöglicht es Ihnen, Ihren eigenen Code hinzuzufügen, um das Aussehen oder Verhalten des Chatbots weiter zu personalisieren und über die Standardeinstellungen hinaus zu personalisieren. Du kannst benutzerdefinierte Stile einfügen, um das Standard-Design des Chatbots zu überschreiben, und JavaScript hinzufügen, um individuelle Interaktivität oder Ereignishandhabung einzuführen. Änderungen werden auf den Live-Chatbot erst angewendet, nachdem Sie auf Veröffentlichen klicken.
Wann man benutzerdefiniertes CSS und JavaScript verwenden sollte
- Verwenden Sie benutzerdefiniertes CSS, wenn Sie Styling-Änderungen benötigen, die im Avatar-Tab nicht verfügbar sind – zum Beispiel um Schriftgröße, Randradius, Button-Styles oder Chatblasenfarben zu ändern.
- Verwenden Sie benutzerdefiniertes JavaScript , wenn Sie benutzerdefinierte Ereignisse auslösen müssen, integrieren Sie den Chatbot mit Drittanbieter-Tools oder fügen Sie Verhalten hinzu, das auf Benutzeraktionen innerhalb des Chatbots reagiert.
Bevor du anfängst
- Du musst einen Eddy-KI-Chatbot erstellt haben, der mindestens eine Quelle angebunden hat.
- Überprüfen Sie die Standard-Aussehenseinstellungen, bevor Sie benutzerdefiniertes CSS schreiben – viele gängige visuelle Anpassungen (Farbe, Symbol, Position, Abstand) können ohne Code vorgenommen werden.
- Individueller Code wird global auf den Chatbot angewendet. Teste Änderungen gründlich im Playground vor der Veröffentlichung.
Wie man benutzerdefiniertes CSS und JavaScript hinzufügt
- Navigiere in der linken Navigationsleiste zu KI-Chatbot (
) und klicke auf Anpassen. - Navigiere zum Tab Custom CSS & JavaScript ().
- Geben Sie Ihren CSS-Code im Feld Benutzerdefinierte CSS ein, um das Styling des Chatbots zu verändern.
- Geben Sie Ihren JavaScript-Code im Feld Benutzerdefiniertes JavaScript ein, um benutzerdefinierte Interaktivität hinzuzufügen.
- Klicken Sie auf Speichern , um Ihren Code zu speichern.
- Klicken Sie auf Veröffentlichen , um die Änderungen auf Ihren Live-Chatbot anzuwenden.
Der Chatbot auf Ihrer Website spiegelt jetzt Ihren eigenen Code wider.
Best Practices
- Mach eine Änderung nach der anderen – füge eine einzelne CSS- oder JavaScript-Änderung hinzu und teste sie, bevor du die nächste hinzufügst. Das erleichtert es, Probleme zu isolieren, falls etwas kaputtgeht.
- Nutzen Sie den Playground, um vor der Veröffentlichung eine Vorschau zu machen – speichern Sie zuerst Ihre Änderungen und überprüfen Sie dann den Playground, um zu bestätigen, dass der Chatbot vor dem Live-Start wie erwartet aussieht und sich verhält.
- Bewerten Sie Ihre CSS-Selektoren sorgfältig – verwenden Sie bestimmte Selektoren, um Chatbot-Elemente präzise anzusprechen und vermeiden Sie, versehentlich andere Stile auf Ihrer Webseite zu überschreiben.
- Halten Sie JavaScript minimal – verwenden Sie JavaScript nur für Verhalten, das nicht über die Aussehenseinstellungen oder die Standard-Chatbot-Konfiguration erreicht werden kann. Übermäßiges JavaScript kann die Ladezeit von Chatbots beeinflussen.
- Kommentieren Sie Ihren eigenen Code – fügen Sie Kommentare zu Ihrem CSS und JavaScript hinzu, damit Ihr Team die Anpassungen über die Zeit verstehen und aufrechterhalten kann.