View interfaces & Dashboards
      Back to home
      1. Home
      2. 6: Interfaces & Dashboards
      3. View interfaces & Dashboards

      Adding Third-Party Apps to Rayven.io Dashboards Using Iframes

      Rayven.io allows you to seamlessly integrate third-party apps into your dashboards, creating a unified and versatile workspace.

      Rayven.io allows you to enhance your dashboards by embedding third-party applications using Iframes. This creates a unified, centralized interface where users can interact with internal workflows and external tools—all in one place.

      Introduction

      Rayven Interfaces & Dashboards are highly customizable and support integration of external web applications. By embedding apps via Iframes, you can display third-party tools such as analytics platforms, video feeds, and collaboration apps without switching platforms.

      What Is an Iframe?

      An Iframe (Inline Frame) is an HTML element that embeds another web page or application within your current dashboard. It acts like a window that loads content from an external URL directly into a Rayven HTML widget.

      How to Add an Iframe to a Rayven Dashboard

      Step 1: Obtain the Iframe Code

      • Go to the third-party app you want to embed

      • Locate the Iframe embed code (usually under a "Share" or "Embed" option)

      • Confirm that:

        • The app allows embedding

        • The content is optimized for Iframe viewing

      Example:

      html
      CopyEdit
      <iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>

      Step 2: Add the Iframe to Your Dashboard

      1. Open the Interface Builder or Dashboard Editor

        • Log into Rayven.io

        • Navigate to the dashboard where you want to embed the app

      2. Add an HTML Widget

        • Drag in an HTML or HTML v2 widget

        • Open the widget’s settings panel

      3. Paste the Iframe Code

        • Insert the full Iframe HTML snippet into the widget body

        • Adjust the width and height as needed for layout consistency

      4. Save and Preview

        • Save your dashboard

        • Preview the widget to confirm the embedded app displays and functions correctly

      Step 3: Check User Access

      Some embedded apps require separate authentication or permission:

      • Make sure users have access to the external service (e.g., logged-in Google or Microsoft session)

      • Provide instructions or fallback messaging if the content fails to load due to permissions

      Example Use Cases

      Use Case Description
      Embedded Analytics Show Google Analytics, Power BI, or Tableau dashboards inside Rayven
      Live Data Feeds Display real-time feeds from surveillance systems or external platforms
      Collaboration Apps Embed tools like Jira, Slack, or MS Teams for seamless workflow collaboration
      Customer Portals Embed help desk views or CRM dashboards from third-party apps
       

      Important Considerations

      • Third-Party Restrictions: Some platforms (like Google Docs or Facebook) block Iframe embedding—check app documentation or use preview mode to test

      • Performance Impact: Each Iframe adds load time; limit the number of simultaneous embeds for better dashboard responsiveness

      • Security: Avoid embedding untrusted sources. Consult your IT/security team if sensitive data is involved

      Summary

      Task How to Do It
      Add third-party content Paste Iframe code into an HTML widget
      Adjust layout Set width and height in the Iframe tag
      User access Ensure they can access the embedded app separately if needed
      Supported content Any web app or service that allows Iframe embedding
       

      Embedding third-party apps into Rayven dashboards via Iframes lets you bring multiple platforms together—without the need for platform switching or custom integrations.

      Q&A

      Q: Can I embed any website using an Iframe in Rayven?
      A: Only if the external site allows Iframe embedding. Some services block it for security reasons.

      Q: Will users need to log in separately to view the embedded app?
      A: Yes, unless the app is public. Some Iframes require the user to be logged into that third-party service in the same browser session.

      Q: Can I style the Iframe to match my dashboard theme?
      A: You can adjust the size and container styling using the HTML widget, but you can't control the content styling inside the Iframe.

      Q: What’s the difference between using an Iframe and a Rayven connector?
      A: Iframes embed visual content or UI. Connectors integrate data directly into Rayven workflows. Use Iframes for UI-level integrations and connectors for backend data flow.

      Q: Can I use multiple Iframes in one dashboard?
      A: Yes, but keep performance in mind. Too many Iframes can slow down dashboard loading times.