---
title: "Adding an iFrame module"
description: "Adding any HTML content to the Event Page"
url: https://help.meetingapplication.com/en/articles/9497446-adding-an-iframe-module
collection: "Landing Page"
updated: 2026-10-16
language: en
alternates: [pl]
---

# Adding an iFrame module

Adding any HTML content to the Event Page

Imagine your event page turning into an interactive space where – next to the agenda and speakers – you get a live streamed broadcast, a dynamic signup form, or a map to the venue. This kind of flexibility comes from the **iFrame** module, which is based directly on the HTML tag `<iframe>`.

> **Warning:** The iFrame module requires a bit of specialist knowledge. Meeting Application lets you use this module, but the setup and final result are up to your event Administrators.

iFrame works like a “window” in your page structure: it embeds content from another server inside a frame that keeps all the functionality from the original app. That way, you can fit just about any web element in – from simple graphics and charts all the way to full SaaS interfaces – without needing to rebuild the source code of your event page.

**Why is it worth it?**

1.  **User experience consistency** – the participant stays on your site, so they don't lose the context of the event.
    
2.  **Seamless updates** – any content changes happen on the provider’s side, while the event page just needs to keep the `<iframe>` tag.
    
3.  **Smooth integration** – the HTML tag can be tweaked with attributes (like `width`, `height`, `allowfullscreen`), so you can create a frame that fits perfectly with the event’s layout and needs.
    

The iFrame module makes your event page a central hub—connecting agenda, multimedia, and interactive tools all in one smooth experience for participants.

> **Error:** **WARNING**
> In internal browsers (like in Messenger or WhatsApp), iFrame modules with JavaScript won’t show up right. Open event pages with an external browser.

Let me invite you now to a video showing you how to quickly add HTML code to pages prepared in the Meeting Application system.

**How to add an iFrame module to your event page:**

