Dokumentation

Iframe-Einbettung

Betten Sie die vollständige Chat-Oberfläche in einen Seitenabschnitt ein.

Betten Sie den Agenten als vollständige Oberfläche in Ihre Seite ein – anstelle eines schwebenden Widgets. Ideal für dedizierte Support-Seiten oder Hilfebereiche.

Wann Sie ein Iframe verwenden sollten

Verwenden Sie die Iframe-Einbettung, wenn Sie Folgendes möchten:

  • Eine dedizierte Chat-Seite (z. B. /support oder /help)
  • Der Chat soll Teil des Seitenlayouts sein
  • Mehr Kontrolle über die Größe der Chat-Oberfläche
  • Einbettung in Dokumentations- oder Hilfebereiche

Für eine schwebende Chat-Blase verwenden Sie stattdessen das JavaScript-Widget.

Einfache Iframe-Einbettung

  1. Gehen Sie zum Tab Veröffentlichen Ihres Agenten
  2. Wählen Sie den Einbettungstyp Iframe
  3. Kopieren Sie den angezeigten Iframe-Code
  4. Fügen Sie ihn in Ihr HTML ein

Ihr Iframe-Code enthält bereits die richtige URL mit Ihrer Agent-ID. Sie können auch auf die Schaltfläche Besuchen klicken, um die Iframe-Seite in der Vorschau zu öffnen.

Größenoptionen

Nachdem Sie Ihren Iframe-Code aus Chatbot > Veröffentlichen kopiert haben, können Sie die Größe anpassen:

Feste Größe

Legen Sie feste Attribute für Breite und Höhe fest:

width="400"
height="600"

Volle Breite

Verwenden Sie eine prozentuale Breite:

width="100%"
height="600"

Volle Höhe (in einem Container)

Betten Sie es in einen Container mit Viewport-Höhe ein:

<div style="height: 80vh;">
  <!-- Your iframe with width="100%" height="100%" -->
</div>

Responsiver Container

Für einen responsiven Chat, der sich an die Bildschirmgröße anpasst, betten Sie Ihr Iframe in einen Container ein:

<div style="position: relative; width: 100%; max-width: 500px; height: 0; padding-bottom: 120%;">
  <!-- Your iframe with position: absolute; top: 0; left: 0; width: 100%; height: 100%; -->
</div>

Den Container stylen

Fügen Sie CSS-Stile für den letzten Schliff hinzu:

Mit Rahmen

style="border: 1px solid #e5e7eb; border-radius: 8px;"

Mit Schatten

style="border: none; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);"

Beispiel: Support-Seite

<!DOCTYPE html>
<html>
<head>
  <title>Support - Your Company</title>
  <style>
    .support-container {
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
    }
    .chat-frame {
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="support-container">
    <h1>How can we help?</h1>
    <p>Chat with our AI assistant below:</p>

    <div class="chat-frame">
      <!-- Paste your iframe code from Chatbot > Publish here -->
    </div>
  </div>
</body>
</html>

React / Next.js

export function SupportChat() {
  // Get iframe URL from Chatbot > Publish
  const iframeUrl = 'YOUR_IFRAME_URL';

  return (
    <iframe
      src={iframeUrl}
      className="w-full h-[600px] border rounded-lg"
    />
  );
}

Domain-Einschränkungen

Iframe-Einbettungen respektieren Domain-Einschränkungen:

  • Fügen Sie Ihre Website-Domain zu den zulässigen Domains hinzu
  • Das Iframe wird auf nicht autorisierten Domains nicht geladen

Domains konfigurieren →

Fehlerbehebung

Iframe lädt nicht

  • Prüfen Sie, ob Ihre Website in den Domain-Einschränkungen enthalten ist
  • Stellen Sie sicher, dass die Agent-ID korrekt ist
  • Prüfen Sie die Browser-Konsole auf Fehler

Scroll-Probleme

  • Legen Sie eine feste Höhe für das Iframe fest
  • Oder verwenden Sie overflow: hidden für den Container

Styling-Konflikte

  • Das Iframe ist von den Styles Ihrer Seite isoliert
  • Container-Styles wirken sich nicht auf den Chat-Inhalt aus

Nächste Schritte