> ## Documentation Index > Fetch the complete documentation index at: https://docs.cosmo.humanizing.com/llms.txt > Use this file to discover all available pages before exploring further. # Bereitstellung > Erfahren Sie, wie Sie Ihren Chatbot mit dem Einbettungsskript auf Ihrer Website bereitstellen ## Überblick Sobald Sie Ihren Agenten im Playground konfiguriert und getestet haben, ist die Bereitstellung auf Ihrer Website unkompliziert. Die Plattform bietet Bereitstellungskanäle, mit denen Sie Ihren KI-Assistenten mit nur wenigen Codezeilen zu jeder Website hinzufügen können. Testen Sie Ihren Agenten immer gründlich im Playground, bevor Sie ihn in der Produktion bereitstellen. Ein gut konfigurierter Agent hinterlässt bei Ihren Besuchern einen großartigen ersten Eindruck. ## Bereitstellungskanäle Der Bereich „Bereitstellen" bietet mehrere Möglichkeiten zur Integration Ihres Agenten: Die gängigste Bereitstellungsoption. Fügt eine schwebende Chat-Blase zu Ihrer Website hinzu, auf die Besucher klicken können, um mit Ihrem Agenten zu interagieren. Hosten Sie eine dedizierte Hilfe-Seite, auf der Benutzer direkt mit Ihrem Agenten chatten können. Ideal für Support-Center und Dokumentationsseiten. *** ## Chat-Widget-Bereitstellung Das Chat-Widget ist eine einbettbare Komponente, die KI-gestützten Chat zu jeder Website hinzufügt. Es erscheint als schwebende Blase in der Ecke Ihrer Seite. ### Den Einbettungscode erhalten Navigieren Sie zu **Bereitstellen → Chat-Widget** im Menü Ihres Agenten. Der Bereich „Einbettungscode" zeigt zwei Script-Tags, die Sie zu Ihrer Website hinzufügen müssen: ```html theme={null} ``` Der eindeutige öffentliche Schlüssel Ihres Agenten ist automatisch im Einbettungscode enthalten. Dieser Schlüssel identifiziert Ihren spezifischen Agenten und lädt dessen Konfiguration, Styling und Wissensdatenbank. ### Den Code kopieren 1. Suchen Sie den Bereich **Einbettungscode** am unteren Rand der Playground-Seite oder in den Chat-Widget-Bereitstellungseinstellungen 2. Klicken Sie auf die **Kopieren-Schaltfläche** (Zwischenablage-Symbol) in der oberen rechten Ecke des Codeblocks 3. Der vollständige Einbettungscode wird in Ihre Zwischenablage kopiert *** ## Das Skript zu Ihrer Website hinzufügen ### Grundlegende Installation Fügen Sie den Einbettungscode in den HTML-Code Ihrer Website ein. Die Skripte sollten für optimale Leistung nahe dem schließenden ``-Tag platziert werden: ```html theme={null} Your Website ``` ### Platzierungsoptionen | Stelle | Empfehlung | Anwendungsfall | | ---------------- | --------------- | ------------------------------------------------------------------------------- | | Vor `` | **Empfohlen** | Die meisten Websites – stellt sicher, dass der Seiteninhalt zuerst geladen wird | | Vor `` | Alternative | Seiten, die das Widget sofort verfügbar brauchen | | Über Tag-Manager | Fortgeschritten | Seiten, die Google Tag Manager oder ähnliche Tools verwenden | Das Platzieren von Skripten am Ende des Body ermöglicht es, dass Ihr Seiteninhalt geladen und gerendert wird, bevor das Widget initialisiert wird, was eine bessere Benutzererfahrung bietet. *** ## Plattformspezifische Anweisungen ### WordPress Für WordPress-Seiten können Sie den Einbettungscode mit einer der folgenden Methoden hinzufügen: 1. Gehen Sie zu **Design → Customizer** in Ihrem WordPress-Adminbereich 2. Finden Sie den Bereich **Zusätzliches CSS/Skripte** (variiert je nach Theme) 3. Fügen Sie den Einbettungscode im Bereich für Footer-Skripte hinzu 4. Klicken Sie auf **Veröffentlichen**, um die Änderungen zu speichern 1. Installieren Sie ein Header-/Footer-Skripte-Plugin (z. B. „Insert Headers and Footers") 2. Navigieren Sie zu den Plugin-Einstellungen 3. Fügen Sie den Einbettungscode im Bereich **Footer-Skripte** ein 4. Speichern Sie Ihre Änderungen 1. Gehen Sie zu **Design → Theme-Datei-Editor** 2. Wählen Sie `footer.php` in der rechten Seitenleiste 3. Fügen Sie den Einbettungscode direkt vor dem schließenden ``-Tag ein 4. Klicken Sie auf **Datei aktualisieren** Das direkte Bearbeiten von Theme-Dateien wird nicht empfohlen, da Änderungen bei Theme-Updates verloren gehen können. Verwenden Sie stattdessen ein Child-Theme oder die Plugin-Methode. ### Shopify Fügen Sie das Chat-Widget zu Ihrem Shopify-Shop hinzu: 1. Gehen Sie zu **Online-Shop → Themes** in Ihrem Shopify-Adminbereich 2. Klicken Sie auf **Aktionen → Code bearbeiten** bei Ihrem aktiven Theme 3. Öffnen Sie `theme.liquid` aus dem Layout-Ordner 4. Fügen Sie den Einbettungscode direkt vor dem schließenden ``-Tag ein 5. Klicken Sie auf **Speichern** ### Webflow Für Webflow-Seiten: 1. Öffnen Sie Ihr Projekt im Webflow Designer 2. Gehen Sie zu **Projekteinstellungen → Benutzerdefinierter Code** 3. Fügen Sie den Einbettungscode im Bereich **Footer-Code** ein 4. Veröffentlichen Sie Ihre Seite, um die Änderungen zu übernehmen ### React / Next.js Für React-basierte Anwendungen fügen Sie das Skript dynamisch hinzu: ```jsx theme={null} import { useEffect } from 'react'; function ChatWidget() { useEffect(() => { // Load the embed script const script = document.createElement('script'); script.src = 'https://chat.humanizing.com/embed.js'; script.async = true; document.body.appendChild(script); // Initialize after script loads script.onload = () => { window.humanizing.init('YOUR_PUBLIC_KEY'); }; return () => { document.body.removeChild(script); }; }, []); return null; } export default ChatWidget; ``` Binden Sie dann die Komponente in Ihr App-Layout oder in bestimmte Seiten ein, auf denen das Widget erscheinen soll. ### Vue.js Für Vue-Anwendungen: ```vue theme={null} ``` ### Google Tag Manager Bereitstellung über Google Tag Manager: 1. Erstellen Sie ein neues **Benutzerdefiniertes HTML**-Tag in GTM 2. Fügen Sie den Einbettungscode in das HTML-Feld ein 3. Setzen Sie den Trigger auf **Alle Seiten** (oder bestimmte Seiten) 4. Testen Sie im Vorschaumodus 5. Veröffentlichen Sie Ihren Container *** ## Widget-Anpassung Passen Sie vor der Bereitstellung das Erscheinungsbild Ihres Widgets in den Einstellungen unter **Bereitstellen → Chat-Widget** an: ### Styling-Optionen | Einstellung | Beschreibung | | -------------------- | --------------------------------------------------------- | | **Avatar** | Wählen Sie den 3D-Avatar, der Ihren Agenten repräsentiert | | **Erscheinungsbild** | Helles oder dunkles Theme für die Chat-Oberfläche | | **Markenfarbe** | Ihre primäre Akzentfarbe | | **Blasen-Position** | Linke oder rechte Bildschirmecke | | **Blasen-Symbol** | Benutzerdefiniertes Symbol für die Chat-Blase | ### Inhaltseinstellungen | Einstellung | Beschreibung | | ------------------------- | ------------------------------------------------------------ | | **Willkommensnachricht** | Erste Begrüßung beim Öffnen des Chats | | **Header-Titel** | Benutzerdefinierter Titel in der Widget-Kopfzeile | | **Vorgeschlagene Fragen** | Vordefinierte Fragen, die Benutzern den Einstieg erleichtern | | **Sprachen** | Verfügbare Sprachoptionen für Besucher | Alle Anpassungsänderungen erfordern das Klicken auf **Speichern**, bevor sie wirksam werden. Die Live-Vorschau auf der Einstellungsseite zeigt, wie die Änderungen aussehen werden. *** ## Ihre Bereitstellung überprüfen Nachdem Sie den Einbettungscode zu Ihrer Website hinzugefügt haben: Leeren Sie Ihren Browser-Cache und alle CDN-/Server-Caches, um sicherzustellen, dass die neueste Version geladen wird. Navigieren Sie zu Ihrer Website und suchen Sie die Chat-Blase in der von Ihnen angegebenen Ecke. Klicken Sie auf die Blase und stellen Sie eine Testfrage, um zu überprüfen, ob der Agent korrekt antwortet. Testen Sie auf mobilen Geräten, um sicherzustellen, dass das Widget zugänglich und funktionsfähig ist. *** ## Fehlerbehebung **Mögliche Ursachen:** * Skript wird aufgrund der Content Security Policy (CSP) nicht geladen * JavaScript-Fehler auf der Seite blockiert die Ausführung * Werbeblocker stört das Widget **Lösungen:** * Überprüfen Sie die Browser-Konsole auf Fehler (F12 → Konsole) * Fügen Sie die Widget-Domain zu Ihrer CSP-Positivliste hinzu * Deaktivieren Sie Werbeblocker vorübergehend zum Testen * Überprüfen Sie, ob der Einbettungscode korrekt in Ihrem HTML platziert ist **Mögliche Ursachen:** * Ungültiger oder abgelaufener öffentlicher Schlüssel * Probleme mit der Netzwerkverbindung * Agent nicht richtig konfiguriert **Lösungen:** * Überprüfen Sie, ob der öffentliche Schlüssel mit Ihrem Agenten übereinstimmt * Prüfen Sie, ob Ihr Agent im Dashboard aktiv ist * Testen Sie im Playground, ob der Agent funktioniert **Mögliche Ursachen:** * CSS-Konflikte mit Ihren Website-Styles * Nicht gespeicherte Änderungen in den Widget-Einstellungen * Browser hat alte Styles zwischengespeichert **Lösungen:** * Das Widget verwendet Shadow DOM zur Style-Isolierung, aber globale Resets können es beeinflussen * Speichern Sie Änderungen auf der Chat-Widget-Einstellungsseite * Erzwingen Sie ein Neuladen Ihrer Seite (Strg+Umschalt+R / Cmd+Umschalt+R) **Mögliche Ursachen:** * Einbettungscode wurde zur globalen Vorlage hinzugefügt **Lösungen:** * Verwenden Sie bedingte Logik in Ihrem CMS, um das Widget nur auf bestimmten Seiten anzuzeigen * Verwenden Sie Google Tag Manager mit seitenspezifischen Triggern * Für Entwickler: Rendern Sie das Skript bedingt basierend auf der Route *** ## Sicherheitshinweise Legen Sie niemals die Admin-Anmeldedaten oder API-Schlüssel Ihres Agenten im clientseitigen Code offen. Der öffentliche Schlüssel im Einbettungscode ist dafür konzipiert, öffentlich zu sein, und ist die einzige Berechtigung, die für das Widget benötigt wird. ### Bewährte Methoden * **HTTPS verwenden**: Stellen Sie Ihre Website immer über HTTPS bereit, um eine sichere Kommunikation mit dem Widget zu gewährleisten * **Inhalte überprüfen**: Der Agent antwortet nur basierend auf seiner Wissensdatenbank – stellen Sie sicher, dass keine sensiblen Informationen in den Quellen enthalten sind * **Konversationen überwachen**: Überprüfen Sie regelmäßig die Gesprächsprotokolle auf Probleme oder Missbrauch *** ## Hilfe-Seite-Bereitstellung Für ein eigenständiges Hilfe-Seite-Erlebnis: 1. Navigieren Sie zu **Bereitstellen → Hilfe-Seite** im Menü Ihres Agenten 2. Klicken Sie auf **Einrichten**, um Ihre Hilfe-Seite zu konfigurieren 3. Passen Sie das Erscheinungsbild und Branding der Seite an 4. Teilen Sie die bereitgestellte URL oder betten Sie sie in Ihre Seite ein Die Hilfe-Seite bietet ein Vollbild-Chat-Erlebnis, ideal für: * Dedizierte Support-Portale * Dokumentationssuche * Kunden-Self-Service-Center *** ## Nächste Schritte Überprüfen Sie den Chatverlauf und sehen Sie, was Besucher fragen. Verfolgen Sie Nutzungsmetriken und identifizieren Sie Trends im Benutzerverhalten. Erweitern Sie das Wissen Ihres Agenten mit zusätzlichen Inhalten. Verfeinern Sie Farben, Erscheinungsbild und Widget-Verhalten.