iFrame (Embed URL)

iFrame (Embed URL)

      The iFrame template is perfect for embedding websites, dashboards, or online content directly into your workplace digital signage channel. This feature unlocks a range of possibilities for seamlessly displaying real-time data, dynamic content, and web applications.

      Template Settings

      iFrame URL

      After creating a new slide using the iFrame (Embed URL) template, enter the external website or web-based content in the iFrame URL field.

      Info
      Before adding your slide to a playlist, test the URL to ensure it loads properly within the iFrame.

      Considerations

      Some websites may not display in an iFrame due to security policies such as X-Frame-Options or Content-Security-Policy.


      1. Why Some URLs Don’t Work in an iFrame
        1. Websites often implement security headers such as X-Frame-Options (e.g., DENY, SAMEORIGIN) or Content-Security-Policy (CSP) to prevent iFrame embedding.
        2. These measures protect against clickjacking attacks or unauthorized embedding.

      2. How to Troubleshoot
        1. Test alternative URLs: Certain pages may have different security configurations.
        2. Check with the website owner: They may be able to adjust the X-Frame-Options or CSP headers.
          1. Example configurations:
            1. Allow specific domains: Content-Security-Policy: frame-ancestors 'self'             https://example.com.
            2. Remove             X-Frame-Options or set it to ALLOW-FROM.

      3. Alternative Solutions
        1. Option 1: Instead of using an iFrame, explore Vibe's Integration options.
        2. Option 2: If your IT team can modify the website, we recommend:
          1. Updating the X-Frame-Options or CSP headers to allow iframe embedding.
          2. Configuring CORS settings to allow cross-origin requests from the relevant domains.

      4. Helpful Resources
        1. Search for 'Online iFrame testing tool' on Google to validate any URL's.

      ​iFrame Width / Height (% or px)

      To fill the screen, set the width and height to 100% or specify your preferred pixel (px) or percentage (%) settings to adjust the iFrame size within the slide.
      Check that the dimensions match the content you’re embedding to avoid cut-offs or display issues.
      Optional: Upload a 600x135 (px) graphic to use as a footer banner.  The image appears in the bottom-left corner and is designed to animate on and off the screen every few seconds.
      This feature helps capture attention by periodically introducing important information or branding in a dynamic way.


        • Related Articles

        • Multi (Video-Weather-Content)

          This versatile slide allows you to feature a video that can be either uploaded directly or linked from external sources, such as YouTube videos or M3U8 channels. In addition to the video, the slide includes a side panel with a comprehensive 5-day ...

        • Livestream

          Livestream a YouTube video or M3u8. Slide settings will allow your to turn subtitles on/off, adjust Volume and possibly adjust your video quality to allow for better performance if your screen WiFi is bad. Pre-designed Default error visuals and any ...

        • Training (Messages)

          Slide Inspo ​ ​ Template Data Tips Sheet Column Content Required Content Heading Any text YES Content Summary1 Any text YES Content Summary2 Any text. If you want to show multiple messages on the slide, you can separate them with a new line and a ...

        • Training (Bubbles)

          A Training Template for Learning & Development. This template organises your training content into bite-sized messaging that captures attention and improves retention. Developed with effective ‘spaced repetition’, this template ensures that essential ...

        • Graph Churn

          Slide Inspo ​ Data Template Tips Step 1: In your Vibe portal, open the Slide manager and: Open your 'Graph Churn' slide or, Create a slide using the 'Graph Churn' template Step 2: To download the XLSX data template, choose 'File Upload...' in the ...