Zum Hauptinhalt springen

​
Ü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:

Chat-Widget

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.

Hilfe-Seite

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: 
<script src="https://chat.humanizing.com/embed.js"></script>
<script>humanizing.init("YOUR_PUBLIC_KEY");</script>
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 </body>-Tag platziert werden: 
<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Humanizing Agent Chat Widget -->
  <script src="https://chat.humanizing.com/embed.js"></script>
  <script>humanizing.init("YOUR_PUBLIC_KEY");</script>
</body>
</html>

​
Platzierungsoptionen

StelleEmpfehlungAnwendungsfall
Vor </body>EmpfohlenDie meisten Websites – stellt sicher, dass der Seiteninhalt zuerst geladen wird
Vor </head>AlternativeSeiten, die das Widget sofort verfügbar brauchen
Über Tag-ManagerFortgeschrittenSeiten, 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 </body>-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 </body>-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: 
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: 
<script setup>
import { onMounted, onUnmounted } from 'vue';

let script = null;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://chat.humanizing.com/embed.js';
  script.async = true;
  script.onload = () => {
    window.humanizing.init('YOUR_PUBLIC_KEY');
  };
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) {
    document.body.removeChild(script);
  }
});
</script>

<template>
  <!-- Your component content -->
</template>

​
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

EinstellungBeschreibung
AvatarWählen Sie den 3D-Avatar, der Ihren Agenten repräsentiert
ErscheinungsbildHelles oder dunkles Theme für die Chat-Oberfläche
MarkenfarbeIhre primäre Akzentfarbe
Blasen-PositionLinke oder rechte Bildschirmecke
Blasen-SymbolBenutzerdefiniertes Symbol für die Chat-Blase

​
Inhaltseinstellungen

EinstellungBeschreibung
WillkommensnachrichtErste Begrüßung beim Öffnen des Chats
Header-TitelBenutzerdefinierter Titel in der Widget-Kopfzeile
Vorgeschlagene FragenVordefinierte Fragen, die Benutzern den Einstieg erleichtern
SprachenVerfü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:
1

Cache leeren

Leeren Sie Ihren Browser-Cache und alle CDN-/Server-Caches, um sicherzustellen, dass die neueste Version geladen wird.
2

Ihre Seite besuchen

Navigieren Sie zu Ihrer Website und suchen Sie die Chat-Blase in der von Ihnen angegebenen Ecke.
3

Das Widget testen

Klicken Sie auf die Blase und stellen Sie eine Testfrage, um zu überprüfen, ob der Agent korrekt antwortet.
4

Mobilgeräte prüfen

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

Konversationen überwachen

Überprüfen Sie den Chatverlauf und sehen Sie, was Besucher fragen.

Analysen ansehen

Verfolgen Sie Nutzungsmetriken und identifizieren Sie Trends im Benutzerverhalten.

Weitere Quellen hinzufügen

Erweitern Sie das Wissen Ihres Agenten mit zusätzlichen Inhalten.

Styling anpassen

Verfeinern Sie Farben, Erscheinungsbild und Widget-Verhalten.