Osadzenie w iframe

Agent jako samodzielny element iframe.

Kiedy wybrać iframe

Osadzenie w iframe sprawdza się, gdy:

• chcesz w pełni kontrolować miejsce widżetu,
• czat ma być w konkretnym obszarze strony,
• potrzebujesz własnych rozmiarów i pozycji,
• osadzasz czat w istniejącym oknie modalnym lub panelu bocznym.

Do pływającego widżetu użyj osadzenia skryptem.

Pobranie kodu iframe

1. Wejdź do panelu
2. Wybierz agenta
3. Otwórz Settings > Integration
4. Skopiuj kod iframe

Podstawowy kod

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

Zamień YOUR_CHATBOT_ID na identyfikator swojego agenta.

Rozmiary

Stały rozmiar

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

Responsywnie (na całą szerokość kontenera)

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

Zalecane minimum

• Szerokość: min. 300 px (zalecane 350–400 px)
• Wysokość: min. 400 px (zalecane 500–600 px)

:::warning Zbyt małe rozmiary Bardzo mały iframe utrudnia korzystanie z czatu. Przetestuj widok na telefonie. :::

Stylowanie

Usunięcie ramki

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

Zaokrąglone rogi

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

Cień

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

Przykłady zastosowań

Panel boczny

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

Okno modalne

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

Czat na pełną stronę

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

Atrybuty

Atrybut	Do czego służy
src	Adres agenta (wymagany)
width / height	Wymiary
frameborder="0"	Usunięcie domyślnej ramki
allow="clipboard-write"	Możliwość kopiowania

Bezpieczeństwo

Iframe działa z ograniczonymi uprawnieniami:

• wykonywanie skryptów,
• dostęp same-origin dla samego czatu,
• wysyłka formularzy,
• okna pop-up dla linków.

Iframe nie ma dostępu do treści strony, na której jest osadzony.

Rozwiązywanie problemów

Iframe się nie ładuje

• Sprawdź poprawność identyfikatora agenta
• Upewnij się, że agent ma status „Active"
• Sprawdź konsolę przeglądarki
• Wyczyść pamięć podręczną

Za mała przestrzeń na treść

• Zwiększ szerokość i wysokość
• Ustaw responsywność w CSS
• Przetestuj na różnych ekranach

Podwójne paski przewijania

iframe {
  overflow: hidden;
}

Skrypt czy iframe

Cecha	Skrypt	iframe
Pływający widżet	tak	nie
Dowolne umiejscowienie	nie	tak
Łatwość wdrożenia	wysoka	średnia
Kontrola nad układem	ograniczona	pełna

Następne kroki

• Osadzenie skryptem — pływający widżet
• Dostosuj wygląd — wygląd agenta