> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inboxmate.psquared.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Einbinden

> Den Chatbot mit einer Zeile Code auf Ihre Website bringen — inklusive Anleitungen für Shopify, WordPress und andere.

Im Reiter **Veröffentlichen** finden Sie alles, was zwischen Ihrem Agenten und Ihrer Website steht.

<Frame caption="Der Reiter Veröffentlichen: Domains, Seitensichtbarkeit und der Einbettungscode. Veröffentlicht wird über den Knopf oben im Kopf.">
  <img src="https://mintcdn.com/psquaredgmbh/5L90JYrpgT2pSPmk/images/chatbot/veroeffentlichen.png?fit=max&auto=format&n=5L90JYrpgT2pSPmk&q=85&s=f365673adf618e0883cd7138cecb4e26" alt="Reiter Veröffentlichen" width="1680" height="1000" data-path="images/chatbot/veroeffentlichen.png" />
</Frame>

## Whitelisted-Domains

Tragen Sie hier ein, auf welchen Domains das Widget laufen darf. Ohne Eintrag lädt es überall, wo jemand Ihren Code einsetzt.

```text theme={null}
example.at
www.example.at
shop.example.at
```

<Info>
  Ohne Eintrag lädt das Widget auf jeder Seite, auf der jemand Ihren Code einsetzt. Tragen Sie hier Ihre Domains ein, sobald der Chatbot live geht.
</Info>

## Seitensichtbarkeit

Sie können das Widget auf bestimmte Seiten beschränken oder auf bestimmten Seiten ausblenden — jeweils über Pfadmuster. Ohne Regel erscheint es überall.

Typische Fälle: das Widget im Kassenbereich ausblenden, oder es nur auf den Produktseiten zeigen.

## Einbinden auf deiner Website

Kopieren Sie den Ausschnitt und setzen Sie ihn vor das schließende `</body>` Ihrer Seite.

```html theme={null}
<script src="https://…/widget-scripts/IHRE-AGENT-ID.js"></script>
```

Das Skript lädt nebenher und bremst Ihre Seite nicht.

<Warning>
  Der Einbettungscode zeigt auf eine gespeicherte Konfigurationsdatei. Alles, was in dieser Datei steht, wirkt erst nach einer **Neuveröffentlichung**: Aussehen, Domains, Seitenregeln, Begrüßung, Schnellantworten, verzögerte Nachrichten, Hilfe-Tab, E-Mail-Erfassung, Übergabe an einen Mitarbeiter und Branding.

  Sofort wirken nur **Anweisungen und Wissen** — die liest der Agent bei jeder Nachricht neu.
</Warning>

## Anleitungen je Plattform

<AccordionGroup>
  <Accordion title="Shopify">
    1. **Onlineshop → Themes → Code bearbeiten** im aktiven Theme
    2. `layout/theme.liquid` öffnen
    3. Den Ausschnitt direkt **vor** `</body>` einsetzen
    4. Speichern

    Offizielle Anleitung: [Theme-Code im Shopify-Adminbereich bearbeiten](https://help.shopify.com/de/manual/online-store/themes/theme-structure/extend/edit-theme-code).
  </Accordion>

  <Accordion title="WordPress">
    Am einfachsten über ein Plugin:

    1. **WPCode** oder **Insert Headers and Footers** installieren
    2. In den Plugin-Einstellungen das Feld **Footer** öffnen, Ausschnitt einsetzen, speichern

    Ohne Plugin bearbeiten Sie die `footer.php` Ihres Themes — dann aber in einem Child-Theme, sonst überschreibt das nächste Theme-Update Ihre Änderung.
  </Accordion>

  <Accordion title="Webflow">
    1. **Project Settings → Custom Code**
    2. Ausschnitt in **Footer Code** einsetzen
    3. Speichern und die Seite **veröffentlichen**
  </Accordion>

  <Accordion title="Wix">
    Erfordert einen Premium-Tarif.

    1. Dashboard → **Einstellungen → Benutzerdefinierter Code → Code hinzufügen**
    2. Ausschnitt einsetzen, **Body — Ende** wählen, **Alle Seiten**
    3. Speichern
  </Accordion>

  <Accordion title="Squarespace">
    Erfordert mindestens den Business-Tarif.

    1. **Einstellungen → Erweitert → Code-Injektion**
    2. Ausschnitt in das Feld **Footer** einsetzen
    3. Speichern
  </Accordion>

  <Accordion title="Eigene Website">
    Setzen Sie den Ausschnitt vor `</body>` jeder Seite, auf der das Widget erscheinen soll. Bei mehrseitigen Websites gehört er in die gemeinsame Vorlage.
  </Accordion>
</AccordionGroup>

<Info>
  Ihre Plattform ist nicht dabei? Suchen Sie in deren Hilfe nach „Custom Code", „Code Injection" oder „Header & Footer Scripts". Oder buchen Sie über den Reiter **Veröffentlichen** ein kostenloses Einrichtungsgespräch.
</Info>

## Links, die auf Ihrer Seite bleiben

Zeigt der Agent eine Produkt- oder Seitenkarte, soll der Besucher nicht in einem neuen Tab auf einer fremden Adresse landen. Ist beim Agenten die eigene Adresse als Ursprung für Kartenlinks hinterlegt, wandelt das Widget solche Links in Pfade um: Der Besucher bleibt auf der Seite, auf der er ist, und der Chat läuft nach dem Seitenwechsel weiter.

Diese Einstellung ist von den freigegebenen Domains getrennt und wird von uns eingerichtet.

Nützlich ist das vor allem bei Vorschau-Adressen: Ein Shop, der noch unter einer Testdomain läuft, würde seine Besucher sonst auf die Live-Domain schicken.

Links nach außen — etwa WhatsApp — bleiben davon unberührt und öffnen weiter in einem neuen Tab.

## Nach dem Einbinden prüfen

* Erscheint der Startknopf an der richtigen Stelle?
* Öffnet sich das Fenster und steht die Begrüßung da?
* Funktionieren die Schnellantworten?
* Führt eine Produktkarte auf die richtige Seite, und ist der Chat danach noch da?
* Ist die Kontaktkarte anklickbar?

<Tip>
  Testen Sie zusätzlich am Handy. Der angedockte Modus schaltet dort bewusst auf überlagernd um, und Schnellantworten brauchen mehr Platz als am Bildschirm.
</Tip>