iFrame (Embed URL)

iFrame (Embed URL)

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

      Template Settings

      iFrame URL

      After you create a new slide using the iFrame (Embed URL) template, use the iFrame URL field to input an external website or web-based content you want to display.

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

      Considerations

      Some websites may not display in iframes due to security policies like X-Frame-Options or Content-Security-Policy.


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

      2. How to Troubleshoot
        1. Test alternative URLs: Some 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 to  ALLOW-FROM.

      3. Alternative Solutions
        1. Option 1: Instead of an iframe, check 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. Do a Google Search for 'Online iFrame testing tool' to validate any URL's.

      iFrame Width / Height (% or px)

      To fill the screen, set the width and height to 100% or enter your preferred px or % setting to adjust the size of the iframe 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 is positioned 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

        • 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 ...
        • 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 ...
        • 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 ...
        • Training (Panels)

          A Training Template for Learning & Development Traditional training methods frequently struggle with long-term retention, but this template designed for workplace digital signage, organises your training content into bite-sized messaging that ...