Dokumentacja

Osadzanie w iframe

Osadź pełny interfejs czatu w sekcji strony.

Osadź agenta jako pełny interfejs na swojej stronie zamiast pływającego widżetu. Idealne rozwiązanie dla dedykowanych stron pomocy technicznej lub centrów pomocy.

Kiedy używać iframe

Osadzanie w iframe sprawdzi się, gdy chcesz mieć:

  • Dedykowaną stronę czatu (np. /support lub /help)
  • Czat jako część układu strony
  • Większą kontrolę nad rozmiarem interfejsu czatu
  • Możliwość osadzenia w sekcji dokumentacji lub pomocy

Aby uzyskać pływający dymek czatu, użyj zamiast tego widżetu JavaScript.

Podstawowe osadzenie iframe

  1. Przejdź do zakładki Publikuj swojego agenta
  2. Wybierz typ osadzenia Iframe
  3. Skopiuj wyświetlony kod iframe
  4. Wklej go do swojego kodu HTML

Twój kod iframe zawiera poprawny adres URL z identyfikatorem Twojego agenta. Możesz też kliknąć przycisk „Odwiedź", aby zobaczyć podgląd strony iframe.

Opcje rozmiaru

Po skopiowaniu kodu iframe z Agent > Publikuj możesz dostosować rozmiar:

Stały rozmiar

Ustaw konkretne atrybuty szerokości i wysokości:

width="400"
height="600"

Pełna szerokość

Użyj szerokości w procentach:

width="100%"
height="600"

Pełna wysokość (w kontenerze)

Umieść w kontenerze o wysokości równej wysokości widocznego obszaru:

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

Kontener responsywny

Aby uzyskać czat, który dostosowuje się do rozmiaru ekranu, umieść swój iframe w kontenerze:

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

Stylowanie kontenera

Dodaj do iframe style CSS, aby dopracować jego wygląd:

Z obramowaniem

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

Z cieniem

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

Przykład: strona pomocy

<!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"
    />
  );
}

Dozwolone domeny

Osadzenia iframe respektują ustawienia dozwolonych domen:

  • Dodaj domenę swojej witryny do dozwolonych domen
  • Iframe nie załaduje się na nieautoryzowanych domenach

Skonfiguruj domeny →

Rozwiązywanie problemów

Iframe się nie ładuje

  • Sprawdź, czy Twoja witryna jest uwzględniona w dozwolonych domenach
  • Zweryfikuj, czy identyfikator agenta jest poprawny
  • Sprawdź konsolę przeglądarki pod kątem błędów

Problemy z przewijaniem

  • Ustaw stałą wysokość dla iframe
  • Lub użyj overflow: hidden na kontenerze

Konflikty stylów

  • Iframe jest odizolowany od stylów Twojej strony
  • Style kontenera nie wpłyną na zawartość czatu

Kolejne kroki