--- title: "Example uses of IFrame" description: "Use ready-made IFrames from Meeting Application to make your event page really \"come alive\"" url: https://help.meetingapplication.com/en/articles/9497448-example-uses-of-iframe collection: "Landing Page" updated: 2026-10-16 language: en alternates: [pl] --- # Example uses of IFrame Use ready-made IFrames from Meeting Application to make your event page really "come alive" You've organized an event, got a mobile app, a website… but you want everything to work together and make sure your participants have access to all the key info in one place? That's where iframes come in – small bits of code you can paste onto your site to display things like extra announcements, your own photo gallery, a button to your newsletter – really, the possibilities are endless. In Meeting Application, we’ve put together ready-to-go iframes for the most commonly used components – just copy, paste, and you’re set. In this article, we’ll show you a few sample configurations you can set up in 5 minutes, and your attendees will love it. 🚀 > **Info:** **PRO TIP:** > If you want to make sure your element **doesn't inherit the color** from parent styles or from external CSS, you can use the `!important` declaration: > `color: #ffffff !important;` > That way, the browser ignores any other rules (even the ones with higher specificity) and your color will always show up, no exceptions. ## Single photo ![](https://staticfiles.gleap.io/helparticle/20250522130016_3356.png) **1\. Changing the photo and its description** In the HTML code find the `` element, e.g.: ```javascript html ``` To replace the photo: - Change the `src` value to the full image URL found **on the internet** (like on your own server or a photo site). > **Warning:** Don't use files from your computer – the photo has to be online. To change the description: - The `alt` value should be short and tell what’s on the image (e.g. "Outdoor concert"). * * * **2\. Changing the frame color** In the `        
      Zdjęcie Pary w Nowym Jorku    
  ``` ## Photo collage ![](https://staticfiles.gleap.io/helparticle/20250522130049_4017.png) **1\. Changing the photo and its description** In the HTML code, find the `` elements, for example: ```javascript ``` To swap the photo: - Swap the `src` address for a new link to a photo **hosted online** – for example, on your own server or from another platform (istockphoto, unsplash, etc.). > **Warning:** Don't use files from your computer – the photo has to be available online. To change the description: - Enter new content in `alt`, e.g. `"Concert at night"` – it should describe what's in the picture. * * * **2\. Adding a new photo** To add a new photo in the right column (at the bottom): 1. Copy the whole block with the class `.small-frame`, for example: ```javascript
``` Paste it below the last `.small-frame`, before the end of `` closing `.right-column`. * * * **3\. Changing the border color** In `        
     
        Festival – heart in hands      
     
       
          Couple in New York        
       
          Crowd at concert        
     
   
  ``` ## Photo carousel ![](https://staticfiles.gleap.io/helparticle/20250522130246_5435.png) #### **1\. Changing the photo and its description** In your HTML code, find the `` elements, for example: ```javascript ``` To swap out the photo: - Replace the `src` with a new link to a photo **that's available online** – for example, on your own server or from an external platform (istockphoto, unsplash, etc.). > **Warning:** Don't use files stored locally on your computer – the photo needs to be available online. To change the description: - Enter new text in `alt`, e.g. `"Concert at night"` – it should describe what's in the photo. * * * #### 2\. **How to add a photo to the carousel** Look in the HTML code for the section with `
`. Inside it are photos added as `` tags: ```javascript
``` Each photo in the carousel is one `` tag. To add your own photo: - Copy the existing tag ``, - Paste it below (inside `.carousel-track`), - Change the value in `src` to **a link to your photo on the Internet**, - Change `alt` to a short description of what's in the photo (important for accessibility and SEO). **HTML code to copy:** ```javascript               Photo Carousel            
           
       
          Photo 1           Photo 2           Photo 3           Photo 4        
     
         
      ``` ## FAQ Section (rotating tiles) ![](https://staticfiles.gleap.io/helparticle/20250522130308_9963.png) 1. **Changing the question and answer text** Each question and answer is placed inside elements `
