> ## 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.

# Widget-Kontext

> Personalisieren Sie Chat-Widget-Prompts mit Seiten- und benutzerdefinierten Kontext-Platzhaltern

## Überblick

Mit Widget-Kontext kann sich ein Chatbot an die Seite oder den Standort anpassen, auf der er eingebettet ist. Das Widget sendet Kontextwerte mit jeder Chat-Anfrage, und Ihr Agent verwendet sie nur, wenn Sie sie im System-Prompt mit Platzhaltern wie `{{ page_path }}` oder `{{ location }}` referenzieren.

Verwenden Sie Widget-Kontext, wenn derselbe Agent auf mehreren Seiten, in mehreren Filialen, Abteilungen oder Kundenstandorten eingebettet ist und mit den passenden lokalen Details antworten soll.

<Note>
  Kontextwerte sind Daten, keine Anweisungen. Sie ändern Ihren Agenten nur, wenn Ihr gespeicherter Prompt einen passenden Platzhalter enthält.
</Note>

## Wo Sie es konfigurieren

<Steps>
  <Step title="Platzhalter im Playground hinzufügen">
    Öffnen Sie Ihren Agenten im Dashboard, gehen Sie zu **Playground** und bearbeiten Sie **Anweisungen (System-Prompt)**. Fügen Sie Platzhalter mit doppelten geschweiften Klammern hinzu, zum Beispiel `{{ location }}`.
  </Step>

  <Step title="Kontext im Einbettungscode übergeben">
    Gehen Sie zu **Bereitstellen → Chat-Widget**, kopieren Sie den Einbettungscode und ergänzen Sie ein `context`-Objekt in `humanizing.init`.
  </Step>

  <Step title="Auf der eingebetteten Seite testen">
    Öffnen Sie die Seite, auf der das Widget installiert ist, starten Sie eine Konversation und prüfen Sie, ob der Agent mit dem Seiten- oder benutzerdefinierten Wert antwortet.
  </Step>
</Steps>

## Automatischer Seitenkontext

Das Einbettungsskript sendet automatisch diese Werte von der aktuellen Seite. Wenn ein Besucher zum Beispiel `https://example.com/products/widget?utm_source=newsletter#details` öffnet, sendet das Widget:

| Platzhalter         | Beispiel                              | Beschreibung                                       |
| ------------------- | ------------------------------------- | -------------------------------------------------- |
| `{{ page_url }}`    | `https://example.com/products/widget` | Aktuelle Seiten-URL ohne Query-String oder Hash    |
| `{{ page_origin }}` | `https://example.com`                 | Origin der Website, inklusive Protokoll und Domain |
| `{{ page_path }}`   | `/products/widget`                    | Aktueller Pfad auf der Website                     |

Bei Single-Page-Applications aktualisiert das Widget diesen Seitenkontext, wenn sich die Browser-URL ändert.

### Prompt-Beispiel

Fügen Sie dies unter **Playground → Anweisungen (System-Prompt)** ein:

```text theme={null}
The visitor is currently on {{ page_path }}.
If their question is page-specific, use that page as the first clue for what they need.
```

Betten Sie das Widget dann mit dem Standard-Snippet ein:

```html theme={null}
<script src="https://chat.humanizing.com/embed.js"></script>
<script>humanizing.init("YOUR_PUBLIC_KEY");</script>
```

## Benutzerdefinierter Kontext

Sie können auch eigene Kontextwerte als zweiten Parameter an `humanizing.init` übergeben.

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

Referenzieren Sie diese Werte anschließend im System-Prompt:

```text theme={null}
You are answering for the {{ location }} location.
If a visitor asks about appointments, route them to the {{ department }} team.
```

Zur Anfragezeit erhält der Agent:

```text theme={null}
You are answering for the North Branch location.
If a visitor asks about appointments, route them to the Service team.
```

