Wyobraź sobie, że Twoja strona wydarzenia staje się interaktywną przestrzenią, w której – obok agendy czy prelegentów – pojawia się transmitowany na żywo stream, dynamiczny formularz zapisu albo mapa dojazdu. Taką elastyczność zapewnia moduł iFrame, oparty bezpośrednio na znaczniku HTML <iframe>.
iFrame działa jak „okno” w strukturze strony: osadza zawartość pochodzącą z innego serwera w ramce, która zachowuje pełną funkcjonalność oryginalnej aplikacji. Dzięki temu możesz wkomponować praktycznie każdy element webowy – od prostych grafik i wykresów aż po całe interfejsy SaaS – bez przebudowy kodu źródłowego swojej strony wydarzenia.
Dlaczego warto?
Spójność doświadczenia użytkownika – uczestnik zostaje na Twojej stronie, więc nie gubi kontekstu wydarzenia.
Bezproblemowa aktualizacja – wszelkie zmiany treści odbywają się po stronie dostawcy, podczas gdy strona wydarzenia wymaga jedynie utrzymania tagu <iframe>.
Płynna integracja – znacznik HTML można dostosować atrybutami (np. width, height, allowfullscreen), tworząc ramkę idealnie dopasowaną do layoutu i potrzeb wydarzenia.
Moduł iFrame sprawia, że strona wydarzenia staje się centralnym hubem – łącząc agendę, multimedia i interaktywne narzędzia w jedno, spójne doświadczenie dla uczestników.
Zapraszam Cię teraz do video przedstawiające jak szybko dodać kod HTML do stron przygotowanych w systemie Meeting Application.
Jak dodać moduł iFrame do Twojej strony wydarzenia:
Jak korzystać z modułu iFrame na landing page'u 
- Watch Video
Instrukcje krok po kroku:
Wejdź na stronę swojego wydarzenia i zaloguj się swoim kontem administratora.
Dzięki temu w prawym dolnym rogu zobaczyć ikonkę klucza:
Następnie kliknij w ikonkę
aby przejść do wyboru modułów by następnie wybrać add module i iframe
Następnie kliknij w + i przejdź do modułu konfiguracji iFrame:
Po dodaniu modułu iFrame do listy, kliknij zapisz, a nowo dodany moduł zobaczysz na samym dole strony w konfiguratorze:
Aby zacząć wprowadzać treści, możesz zacząć od zdefiniowania tytułu sekcji - kliknij plusik obok pola Wybierz klucz tłumaczenia pod Tytuł modułu (możesz też pominąć ten krok - wtedy nie będzie się wyświetlać tytuł sekcji).
Kliknij plusik aby zacząć dodawać nowe wartości. W tym miejscu widzisz dwie wartości:
- new_translation_key → to techniczna nazwa, dzięki której będziesz w stanie znaleźć i rozróżnić odpowiedni element spośród innych
- value → to miejsce na wpisanie wartości; nazwy sekcji, która ma się wyświetlić na stronie lub kod HTML który będzie wstrzykiwany na stronę
Na potrzeby demo wpisane przeze mnie wartości to:
- WHY?
- WHY?
W ten sposób dodałem wartość pozwalającą nazwać mi sekcję którą dodajemy na Stronę Wydarzenia. Dzięki temu na stronie widać nazwę sekcji, którą za chwilę będziemy uzupełniać:
Następnie przechodzimy do faktycznego wklejania treści HTML do nowego modułu. W tym celu klikamy w + w obszarze Custom Fields:
W pole new_translation_key wpisuję WHY? iframe, dzięki czemu będę mógł dodać fragment kodu HTML do bazy Twojego wydarzenia w dowolnym miejscu i momencie.
W pole VALUE wklejam wcześniej przygotowany kod HTML - mój został wygenerowany w ChatGPT, ale oczywiście jeżeli potrafisz programować i stworzyć samodzielnie kod HTML - good for you!
Po dodaniu tych wartości zapisuję dodany moduł klikając Inject:
Następnie na liście wybieram WHY iframe (1) i dzięki temu na stronie wyświetla mi się wstawiony w kroku poprzednim kod HTML. Klikamy Zapisz (2) w ten sposób zapisując konfigurację naszego nowego modułu na Stronie Wydarzenia.
Jak dodać dwie osobne zakładki w module iFrame?
W tym celu klikamy przełącznik Enable Tabs (1) i dodajemy nowy Tab klikając na dole Add Tab (2)B:
Następnie dodajemy nową wartość iFrame według scenariusza opisywanego wyżej w punktach 7-9. Dzięki temu na liście Tab 2 możemy już wybrać nowy kod HTML:
Dzięki temu na Twojej stronie wydarzenia będziesz mógł przełączać się między dwoma oknami z dodaną za pomocą HTML treścią:
Poniżej przygotowaliśmy dla Was listę przydatnych promptów dla ChatGPT (lub innego narzędzia AI), dzięki którym przygotowany przez niego kod HTML będzie uwzględniał wymienione poniżej parametry. Powodzenia!
W treści promptu warto zaznaczyć, że kod powinien być dostosowany zarówno do ekranów komputerów, jak i urządzeń mobilnych. Przykładowa formułka do dodania:
„Proszę dodać media queries, aby zawartość iFrame była odpowiednio dopasowana do różnych rozmiarów ekranów.”
Nie należy stosować height: 100% ani height: 100vh bezpośrednio na body, ponieważ może to zakłócać automatyczne dopasowanie wysokości iFrame. Jeśli takie ustawienia są konieczne, powinny dotyczyć jedynie elementów wewnątrz innych kontenerów (div), a nie głównego body.
Aby zadbać o lepszą responsywność i skalowanie na różnych urządzeniach, warto poprosić o używanie jednostek względnych takich jak em, rem, %, vw, vh zamiast px. Ułatwia to dostosowanie wyglądu do różnych ekranów i ustawień użytkownika.
Im mniej zależności z zewnątrz (np. jQuery, Bootstrap), tym większa szansa, że wszystko zadziała bez problemów w środowisku iFrame.
Propozycja do promptu:
„Proszę nie używać zewnętrznych bibliotek – kod powinien być napisany w czystym HTML, CSS i JS.”
Aby uniknąć konfliktów stylów pomiędzy zawartością iframe a otaczającą stroną (tzw. „wyciekanie stylów”), warto dodać do promptu informację o stosowaniu unikalnych prefiksów dla wszystkich klas CSS.
Propozycja do promptu:
„Proszę, aby wszystkie klasy CSS miały wspólny unikalny prefiks (np. .myapp-), aby zapobiec konfliktom stylów w iframe.”
!important:color: #ffffff !important; <html>, <body>)Z uwagi na to, że iframe sam generuje kontekst dokumentu (w tym <html> i <body>), nie ma potrzeby, by kod zawierał te elementy. Wystarczy sama treść HTML w odpowiednich tagach (np. <div>, <section> itp.).
Propozycja do promptu:
„Nie dodawaj tagów <html>, <head>, ani <body> – kod powinien zawierać jedynie to, co ma być wyświetlane wewnątrz iframe, np. same znaczniki <div>, <section> itd.”
Ze względu na sposób, w jaki skrypty JavaScript są osadzane w iframe, ich treść powinna być przekazywana osobno – nie jako część <script> w pliku HTML.
Propozycja do promptu:
„Proszę oddzielić kod HTML, CSS i JavaScript. Nie umieszczaj skryptu JavaScript wewnątrz tagu <script> w HTML – jego zawartość powinna być przygotowana jako osobny blok do wklejenia.