[How to use the iFrame module on a landing page](https://www.loom.com/share/fafaf5f6d9bf4f53a94d39157ee0eb36) 🚀 [- Watch Video](https://www.loom.com/share/fafaf5f6d9bf4f53a94d39157ee0eb36)

**Step by step instructions:** 

1.  Go to your event page and log in with your admin account.
    
2.  This way, you'll see a key icon in the bottom right corner:
    
    ![](https://staticfiles.gleap.io/ghelparticle/CoAY5I4uuiyLkAw3oKM5KAgZQIOwG3wVe61e8sGVmfS5BJX4Lm8OtV6hDzgNxXQvUfy23NdagOH.png)
    
3.  Then click the icon 
    
    ![](https://staticfiles.gleap.io/ghelparticle/e2LureNYp4q5PfgiztVcdtk8cmna5aWEa4k1Y8JwKiTyyCMiD1C2AHMdSJx2XhdWJUDWgk4mq5j.png)
    
     to open module selection and then pick **add module** and **iframe**  
    
4.  Next, click the + and go to the iFrame configuration module: 
    
    ![](https://staticfiles.gleap.io/ghelparticle/2eG0UWmXDqtD9PW2JlcqriTsXaLPkSA3sVaXXZplKsxQWax0pLFMxjkTQaWuxpSroyrHlZoLKEG.png)
    
5.  After adding the iFrame module to the list, click **save**, and you'll see your newly added module at the very bottom of the page in the configurator:  
    
    ![](https://staticfiles.gleap.io/ghelparticle/JVPNRiGqUzpOgOj00SgyDznLQPYihzRy5UP4N3qt8EPQYLxIKanWiDfJVFIEWKAIoNRq2mQZWkf.png)
    
6.  To start adding content, you can start by setting a section title - click **the plus** next to the **Choose translation key** field under **Module title** (you can skip this step - then the section title won't show up).
    
7.  Click **plus** to start adding new values. Here are two values you'll see: 
    
    -   \- **new\_translation\_key** → this is the technical name that'll let you find and tell apart the right element from the rest
        
    -   \- **value** → this is where you enter the value; that's the section name that'll show on the page or the HTML code that'll be injected
        
    
    ![](https://staticfiles.gleap.io/helparticle/20250506074918_8577.png)
8.  For demo purposes, the values I typed in are:
    
    \- WHY?
    
    \- WHY?
    
    This way, I added a value letting me name the section we're adding to the Event Page. Now, you'll see the section name on the page, and we'll fill it in next:
    
    ![](https://staticfiles.gleap.io/ghelparticle/FQzzjuFhjwUU8OezLgQ59P9zJDhR9DNOtwLVUelLPYm2eVaRGoeFC8VHIjmhFmvptOkRhlR8Jg0.png)
    
9.  Now we're moving on to actually pasting HTML content into the new module. For that, we click **+** in the Custom Fields area:  
    
    ![](https://staticfiles.gleap.io/ghelparticle/WtTH4AeulC9enbtotWp47aLf3MMg6ZjSZEX5f0yJJT73YVSFsx6gyfyhJRXyf8JpQuwD85bP0kd.png)
    
10.  In the **new\_translation\_key** field I type **WHY? iframe**, so I can add a chunk of HTML code to your event's database any time, anywhere. 
     
     In the **VALUE** field I paste the HTML code I prepared earlier – mine was generated in ChatGPT, but if you know how to code and make your own HTML – good for you!  
     
11.  Once those values are added, I save the added module by clicking **Inject**:  
     
     ![](https://staticfiles.gleap.io/ghelparticle/8C3eiXZ5KOTnVsEqvFSs4r3Q58LdiuRl3rSDxcdYLQH4QDgOdWq8hKvMGg79jpWoIM1u5DXgAuU.png)
     
12.  Then from the list I pick **WHY iframe (1)** and now the HTML code I added in the previous step will show up on the site. Click **Save (2)** to save your new module configuration on the Event Page.
     
     ![](https://staticfiles.gleap.io/helparticle/20250506075327_6791.png)
     
       
     **How do I add two separate tabs in the iFrame module?**  
     

1.  To do this, click the **Enable Tabs (1)** switch and add a new Tab by clicking **Add Tab (2)B:**
    
    ![](https://staticfiles.gleap.io/ghelparticle/USYVtU5dBGe2Ep0zSXsPluEIgjrEKJyf1pdymmNVcq3zaPrlUKG6hQfWrPsudyPxnlArZtUkgJo.png)
    
2.  Next, add a new iFrame value according to the scenario described above in steps 7-9. This way, in the Tab 2 list, you can now pick the new HTML code:
    
    ![](https://staticfiles.gleap.io/helparticle/20250506075514_5131.png)
3.  This lets you switch between two windows with HTML content added on your event page:
    
    ![](https://staticfiles.gleap.io/ghelparticle/EVrgJ4TUlNT9Uodu1CWJQGL3qWfheCzpWsZxeSJekt3IXPsqcU5z3cNuyCw5d2Csi7BTBFsM3Jp.png)
    

## Useful info about adding elements to your page with the iFrame module

Below we've put together a list of handy prompts for ChatGPT (or another AI tool), so the HTML code it creates takes the parameters below into account. Good luck!

## Responsiveness

It's a good idea to mention in your prompt that the code should be adjusted for both desktop and mobile screens. Here's an example line you can add:

**“Please add media queries so the iFrame content fits different screen sizes properly.”**

* * *

### Avoiding height overrides

You shouldn’t use `height: 100%` or `height: 100vh` directly on `body`, because it can mess with the automatic iFrame height adjustment. If you do need those settings, only apply them to elements inside other containers (like `div`), not on the main `body`.

* * *

### Using relative units instead of pixels

To make your site more responsive and scale better across different devices, it’s a good idea to use relative units like `em`, `rem`, `%`, `vw`, `vh` instead of `px`. That way it’s easier to adjust the look for different screens and user settings.

* * *

### Minimize using external libraries

The fewer external dependencies (e.g. jQuery, Bootstrap), the more likely everything will work smoothly in an iFrame environment.

**Prompt suggestion:**

“Please don’t use external libraries – the code should be written in plain HTML, CSS and JS.”

### Isolating styles using CSS class prefixes

To avoid style conflicts between the iframe content and the surrounding page (so-called “style leaking”), it’s a good idea to add a note to your prompt about using unique prefixes for all CSS classes.

**Prompt suggestion:**

“Please make sure all CSS classes use a common unique prefix (e.g. `.myapp-`), to prevent style conflicts inside the iframe.”

> **Info:** **PRO TIP:**
> If you want to make sure your element **doesn't inherit the color** from parent styles or external CSS, you can use the `!important` declaration:
> `color: #ffffff !important;`
> This way the browser will ignore other rules (even those with higher specificity) and your color will be applied no matter what.

* * *

### Avoiding full HTML structure (like `<html>`, `<body>`)

Since an iframe generates its own document context (including `<html>` and `<body>`), you don't need your code to include those elements. It's enough to just have the HTML content inside the proper tags (like `<div>`, `<section>` etc.).

**Prompt suggestion:**

“Don’t add the `<html>`, `<head>`, or `<body>` tags – the code should only include whatever you want to show inside the iframe, like just `<div>`, `<section>` etc.”

* * *

### Separate HTML, CSS and JavaScript files

Because of the way JavaScript scripts get embedded in an iframe, their content should be provided separately – not as part of a `<script>` element in the HTML file.

**Prompt suggestion:**

“Please separate the HTML, CSS, and JavaScript code. Don’t put the JavaScript inside a `<script>` tag in the HTML – its content should be a separate block to copy and paste.