6.4 Frontend Nodes
      Back to home
      1. Home
      2. 6: Nodes Reference Guide
      3. 6.4 Frontend Nodes

      iFrame Widget Node Configuration Guide

      The iFrame Widget Node embeds an external webpage, application, or dashboard directly into a Rayven interface panel using an HTML . This enables visualization of third-party systems alongside native Rayven data and controls.

      What It Does

      The iFrame Widget displays an embedded view of a web page at the specified URL. It is useful for referencing external dashboards, live monitoring feeds, reports, forms, or any application that is hosted at a valid and accessible URL.

      Each iFrame instance can be independently configured, styled, and grouped by device label if needed.

       Step-by-Step: How to Configure the iFrame Widget Node

      1. Add the node

        • Drag the iFrame Widget node from the Controls or Widgets section onto your workflow canvas.

      2. Open the configuration panel

        • Double-click the node to open configuration options.

      3. Define the external URL

        • Enter the complete URL of the web content to embed. Ensure the server allows embedding via iframe (i.e., does not send X-Frame-Options: DENY).

      4. Customize UI settings

        • Add titles, tooltips, and configure how many widgets should be displayed based on grouping.

      1. Save and link to a Rayven interface

        • Append to the widget to the interface(s) where it should appear.

       Configuration Fields

      Field Requirement Description
      Widget Name* Required Name of the widget, displayed in the interface.
      URL* Required Full URL of the page to embed (e.g., http://example.com/dashboard). Must use HTTP/HTTPS and be accessible.
      Widget Subtitle Optional Secondary label shown below the widget title.
      Show UID / Label Name Optional Toggle whether to display the UID or device label name on the widget.
      Widget Header Optional Toggle to show or hide the widget’s header section.
      Tooltip Optional Enable a help tooltip for the widget. If enabled, a tooltip text field appears.
      Number of Widgets to Display Optional Choose how widgets are grouped:
      - One widget per label: creates separate widgets based on the selected label.
      - Single widget: one instance for all devices.
      Select Label Optional Select a device label to filter which UIDs the widget applies to. This is required for grouping.
       

       

      Example: Embed a Weather Forecast Dashboard

      Configuration:

      • Widget Name: Weather Dashboard

      • URL: https://forecast7.com/en/37d77n122d42/san-francisco/

      • Widget Subtitle: Live 7-Day Forecast - San Francisco

      • Show UID / Label: Hidden

      • Tooltip: Enabled — “External weather data from Forecast7”

      • Number of Widgets to Display: One unified view

      Result:

      An embedded widget appears in the interface, showing the live 7-day weather forecast for San Francisco, fetched from the Forecast7.com weather platform.

      Best Practices

      • Use HTTPS URLs for secure embedding.

      • Confirm the external site allows iframe embedding (i.e., no X-Frame-Options: DENY).

      • For highly dynamic widgets (e.g., location-specific content), create separate widgets per label if required.

      • Keep widget names specific, especially if multiple are used in the same interface.

       Use Cases

      • Embed external weather platforms, climate monitors, or AQI feeds

      • Show video feeds, map interfaces, or camera dashboards

      • Integrate web-based control panels or visualizations

      • Display help portals, user guides, or live system health status

       FAQ

      Q: Can I embed weather services like Windy, AccuWeather, or OpenWeatherMap?

      A: Yes, provided they allow iframe embedding. You may need to use a public-facing URL or embed widget code if available.

      Q: What if the widget does not display?

      A: The most common issue is that the target website blocks iframe embedding using browser security headers. Try another provider or embed code.