Gehen Sie mit erweiterter CSS- und JavaScript-Injection über die Standardanpassung hinaus. Erreichen Sie eine pixelgenaue Markenausrichtung, fügen Sie benutzerdefinierte Verhaltensweisen hinzu und integrieren Sie sie tief in Ihre Website – und das alles unter Wahrung der Sicherheit.
Standardanpassungen decken 90 % des Bedarfs ab, aber einzigartige Marken erfordern einzigartige Lösungen. Unsere fortschrittlichen Styling- und Scripting-Injection-Funktionen geben Designteams und Entwicklern die Möglichkeit, wirklich unverwechselbare KI-Agentenerlebnisse zu schaffen, ohne den Kern-Widget-Code zu verzweigen oder zu modifizieren.
Während unser visuelles Anpassungstool die meisten Branding-Anforderungen erfüllt, benötigen einige Unternehmen eine pixelgenaue Ausrichtung auf anspruchsvolle Markenstandards: komplexe Animationssequenzen, die den Markenrichtlinien entsprechen, komplizierte CSS-Rasterlayouts für eine einzigartige Informationspräsentation, erweitertes Pseudoelement-Styling für dekorative Effekte oder CSS-Variablen, die mit dem Designsystem Ihrer Website synchronisiert werden. Durch die benutzerdefinierte CSS-Injektion ist all dies möglich, ohne die Codebasis des Widgets zu berühren.
Stellen Sie CSS als URL-codierte Zeichenfolge bereit oder verweisen Sie auf eine externe Stylesheet-URL. Der Loader fügt Ihre Stile während der Initialisierung in ein <style>-Tag im Iframe des Widgets ein, bevor die Hauptanwendung bereitgestellt wird. Ihre Regeln können Standardwerte überschreiben, neue Klassen hinzufügen oder vorhandene Komponenten verbessern. Die CSS-Architektur des Widgets folgt den BEM-Namenskonventionen und macht Überschreibungen vorhersehbar und wartbar.
Über das Styling hinaus ermöglicht benutzerdefiniertes JavaScript anspruchsvolle Integrationen: Öffnen Sie das Widget automatisch, wenn Kunden zu einem Preisabschnitt scrollen, füllen Sie die erste Nachricht basierend auf dem aktuellen Seitenkontext oder URL-Parametern vorab aus, senden Sie programmgesteuert Nachrichten basierend auf dem Kundenverhalten (Verweildauer auf der Seite, Ausstiegsabsicht, Warenkorbwert), integrieren Sie Analyseverfolgung für benutzerdefinierte Ereignisse, die nicht von der Standardtelemetrie abgedeckt werden, integrieren Sie Ihre Kundendatenplattform, um Begrüßungen zu personalisieren, oder lösen Sie Widget-Aktionen über Ihre vorhandenen UI-Schaltflächen und Steuerelemente aus.
Externe Skript-URLs verweisen auf Skripte, die auf Ihrem CDN oder Server gehostet werden. Der Loader ruft sie vor der Widget-Initialisierung ab und wertet sie aus, ideal für gemeinsam genutzte Bibliotheken oder komplexe Logik. Inline-Code-Snippets ermöglichen einfache Anpassungen direkt in der Einbettungskonfiguration, ideal für seitenspezifische Optimierungen und Tests. Beide Methoden werden im globalen Bereich des Iframes mit vollem Zugriff auf Widget-APIs und das DOM ausgeführt.
Benutzerdefinierter Code wird mit vollständigen Iframe-Berechtigungen ausgeführt, einschließlich Zugriff auf den Widget-Status, API-Aufrufe und Kundengespräche. In der Dokumentation werden Integratoren eindeutig gewarnt: „Überprüfen Sie den gesamten benutzerdefinierten Code vor der Bereitstellung auf Sicherheitslücken.“ „Schädlicher Code in benutzerdefinierten Skripten kann die Sicherheit von Widgets und Kundendaten gefährden.“ „Laden Sie nur Skripte von Domänen, denen Sie ausdrücklich vertrauen.“ Wir bieten Content Security Policy (CSP)-Header-Empfehlungen und eine Ursprungsvalidierung, um die Angriffsfläche zu begrenzen. Sandboxing verhindert, dass benutzerdefinierter Code den Iframe-Kontext verlässt, und schützt so die übergeordnete Seite.
Testen Sie vor der Produktionsbereitstellung ausgiebig in Entwicklungsumgebungen. Verwenden Sie versionierte externe Skripte anstelle von Inline-Code, um das Rollback und die Prüfung zu vereinfachen. Implementieren Sie CSP-Header in Ihren Skript-Hosting-Domänen, um Manipulationen zu verhindern. Überwachen Sie die Einschleusung unerwarteter Skripte (Hacking-Versuche). Überprüfen Sie benutzerdefinierten Code regelmäßig auf Sicherheitsprobleme und veraltete Praktiken. Das Widget enthält Abwehrprüfungen, um eindeutig fehlerhaftes CSS/JS abzulehnen und so vor versehentlichen Fehlern zu schützen.
Auf die Marke abgestimmte Animationen: Fügen Sie CSS-Animationen ein, die zu den Mikrointeraktionen Ihrer Website passen. Kontextbezogenes Öffnen des Widgets: Verwenden Sie JavaScript, um bestimmte Benutzeraktionen zu erkennen (auf „Kontakt“ geklickt, Preise dreimal angezeigt) und das Widget automatisch zu öffnen. Benutzerdefinierte Schriftarten und Symbole: Laden Sie spezielle Schriftarten oder Symbolbibliotheken, die nicht in Standardkonfigurationen enthalten sind. Umfassende Analyseintegration: Leiten Sie Widget-Ereignisse mit benutzerdefinierten Metadaten an spezielle Analyseplattformen weiter. Chat-Transkripte: Fügen Sie eine Schaltfläche „Transkript herunterladen“ hinzu, indem Sie benutzerdefiniertes JavaScript verwenden, das den Gesprächsverlauf formatiert. Integration mit bestehendem CRM: Synchronisieren Sie Gesprächsmetadaten in Echtzeit mit Ihrer Kundendatenbank.
Große benutzerdefinierte Stylesheets oder umfangreiches JavaScript können die Ladezeiten von Widgets verlangsamen. Zu den Best Practices gehören die Minimierung und Komprimierung injizierter Assets, das asynchrone Laden unkritischer Skripte nach Möglichkeit, die Vermeidung teurer Layout-Neuberechnungen bei häufigen Interaktionen und die Verwendung von CSS-Animationen anstelle von JavaScript, wo möglich (bessere Browseroptimierung). Die Dokumentation enthält Leistungsbudgets und Profilierungsanleitungen.