` and `
`. Example: ```javascript
Jak mogę się zarejestrować?
Aby się zarejestrować, kliknij "Zarejestruj się" i wypełnij formularz.
``` **To edit:** - Change the question in the element `
` - Change the answer in the element `
` - To add a new question and answer, copy the entire block `
  • ...
    • ` and paste it below, changing the texts as you need. * * * 2. **Changing the section title** - The title “Najczęściej zadawane pytania” is in the header `

    `. You can change it to whatever text you want: ```javascript

    Najczęściej zadawane pytania

    ``` * * * 3. **Changing the text color** The text color (questions and answers) is defined in the CSS styles. - Header text color `

    `: ```javascript color: #444; ``` - You can change this color to anything you want, for example: - `#000000` (black) - `#FF6347` (tomato) - `#F5670A` (orange) - The text color on the flip side of the tile (the answer) is set to: ```javascript color: #444; ``` Changing this color works pretty much the same way as for the header. * * * 4. **Changing the background color** The background color for the whole FAQ container is set to white in the class `.faq-container`: ```javascript background: #fff; ``` - You can change it to any color, for example: - `#f0f0f0` (gray) - `#f1f1f1` (very light gray) - `#fec603` (light yellow) - The background color of the tiles (questions) is set in the class `.faq-tile`: ```javascript background: #fec603; ``` - You can change it to any color you want, for example: - `#4CAF50` (green) - `#FF5733` (red) - The back of the tile (answer) has the color: ```javascript background: #f1f1f1; ``` **HTML code to copy:** ```javascript               Frequently Asked Questions            
         

    Frequently Asked Questions

         
             
    •          
                 
      How can I sign up?
                 
      To sign up, click "Sign up" and fill out the form.
               
             
      •        
    •          
                 
      Can I change my details?
                 
      Yes, you can edit your details in your account settings.
               
             
      •        
    •          
                 
      How do I contact support?
                 
      You can use the contact form or send an email.
               
             
      •      
       
          ``` ## FAQ Section (expandable tiles) ![](https://staticfiles.gleap.io/helparticle/20250522130332_9760.png) **1\. Changing the questions and answers** Each question and answer is inside the `
  • ` tag. **Example:** ```javascript
    Jak mogę się zarejestrować?
    Aby się zarejestrować, kliknij przycisk "Zarejestruj się" na stronie głównej i wypełnij formularz rejestracyjny.
    ``` To edit: - replace the content of the question in `
    ` - change the answer inside `
    ` You can also add new questions by copying the whole block `
  • ...
    • ` and pasting it below. * * * **2\. Changing the section title** The title “Frequently Asked Questions” is in the header `

    `. You can change it to whatever you want: ```javascript

    Najczęściej zadawane pytania

    ``` * * * **3\. Changing the text color** The text color is set by: ```javascript color: #ffffff; ``` This setting is at the top of the styles for `body`, `h2`, `.faq-question` and `.faq-answer`. You can swap it for any color, for example: - `#000000` (black) - `#333333` (dark gray) - `#F5670A` (orange) If you want the questions and answers to be darker (like, on a light background), change `color` like this: ```javascript color: #333333; ``` * * * **4\. Change the background color** The background color of the whole FAQ block is set in the `.faq-container` class: ```javascript background-color: #fec603; ``` Swap this color for another one – for example: - `#f0e1c4` – light beige - `#ffffff` – white - `#1a1a1a` – dark gray **HTML code to copy:** ```javascript               Frequently Asked Questions            
         

    Frequently Asked Questions

         
             
    •          
                 
      How can I sign up?
                           
               
                  To sign up, just click the "Sign Up" button on the homepage and fill out the registration form.          
             
      •        
    •          
                 
      Can I change my information?
                           
               
                  Yep, you can edit your info in account settings after you log in.          
             
      •        
    •          
                 
                    How do I contact technical support?            
                           
               
                  You can reach our support team by using the contact form on the "Contact" page or by sending an email to support@example.com.          
             
      •        
    •          
                 
                    Will there be student discounts available?            
                           
               
                  Yes, there are special discounts for students. You’ll find all the details about discounts on the tickets page.          
             
      •        
    •          
                 
                    Will it be possible to get an invoice?            
                           
               
                  Yes, you’ll be able to enter invoice details when buying your ticket.          
             
      •      
       
          ``` ## Guide ![](https://staticfiles.gleap.io/helparticle/20250522130722_9296.png) #### **1\. Editing questions and answers** The questions and answers content is inside the `
      `. Each question is a `
      `, and the answer is just below it in `
      `. **Example:** ```javascript
      Gdzie mogę odebrać opaskę wstępu?
      Opaski wstępu można odebrać w punkcie akredytacyjnym przy wejściu...
      ``` You can change: - questions (e.g. for “Where can I find the festival map?”) - answers (e.g. “Maps will be available at the info point and in the mobile app.”) To add a new question, copy the whole block `
    • ...
      • ` and paste it below, changing its content. * * * #### **2\. Changing the section title** The title of the header is in the `

      ` tag: ```javascript

      Poradnik uczestnika festiwalu

      ``` Just change the text inside, for example to: - “Key info” - “Useful tips for participants” * * * #### **3\. Changing the photo** The image is inside the `` element inside the container `.guide-image`. **Example:** ```javascript ``` You can change: - the `src` attribute – paste a new link to your photo > **Warning:** Don't use local files from your computer – the photo has to be online. - the `alt` attribute – type a description for your new photo, e.g. "View of a festival stage" * * * #### **4\. Change the background color** The background color of the question block is set in the class `.guide-container`: ```javascript background: #fec603; ``` You can swap `#fec603` for any color: - HEX code, for example `#222831` - RGB, for example `rgb(255, 0, 0)` - named color, for example `darkblue`, `lightgray` * * * #### **5\. Changing the text color** The text color is set in a lot of places as: ```javascript color: #ffffff; ``` It controls: - header color (`

      `) - questions and answers - plus/minus icons (`.guide-toggle`) You can swap `#ffffff` (white) for another color, e.g.: - `#333333` (dark gray) - `black` - `#00ADB5` (turquoise) **HTML code to copy:** ```javascript               Frequently Asked Questions            
           
             

      Festival Goer’s Guide

             
                 
      •            
                     
        Where can I pick up my entry wristband?
                                 
                   
                      You can pick up your entry wristband at the accreditation point by the festival entrance. Just show your ticket and ID.            
                 
        •          
      •            
                     
                        What can I bring to the festival grounds?              
                                 
                   
                      You can bring a small backpack, a water bottle (0.5l, plastic, without a cap), a picnic blanket, and a power bank. Dangerous items aren’t allowed.            
                 
        •          
      •            
                     
                        Will there be food stalls available?              
                                 
                   
                      Yep, there will be food trucks and food zones at the festival offering vegetarian, vegan, and gluten-free dishes.            
                 
        •          
      •            
                     
                        Will there be toilets and medical points at the festival?              
                                 
                   
                      All around the area you'll find marked portable toilets and first aid points with qualified medical staff.            
                 
        •        
           
           
              Obrazek      
         
            ``` ## Event info ![](https://staticfiles.gleap.io/helparticle/20250522130751_9099.png) #### 1\. Changing the content The content is inside `

      ` elements in the `.event-info` block. For example: ```javascript

      Data: 15 grudnia 2024

      ``` You can change: - **Titles** (`Data:`, `Miejsce:`, etc.) – e.g. change to “Date”, “Location”. - **Text content** after the colon – e.g. a new date, time, or event description. * * * #### 2\. Changing the title The heading is in the `

      ` tag: ```javascript

      Informacje o wydarzeniu

      ``` Just change the text inside, e.g. to "Event details" or any title you want. * * * #### 3\. Changing the text color In the `        
           

      Event information

           
             

                Date: December 15, 2024        

             

                Place: Sports and Entertainment Hall, ul. Przykładowa 123, Warsaw        

             

                Hours: 10:00 AM - 6:00 PM        

             

                Description: Join us for an unforgettable event! You can look forward to expert lectures, hands-on workshops, and lots of attractions. It's a perfect chance to make new connections and gain valuable knowledge. Don't miss this opportunity!        

               

                Organizer: Code Academy        

           
         
        ```