Zum Hauptinhalt springen

Einbindung per Script-Tag

Eine Zeile Code genügt, um den Agenten auf einer Website bereitzustellen.

Einbettungscode abrufen​

  1. Das Dashboard aufrufen
  2. Einen Agenten auswählen
  3. Settings > Integration öffnen
  4. Den Script-Tag kopieren

Grundinstallation​

Diesen Code vor dem schließenden </body>-Tag einfügen:

<script src="https://leezy.ai/embed.js?chatbot_id=YOUR_CHATBOT_ID"></script>

YOUR_CHATBOT_ID durch die eigene Agent-ID ersetzen.

:::tip Agent-ID finden Die ID steht unter Settings > General sowie im Reiter „Integration". :::

Wo der Code eingefügt wird​

Statisches HTML​

Vor </body>:

<!DOCTYPE html>
<html>
<head>
  <title>Meine Website</title>
</head>
<body>
  <!-- Inhalt der Website -->

  <!-- Leezy Chat-Widget -->
  <script src="https://leezy.ai/embed.js?chatbot_id=YOUR_CHATBOT_ID"></script>
</body>
</html>

WordPress​

Für WordPress ist das offizielle Plugin der bessere Weg — es übersteht Theme-Updates, was eine Änderung an footer.php nicht tut.

Wer beim Script-Tag bleiben möchte, fügt ihn über ein Header-/Footer-Plugin ein statt direkt in footer.php.

Shopify​

  1. Online Store > Themes öffnen
  2. Auf Actions > Edit code klicken
  3. theme.liquid öffnen
  4. Den Code vor </body> einfügen

Squarespace​

  1. Settings > Advanced > Code Injection öffnen
  2. Den Code im Bereich Footer einfügen

Wix​

  1. Settings > Advanced > Custom Code öffnen
  2. Den Code einfügen und die Platzierung auf „Body – end" setzen

Next.js / React​

Im Root-Layout oder in _app.js:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://leezy.ai/embed.js?chatbot_id=YOUR_CHATBOT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Verhalten des Widgets​

Nach der Installation:

  • erscheint das Widget unten rechts (oder an der konfigurierten Position)
  • öffnet es sich per Klick auf die Schaltfläche
  • bleibt der Gesprächsverlauf während der Sitzung erhalten
  • passt es sich mobilen Geräten automatisch an

Anpassungsmöglichkeiten​

Das Erscheinungsbild wird unter Settings > Interface gesteuert:

  • Theme (Light/Dark/System)
  • Position (unten rechts/links)
  • Markenfarbe
  • Begrüßungsnachricht
  • Anzeigename

Installation prüfen​

  1. Die Website im Browser öffnen
  2. Auf die Chat-Schaltfläche in der Ecke achten
  3. Öffnen und eine Testnachricht senden
  4. Das Gespräch im Dashboard kontrollieren

Fehlerbehebung​

Widget erscheint nicht​

  • Konsole prüfen: Entwicklertools (F12) öffnen und auf Fehler achten
  • ID prüfen: Stimmt die Agent-ID?
  • Platzierung prüfen: Das Skript gehört vor </body>
  • Cache leeren: Der Browser hält womöglich eine alte Fassung

Widget erscheint, antwortet aber nicht​

  • Status prüfen: Der Agent muss auf „Active" stehen
  • Training prüfen: Es müssen Trainingsdaten vorhanden sein
  • Kontingent prüfen: Möglicherweise ist das Nachrichtenkontingent erschöpft

Darstellungskonflikte​

  • CSS prüfen, das sämtliche Schaltflächen oder iFrames betrifft
  • Das Widget läuft in einem iFrame, die meisten Styles wirken daher nicht hinein
  • Bei anhaltenden Problemen: Support kontaktieren

Sicherheit​

Das Einbettungsskript:

  • lädt über ein gesichertes CDN
  • nutzt iFrame-Sandboxing
  • prüft die Herkunft der Nachrichten
  • greift nicht auf Daten der einbettenden Website zu

Nächste Schritte​

Letztes Update am