Einbettung - Cosmo by Humanizing

Ihren Einbettungscode erhalten

Der Einbettungscode ist auf der Bereitstellungsseite Ihres Agenten im Cosmo dashboard verfügbar.

Zu Ihrem Agenten navigieren

Öffnen Sie Ihren Agenten aus der Agentenliste in Ihrem Arbeitsbereich.

Zur Bereitstellung gehen

Klicken Sie auf den Tab Bereitstellung in den Agenteneinstellungen.

Einbettungscode kopieren

Kopieren Sie das bereitgestellte JavaScript-Snippet.

Grundlegende Einbettung

Fügen Sie das folgende Skript zu Ihrer Website hinzu, typischerweise direkt vor dem schließenden Body-Tag:

<script
  src="https://chat.humanizing.com/embed.js"
  data-agent-id="YOUR_AGENT_ID"
  async
></script>

Ersetzen Sie YOUR_AGENT_ID durch Ihre tatsächliche Agenten-ID aus dem Dashboard.

Einbettungsmethoden

Methode 1: Script-Tag (Empfohlen)

Die einfachste Methode - funktioniert mit jeder Website:

<\!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <\!-- Your website content -->

  <\!-- Chat Widget (place before closing body) -->
  <script
    src="https://chat.humanizing.com/embed.js"
    data-agent-id="YOUR_AGENT_ID"
    async
  ></script>
</body>
</html>

Methode 2: Dynamisches Laden

Laden Sie das Widget nach dem Seitenaufbau für bessere Leistung:

window.addEventListener("load", function() {
  const script = document.createElement("script");
  script.src = "https://chat.humanizing.com/embed.js";
  script.setAttribute("data-agent-id", "YOUR_AGENT_ID");
  script.async = true;
  document.body.appendChild(script);
});

Konfigurationsoptionen

Konfigurieren Sie das Widget-Verhalten mit Data-Attributen:

Attribut	Typ	Beschreibung
data-agent-id	string	Erforderlich. Ihre Agenten-ID aus dem Dashboard
data-position	string	Widget-Position: bottom-right (Standard), bottom-left
data-open-on-load	boolean	Widget automatisch beim Laden der Seite öffnen
data-hide-button	boolean	Die schwebende Chat-Schaltfläche ausblenden

Seiten- und benutzerdefinierter Kontext

Das Widget kann Seitenkontext und benutzerdefinierte Werte mit jeder Chat-Anfrage senden. Nutzen Sie das, wenn ein Agent sich an die Seite, den Standort, die Abteilung oder Kampagne anpassen soll, auf der er eingebettet ist. Das Einbettungsskript stellt diese Prompt-Platzhalter automatisch bereit:

Platzhalter	Beschreibung
`{{ page_url }}`	Aktuelle Seiten-URL ohne Query-String oder Hash
`{{ page_origin }}`	Aktuelle Site-Origin
`{{ page_path }}`	Aktueller Pfad auf der Website

Beispiel: Auf https://example.com/products/widget?utm_source=newsletter#details ist {{ page_url }} gleich https://example.com/products/widget, {{ page_origin }} gleich https://example.com und {{ page_path }} gleich /products/widget. Um eigene Werte zu übergeben, ergänzen Sie ein context-Objekt in humanizing.init:

<script src="https://chat.humanizing.com/embed.js"></script>
<script>
  humanizing.init("YOUR_PUBLIC_KEY", {
    context: {
      location: "North Branch",
      department: "Service"
    }
  });
</script>

Fügen Sie dann passende Platzhalter unter Playground → Anweisungen (System-Prompt) hinzu:

You are answering for the {{ location }} location.
If the visitor asks about appointments, route them to the {{ department }} team.

Widget-Kontext-Leitfaden

Erfahren Sie, wo Sie Prompt-Platzhalter hinzufügen, welche eingebauten Werte verfügbar sind und wie benutzerdefinierter Kontext validiert wird.

Installation überprüfen

Nach dem Hinzufügen des Einbettungscodes:

Cache leeren - Stellen Sie sicher, dass Sie die neueste Version Ihrer Seite sehen
Chat-Schaltfläche suchen - Eine schwebende Schaltfläche sollte in der Ecke erscheinen
Klicken zum Öffnen - Die Chat-Oberfläche sollte sich reibungslos öffnen
Konversation testen - Senden Sie eine Testnachricht, um die Verbindung zu überprüfen

Verwenden Sie die Entwicklertools Ihres Browsers (F12), um nach JavaScript-Fehlern zu suchen, falls das Widget nicht erscheint.

Fehlerbehebung

Widget erscheint nicht

CORS- oder Netzwerkfehler

Überprüfen Sie, ob Ihre Domain in den Agenteneinstellungen erlaubt ist
Stellen Sie sicher, dass Ihre Website HTTPS verwendet
Prüfen Sie, ob Werbeblocker stören

Anzeigeprobleme auf Mobilgeräten

Das Widget ist für responsives Design konzipiert
Das Avatar-Panel wird auf Mobilgeräten ausgeblendet (erwartetes Verhalten)
Überprüfen Sie, ob das Viewport-Meta-Tag vorhanden ist

Sicherheitshinweise

Das Widget funktioniert nur auf Domains, die Sie in Ihren Agenteneinstellungen autorisiert haben. Nicht autorisierte Domains erhalten einen Verbindungsfehler.

Verwenden Sie immer HTTPS auf Ihrer Website
Halten Sie Ihre Agenten-ID vertraulich (obwohl sie im Seitenquelltext sichtbar ist)
Konfigurieren Sie erlaubte Domains im Dashboard

Nächste Schritte

Benutzer-Funktionen

Erfahren Sie mehr über die Funktionen, die Ihren Besuchern zur Verfügung stehen.

Widget-Einstellungen

Konfigurieren Sie Willkommensnachrichten und Fragen.

Gestaltung

Passen Sie das Erscheinungsbild des Widgets an.

Analysen

Verfolgen Sie die Widget-Nutzung und Konversationen.

​Ihren Einbettungscode erhalten

​Grundlegende Einbettung

​Einbettungsmethoden

​Methode 1: Script-Tag (Empfohlen)

​Methode 2: Dynamisches Laden

​Konfigurationsoptionen

​Seiten- und benutzerdefinierter Kontext

Widget-Kontext-Leitfaden

​Installation überprüfen

​Fehlerbehebung

​Sicherheitshinweise

​Nächste Schritte

Benutzer-Funktionen

Widget-Einstellungen

Gestaltung

Analysen

Ihren Einbettungscode erhalten

Grundlegende Einbettung

Einbettungsmethoden

Methode 1: Script-Tag (Empfohlen)

Methode 2: Dynamisches Laden

Konfigurationsoptionen

Seiten- und benutzerdefinierter Kontext

Installation überprüfen

Fehlerbehebung

Sicherheitshinweise

Nächste Schritte