iFrame-Einbindung

Den Agenten als eigenständiges iFrame-Element einbetten.

Wann iFrame sinnvoll ist

Die iFrame-Einbindung eignet sich, wenn:

• die Platzierung vollständig kontrolliert werden soll
• der Chat in einem bestimmten Seitenbereich sitzt
• Größe und Position frei bestimmt werden
• die Einbettung in ein bestehendes Modal oder eine Seitenleiste erfolgt

Für ein schwebendes Widget ist die Einbindung per Script-Tag der passende Weg.

iFrame-Code abrufen

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

Grundgerüst

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  width="400"
  height="600"
  frameborder="0"
  allow="clipboard-write"
></iframe>

YOUR_CHATBOT_ID durch die eigene Agent-ID ersetzen.

Größe

Feste Größe

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  width="400"
  height="600"
></iframe>

Reaktionsfähig (Container füllend)

<div style="width: 100%; height: 500px;">
  <iframe
    src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
    style="width: 100%; height: 100%; border: none;"
  ></iframe>
</div>

Empfohlene Mindestmaße

• Breite: mindestens 300 px (empfohlen 350–400 px)
• Höhe: mindestens 400 px (empfohlen 500–600 px)

:::warning Zu kleine Maße Sehr kleine iFrames erschweren die Bedienung. Ein Test auf Mobilgeräten lohnt sich. :::

Gestaltung

Rahmen entfernen

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  frameborder="0"
  style="border: none;"
></iframe>

Abgerundete Ecken

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  style="border: none; border-radius: 12px; overflow: hidden;"
></iframe>

Schatten

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  style="border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15);"
></iframe>

Anwendungsfälle

Seitenleiste

<aside style="width: 350px; height: 100vh; position: fixed; right: 0;">
  <iframe
    src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
    style="width: 100%; height: 100%; border: none;"
  ></iframe>
</aside>

Modal

<div class="modal">
  <div class="modal-content" style="width: 400px; height: 600px;">
    <iframe
      src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
      style="width: 100%; height: 100%; border: none;"
    ></iframe>
  </div>
</div>

Vollbild-Chat

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: none;"
></iframe>

Attribute

Attribut	Zweck
src	Agent-URL (erforderlich)
width / height	Abmessungen
frameborder="0"	Standardrahmen entfernen
allow="clipboard-write"	Kopieren ermöglichen

Sicherheit

Das iFrame läuft mit eingeschränkten Berechtigungen:

• Skriptausführung
• Same-Origin-Zugriff für den Chat
• Formularübermittlung
• Popups für Links

Auf Inhalte der einbettenden Website hat das iFrame keinen Zugriff.

Fehlerbehebung

iFrame lädt nicht

• Agent-ID prüfen
• Status des Agenten prüfen („Active")
• Browserkonsole auf Fehler prüfen
• Browser-Cache leeren

Darstellung zu klein

• Breite und Höhe erhöhen
• Per CSS reaktionsfähig gestalten
• Auf verschiedenen Bildschirmgrößen testen

Doppelte Bildlaufleisten

iframe {
  overflow: hidden;
}

Script-Tag oder iFrame

Eigenschaft	Script-Tag	iFrame
Schwebendes Widget	ja	nein
Freie Platzierung	nein	ja
Einfache Einrichtung	ja	mittel
Volle Kontrolle über Layout	eingeschränkt	ja

Nächste Schritte

• Einbindung per Script-Tag — schwebendes Widget
• Erscheinungsbild anpassen — Darstellung ändern