<Tip>
  Nutzen Sie benutzerdefinierten Kontext für Werte, die Ihre Website kennt, zum Beispiel Filiale, Markt, Produktlinie, Kampagne, Kundensegment oder Sprachvariante.
</Tip>

## Regeln und Grenzen

| Regel                     | Details                                                                                  |
| ------------------------- | ---------------------------------------------------------------------------------------- |
| Platzhalterformat         | Verwenden Sie `{{ key }}` im System-Prompt                                               |
| Schlüsselformat           | Beginnt mit einem Buchstaben, danach Buchstaben, Zahlen oder Unterstriche                |
| Werte                     | Strings, Zahlen und Booleans werden unterstützt                                          |
| Maximale Anzahl Schlüssel | Bis zu 50 Kontextschlüssel werden akzeptiert                                             |
| Maximale Wertlänge        | Werte sind auf 500 Zeichen begrenzt                                                      |
| Fehlende Werte            | Wenn ein Schlüssel nicht übergeben wird, bleibt der Platzhalter als `{{ key }}` sichtbar |

<Warning>
  Fügen Sie keine Anweisungen, Secrets, Zugriffstoken oder privaten Kundendaten in den Widget-Kontext ein. Der Einbettungscode läuft im Browser des Besuchers und sollte nur Daten enthalten, die auf dieser Seite sichtbar sein dürfen.
</Warning>

## Häufige Muster

### Agent für mehrere Standorte

Verwenden Sie denselben Agenten für mehrere Filialen:

```html theme={null}
<script>
  humanizing.init("YOUR_PUBLIC_KEY", {
    context: {
      location: "North Branch",
      phone: "+49 241 000000"
    }
  });
</script>
```

```text theme={null}
You are answering for our {{ location }} branch.
When visitors ask how to reach us by phone, give them {{ phone }}.
```

### Seitenbewusster Support

Teilen Sie dem Agenten mit, auf welcher Seite sich der Besucher befindet:

```text theme={null}
The visitor is chatting from {{ page_url }}.
Use the current page as context, but answer only from the knowledge base.
```

### Unterschiedliche Abteilungen

Nutzen Sie einen Agenten auf verschiedenen Abteilungsseiten:

```html theme={null}
<script>
  humanizing.init("YOUR_PUBLIC_KEY", {
    context: {
      department: "Sales"
    }
  });
</script>
```

```text theme={null}
You are currently supporting the {{ department }} department.
If the question belongs to another department, explain who can help.
```

## Fehlerbehebung

<AccordionGroup>
  <Accordion icon="brackets-curly" title="Der Platzhalter erscheint in der Antwort">
    Prüfen Sie, ob der Schlüssel im Prompt exakt zum Schlüssel im Kontextobjekt passt. `{{ location }}` wird zum Beispiel nur aufgelöst, wenn der Embed-Code `context: { location: "North Branch" }` sendet.
  </Accordion>

  <Accordion icon="code" title="Mein benutzerdefinierter Wert wird ignoriert">
    Stellen Sie sicher, dass der Wert ein String, eine Zahl oder ein Boolean ist. Objekte, Arrays, null-Werte und Schlüssel, die mit einem Unterstrich beginnen, werden ignoriert.
  </Accordion>

  <Accordion icon="route" title="Der Seitenpfad ist veraltet">
    In den meisten Single-Page-Applications aktualisiert das Widget den Seitenkontext nach Routenwechseln. Wenn Ihr Framework Inhalte ändert, ohne die Browser-URL zu ändern, übergeben Sie beim Initialisieren oder Aktualisieren des Widgets einen benutzerdefinierten Kontextwert.
  </Accordion>
</AccordionGroup>

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Prompts bearbeiten" icon="flask" href="/de/agents/playground">
    Fügen Sie Platzhalter zu Ihren Agenten-Anweisungen hinzu.
  </Card>

  <Card title="Widget einbetten" icon="code" href="/de/chat-widget/embedding">
    Ergänzen Sie Kontext in Ihrem Widget-Snippet.
  </Card>
</CardGroup>