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.


        • Announcements

        • Template Updates Now Live

          We’ve rolled out a fresh batch of template enhancements to make designing even smoother: 🖼️ Improved Video Upload Naming The Multi (Video–Weather–Content) template now supports a clearer naming convention for landscape video file uploads. 📱 QR Code

        • SharePoint API Updates

          We’ve made some key improvements behind the scenes to keep your SharePoint integrations running smoothly: ✅ Renamed the "Azure API" module to "SharePoint API" – clearer name, same purpose! 🛠️ Fixed a Cloudflare error that appeared when adding a new SharePoint

        • Template Tour Videos

          We’re excited to introduce videos when you - 'Create New Slide' - to help you explore our templates like never before! Hover over a template to preview its animations and design features. Click the button for a full walkthrough of completed Template Tours.

        • Maximise Communication with Vibe’s Enhanced Desktop Player

          Manage Screensavers, Lock Screens, and Background Wallpaper across your organisation for seamless, subtle communication that reinforces key messages without disrupting workflow. <br> Talk to the Vibe team to discuss activating these