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.
W przeglądarkach wewnętrznych np. w Messengerze i Whatsappie, moduły iFrame z JavaScriptem nie będą się wyświetlały poprawnie. Otwieraj strony wydarzeń za pomocą zewnętrznej przeglądarki.
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ą:
Przydatne informacje dotyczące dodawania elementów na stronie za pomocą modułu iFrame
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!
Responsywność
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.”
Unikanie nadpisywania wysokości
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.
Użycie jednostek względnych zamiast pikseli
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.
Minimalizowanie użycia zewnętrznych bibliotek
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.”
Izolowanie stylów za pomocą prefiksów klas CSS
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.”
Jeśli chcesz upewnić się, że Twój element nie odziedziczy koloru z nadrzędnych stylów lub z zewnętrznego CSS, możesz użyć deklaracji
!important:color: #ffffff !important; Dzięki temu przeglądarka zignoruje inne reguły (nawet te o wyższej specyficzności), a Twój kolor zostanie zastosowany bez wyjątku.
Unikanie pełnej struktury HTML (np. <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.”
Oddzielne pliki HTML, CSS i JavaScript
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.