Zum Hauptinhalt springen

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.

Ihren Einbettungscode erhalten

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

Zu Ihrem Agenten navigieren

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

Zur Bereitstellung gehen

Klicken Sie auf den Tab Bereitstellung in den Agenteneinstellungen.
3

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:
AttributTypBeschreibung
data-agent-idstringErforderlich. Ihre Agenten-ID aus dem Dashboard
data-positionstringWidget-Position: bottom-right (Standard), bottom-left
data-open-on-loadbooleanWidget automatisch beim Laden der Seite öffnen
data-hide-buttonbooleanDie 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:
PlatzhalterBeschreibung
{{ 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:
  1. Cache leeren - Stellen Sie sicher, dass Sie die neueste Version Ihrer Seite sehen
  2. Chat-Schaltfläche suchen - Eine schwebende Schaltfläche sollte in der Ecke erscheinen
  3. Klicken zum Öffnen - Die Chat-Oberfläche sollte sich reibungslos öffnen
  4. 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

  • Überprüfen Sie, ob die Agenten-ID korrekt ist
  • Stellen Sie sicher, dass Ihr Agent bereitgestellt ist (nicht im Entwurfsmodus)
  • Prüfen Sie, ob JavaScript-Fehler in der Konsole vorliegen
  • Überprüfen Sie CSS-Konflikte mit z-index
  • Ü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
  • 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.