> ## 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.
# Einbettung
> Schritt-für-Schritt-Anleitung zur Einbettung des Chat-Widgets auf Ihrer Website
## Ihren Einbettungscode erhalten
Der Einbettungscode ist auf der Bereitstellungsseite Ihres Agenten im Cosmo dashboard verfügbar.
Öffnen Sie Ihren Agenten aus der Agentenliste in Ihrem Arbeitsbereich.
Klicken Sie auf den Tab **Bereitstellung** in den Agenteneinstellungen.
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:
```html theme={null}
```
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:
```html theme={null}
<\!DOCTYPE html>
My Website
<\!-- Your website content -->
<\!-- Chat Widget (place before closing body) -->
```
### Methode 2: Dynamisches Laden
Laden Sie das Widget nach dem Seitenaufbau für bessere Leistung:
```javascript theme={null}
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`:
```html theme={null}
```
Fügen Sie dann passende Platzhalter unter **Playground → Anweisungen (System-Prompt)** hinzu:
```text theme={null}
You are answering for the {{ location }} location.
If the visitor asks about appointments, route them to the {{ department }} team.
```
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
Erfahren Sie mehr über die Funktionen, die Ihren Besuchern zur Verfügung stehen.
Konfigurieren Sie Willkommensnachrichten und Fragen.
Passen Sie das Erscheinungsbild des Widgets an.
Verfolgen Sie die Widget-Nutzung und Konversationen.