You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: "How to Embed Webpages in the FlowFuse Dashboard"
3
-
subtitle: Learn how to easily embed external content like maps, reports, and widgets into your FlowFuse dashboard.
4
-
description: Learn how to embed external webpages such as maps, reports, and widgets into your FlowFuse dashboard. Follow this guide for easy, step-by-step instructions on improving your dashboard's functionality and collaboration.
2
+
title: "How to Embed Webpages on the FlowFuse Dashboard"
3
+
subtitle: Learn how to embed external content like maps, reports, and widgets onto your FlowFuse dashboard.
4
+
description: Learn how to embed external web pages such as maps, reports, and widgets onto your FlowFuse dashboard. Follow this guide for easy, step-by-step instructions on improving your dashboard's functionality and collaboration.
5
5
date: 2025-05-14
6
6
authors: ["sumit-shinde"]
7
7
image:
@@ -10,53 +10,53 @@ tags:
10
10
- flowfuse
11
11
---
12
12
13
-
When building a dashboard in FlowFuse, it’s not just about displaying internal data — it’s about centralizing all the resources your team needs. FlowFuse makes it easy to embed external content like live dashboards, maps, PDFs, and videos directly into your dashboard. This helps eliminate switching between tabs and keeps everything in one place. In this guide, we’ll show you how to embed these elements seamlessly into your FlowFuse dashboard for a more efficient and collaborative workspace.
13
+
When you build a dashboard, sometimes you need more than just internal data. Maybe it’s a live map, a report hosted elsewhere, or another dashboard — whatever it is, having to switch tabs breaks the flow. FlowFuse lets you embed external content like web pages, dashboards, PDFs, and widgets right into your dashboard. This guide shows you how to do exactly that — step by step — so your team has everything they need, all in one place.
14
14
15
15
<!--more-->
16
16
17
17
## Why Embed Webpages in Your Dashboard?
18
18
19
-
- Less Switching: No more jumping between tabs or apps. Everything you need is right in front of you.
19
+
Embedding external content directly into your FlowFuse dashboard can make your life a lot easier. Here’s why it’s worth considering:
20
20
21
-
- Use What You Already Have: If you’ve already built a chart, report, or page somewhere else, just embed it—no need to recreate it.
21
+
-**Streamline Your Workflow:** No more hopping between tabs or switching apps. Everything you need can be in one place.
22
+
23
+
-**Save Time on Rework:** If you’ve already built a report, chart, or page somewhere else, just embed it into your dashboard. No need to start from scratch.
24
+
25
+
-**Quick Decisions:** Having all your key data together helps you see what’s important at a glance and act faster.
22
26
23
-
- Faster Decisions: With all your important information in one place, it's easier to understand what’s happening and act quickly.
24
-
25
-
- Keep Everyone on the Same Page: A shared dashboard ensures your whole team is looking at the same data and updates.
26
-
27
-
- Save Time, Every Day: Fewer clicks and less back-and-forth means more focus and better use of your time.
27
+
-**Cut Down on Clicks:** The fewer actions needed to get to your information, the more time you can spend on actually getting things done.
28
28
29
29
## How to Embed Webpages On your FlowFuse Dashboard
30
30
31
-
Embedding external content into your FlowFuse dashboard is simple and straighforward.
31
+
Embedding external content into your FlowFuse dashboard is straightforward and flexible. In this section, you'll learn two ways to do it: using a direct URL and using embed code. We’ll also cover common issues you might face and how to fix them. Lastly, you'll see how to embed one FlowFuse dashboard inside another, making it easier to centralize important views in one place.
32
32
33
-
### Prequastie.
33
+
### Prerequisites
34
34
35
-
Before you begin embedding webpages on FlowFuse Dashboard make sure you have the following:
35
+
Before you begin embedding webpages on FlowFuse Dashboard, make sure you have the following:
36
36
37
37
-**Running FlowFuse Instance:** Make sure you have a FlowFuse instance set up and running. If you don't have an account, check out our [free trial](https://app.flowfuse.com/account/create).
38
38
-**FlowFuse Dashboard:** Ensure you have [FlowFuse Dashboard](https://flows.nodered.org/node/@flowfuse/node-red-dashboard) (also known as Node-RED Dashboard 2.0 in the community) installed and properly configured on your instance.
39
-
-**@flowfuse/node-red-dashboard-2-ui-iframe:** Ensure you have [node-red-contrib-sqlite](https://flows.nodered.org/node/@flowfuse/node-red-dashboard-2-ui-iframe) installed.
39
+
-**@flowfuse/node-red-dashboard-2-ui-iframe:** Ensure you have [node-red-dashboard-2-ui-iframe](https://flows.nodered.org/node/@flowfuse/node-red-dashboard-2-ui-iframe) installed.
40
40
41
41
#### Step 1: Obtain the URL or Embed Code of the Webpage You Want to Embed
42
42
43
-
The first step is identifying and grabbing the URL of the webpage or external content you want to embed into your FlowFuse dashboard. This could be a live dashboard, report, Google Map, video, or any other type of content.
43
+
The first step is identifying and grabbing the URL of the webpage or external content you want to embed into your FlowFuse dashboard. This could be a live dashboard, report, Google Maps, video, or any other type of content.
44
44
45
-
When embedding content from third-party sources, make sure the following conditions the page or content you're embedding should be publicly accessible or have the proper permissions for embedding. For example, private reports or webpages might require login credentials or an API key, which should be handled securely.
45
+
When embedding content from third-party sources, make sure the following conditions the page or content you're embedding should be publicly accessible or have the proper permissions for embedding. For example, private reports or webpages require login credentials or an API key, which should be handled securely.
46
46
47
-
Some websites may restrict embedding through iframes due to [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS) policies. If the content doesn’t load properly, check whether the external site allows embedding.
47
+
Some websites may restrict embedding through iframes due to [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS) policies. Check whether the external site allows embedding if the content doesn’t load properly.
48
48
49
-
Many platforms, such as YouTube and Google Maps, provide a specific "embed code or URL" that’s more suitable for embedding. Ensure that you’re using the correct embed link or code provided by these platforms to guarantee smooth integration.
49
+
Many platforms, such as YouTube and Google Maps, provide a specific "embed code or URL" that is more suitable for embedding. Ensure you use the correct embed link or code these platforms offer to guarantee smooth integration.
50
50
51
-
Once you have the URL (or embed code) ready, move on to the next step.
51
+
Once the URL or embed code is ready, move on to the next step.
52
52
53
-
#### Step 2: Embedding the Webpage in FlowFuse Dashboard
53
+
#### Step 2: Embedding the Webpage on FlowFuse Dashboard
54
54
55
55
Now that you’ve gathered the URL or embed code for the external content you want to embed, it’s time to add it to your FlowFuse dashboard. Below are two methods for embedding external content:
56
56
57
57
##### 2.1 Embed via URL
58
58
59
-
The easiest and most straightforward way to embed external content is by using the URL. FlowFuse's ui_iframe node allows you to directly use an external URL. Here’s how to do it:
59
+
The easiest and most straightforward way to embed external content is by using the URL. FlowFuse's iframe node allows you to use an external URL directly. Here’s how to do it:
60
60
61
61
1. Drag the ui_iframe widget onto the canvas.
62
62
2. Double-click the widget to open its configuration dialog.
@@ -69,39 +69,25 @@ _iframe widget configuration_
69
69
70
70
3. Click Done and then Deploy.
71
71
72
-
For quick testing, you can use the weather widget, Google Map embedded URL, or the PDF URL. Below, I’ve included an image of a dashboard with the weather widget, Google Map, and PDF embedded.
height: auto; /* Adjust height to maintain aspect ratio */
90
-
width: 100%; /* Ensure images use the full width of the container */
91
-
max-height: 200px; /* Limit max height to avoid distortion */
92
-
margin-bottom: 20px; /* Adds space between images */
93
-
object-fit: contain; /* Ensure images maintain their aspect ratio */
94
-
}
95
-
}
96
-
</style>
97
-
98
-
_Weather widget, Google Map, and PDF embedded in FlowFuse Dashboard_
99
-
100
-
##### 2.1 Embed via HTML Embed Code
101
-
102
-
If you have an embed code from third party services you can use this HTML code to embed the content into your FlowFuse dashboard. Here’s how to do it:
103
-
104
-
1. Drag the ui_template widget onto the canvas.
72
+
For a quick hands-on practice, you can try embedding a weather widget, Google Maps, Google Calendar, or a hosted PDF on your dashboard.
73
+
74
+
75
+
_Weather widget embedded in FlowFuse Dashboard_
76
+
77
+
78
+
_Google Map embedded in FlowFuse Dashboard_
79
+
80
+
81
+
_PDF embedded in FlowFuse Dashboard_
82
+
83
+
84
+
_Google Calendar embedded in FlowFuse Dashboard_
85
+
86
+
##### 2.2 Embed via HTML Embed Code
87
+
88
+
If you have an embed code from third-party services, you can use this code to embed the content into your FlowFuse dashboard. Here’s how to do it:
89
+
90
+
1. Drag the **ui-template** widget onto the canvas.
105
91
2. Double-click on it to open its configuration dialog.
106
92
- Create a new group for it to render in.
107
93
- Set the size (width and height).
@@ -116,40 +102,37 @@ If you have an embed code from third party services you can use this HTML code t
116
102
</script>
117
103
```
118
104
119
-
Some services provide an iframe tag. In this case, all you need to do is copy the URL and use the embedding via the URL method.
105
+
Some services provide an **iframe** tag. In this case, you need only copy the URL and use the embedding via the URL method.
120
106
121
-
4. Once you've added the code, click Done and then Deploy to save your changes.
122
-
123
-
Following is the image of the dashboard on which we are embedding the animated weather widget on the FlowFuse dashboard using embed code.
107
+
4. Click **Done** and **Deploy** to save your changes once you've added the code.
124
108
125
109
{data-zoomable}
126
110
_Animated weather widget on the Flowfuse dashboard, embedded with code._
127
111
128
-
Now that you’ve learned how to embed external content into your FlowFuse dashboard, you might have tried embedding your FlowFuse dashboard into other websites or another FlowFuse dashboard and found that it is not working as expected.
112
+
Now that you’ve learned how to embed external content into your FlowFuse dashboard, one day you may need to embed your FlowFuse dashboard elsewhere—either on another FlowFuse dashboard or an external site. If you’ve tried and found that it’s not working as expected.
129
113
130
-
This is actually a security feature designed to protect your data. FlowFuse dashboards, like many other web applications, implement security policies such as Cross-Origin Resource Sharing (CORS) and the X-Frame-Options header. These policies are in place to ensure that your dashboard is only viewed in trusted environments, preventing malicious sites from potentially tampering with your data or exposing it to unauthorized users.
114
+
This is a security feature designed to protect your data. FlowFuse dashboards, like many other web applications, implement security policies such as Cross-Origin Resource Sharing (CORS) and the X-Frame-Options header. These policies ensure that your dashboard is only viewed in trusted environments, preventing malicious sites from tampering with your data or exposing it to unauthorized users.
131
115
132
-
However, if you really need to embed your FlowFuse dashboard into other websites or another FlowFuse dashboard, it is actually possible to do so with some configuration changes. Following is the section on how to enable embedding securely:
116
+
However, if you need to embed your FlowFuse dashboard into other websites or on another FlowFuse dashboard, it’s possible to do so with some configuration changes. Below is a section on how to enable embedding securely of FlowFuse Dashboard:
133
117
134
118
### Enabling Embedding of FlowFuse Dashboards
135
119
136
120
1. Go to your FlowFuse instance settings.
137
-
2. Switch to the editor settings and enable the option "Allow Dashboard to be embedded in an iFrame".
121
+
2. Switch to the **editor** settings and enable **"Allow Dashboard to be embedded in an iFrame"**
138
122
139
123
{data-zoomable}
140
124
_FlowFuse instance settings showing the option to allow dashboard embedding in an iframe._
141
125
142
-
3. Click Save Settings and restart your instance for the changes to take effect.
126
+
3. Click **Save Settings and restart** your instance for the changes to take effect.
143
127
144
-
{data-zoomable}
128
+
[{data-zoomable}](https://flowfuse.com/blueprints/manufacturing/oee-dashboard/)
145
129
_FlowFuse OEE Dashboard embedded in another FlowFuse dashboard._
146
130
147
131
FlowFuse dashboards offer great flexibility, making it easy to embed external content like weather widgets, maps, and PDFs directly into your workspace. With a few simple steps, you can also embed FlowFuse dashboards into other websites, ensuring everything you need is in one place.
148
132
149
-
150
133
## Up Next
151
134
152
135
If you're interested in learning more about embedding webpages or enhancing your FlowFuse dashboards, check out the following blog articles:
153
136
154
-
-[Mapping Location on Dashboard](/blog/2024/05/mapping-location-on-dashboard-2/): In this article, we dive into how you can embed location maps into your FlowFuse dashboard. Learn how to map locations, track real-time data, and make your dashboards even more interactive and informative.
155
-
-[Generating PDF Reports with Node-RED and FlowFuse](#): This guide explains how to generate PDF reports directly with Node-RED and FlowFuse. We also cover how to preview these reports within your FlowFuse dashboards.
137
+
-[Mapping Location on Dashboard](/blog/2024/05/mapping-location-on-dashboard-2/): In this article, we dive into how you can embed location maps into your FlowFuse dashboard. Learn how to map locations, track real-time data, and make your dashboards more interactive and informative.
138
+
-[Generating PDF Reports with Node-RED and FlowFuse](#): This guide explains how to generate PDF reports directly with Node-RED and FlowFuse and how to preview these reports within your FlowFuse dashboards.
0 commit comments