Repository: FlowFuse/website
Pull request #3221: Blog: How to Embed Webpages in the FlowFuse Dashboard
Author: login: sumitshinde-84
Created: 2025-05-06T11:04:57Z | Merged: 2025-05-12T10:50:01Z

## Description

<!-- Describe your changes in detail -->

## Related Issue(s)

<!-- What issue does this PR relate to? -->

## Checklist

<!-- https://flowfuse.com/handbook/development/#defining-done -->

 - [ ] I have read the [contribution guidelines](https://github.com/FlowFuse/flowfuse/blob/main/CONTRIBUTING.md)
 - [ ] I have considered the performance impact of these changes
 - [ ] Suitable unit/system level tests have been added and they pass
 - [ ] Documentation has been updated



Diff:
diff --git a/src/blog/2025/05/displaying-embeded-webpages-on-node-red-dashboard.md b/src/blog/2025/05/displaying-embeded-webpages-on-node-red-dashboard.md
new file mode 100644
index 0000000000..a1ac3ebf88
--- /dev/null
+++ b/src/blog/2025/05/displaying-embeded-webpages-on-node-red-dashboard.md
@@ -0,0 +1,138 @@
+---
+title: "How to Embed Webpages on the FlowFuse Dashboard"
+subtitle: Learn how to embed external content like maps, reports, and widgets onto your FlowFuse dashboard.
+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.
+date: 2025-05-13
+authors: ["sumit-shinde"]
+image: /blog/2025/05/images/emeding-webpage-on-flowfuse-dashboard.png
+keywords: FlowFuse, embed webpages, external content, dashboard, maps, reports, widgets, Node-RED, iframe, embedding FlowFuse dashboard, dashboard customization
+tags:
+   - flowfuse
+---
+
+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.
+
+<!--more-->
+
+## Why Embed Webpages in Your Dashboard?
+
+Embedding external content directly into your FlowFuse dashboard can make your life a lot easier. Here’s why it’s worth considering:
+
+- **Streamline Your Workflow:** No more hopping between tabs or switching apps. Everything you need can be in one place.
+  
+- **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.
+  
+- **Quick Decisions:** Having all your key data together helps you see what’s important at a glance and act faster.
+
+- **Cut Down on Clicks:** The fewer actions needed to get to your information, the more time you can spend on actually getting things done.
+
+## How to Embed Webpages On your FlowFuse Dashboard
+
+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.
+
+### Prerequisites
+
+Before you begin embedding webpages on FlowFuse Dashboard, make sure you have the following:
+
+- **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).
+- **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.
+- **@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.
+
+#### Step 1: Obtain the URL or Embed Code of the Webpage You Want to Embed
+
+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.
+
+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.
+
+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.
+
+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.
+
+Once the URL or embed code is ready, move on to the next step.
+
+#### Step 2: Embedding the Webpage on FlowFuse Dashboard
+
+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:
+
+##### 2.1 Embed via URL 
+
+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:
+
+1. Drag the ui_iframe widget onto the canvas.
+2. Double-click the widget to open its configuration dialog.
+   - Create a new group for it to render in.
+   - Set the size (width and height).
+   - Enter the URL you want to embed.
+
+![ui_iframe widget configuration](./images/if_frame-config.png){data-zoomable}
+_iframe widget configuration_
+
+3. Click Done and then Deploy.
+
+For a quick hands-on practice, you can try embedding a weather widget, Google Maps, Google Calendar, or a hosted PDF on your dashboard.
+
+![Weather widget embedded in FlowFuse Dashboard](./images/weather-widget.png)
+_Weather widget embedded in FlowFuse Dashboard_
+
+![Google Map embedded in FlowFuse Dashboard](./images/google-map.png)
+_Google Map embedded in FlowFuse Dashboard_
+
+![PDF embedded in FlowFuse Dashboard](./images/pdf.png)
+_PDF embedded in FlowFuse Dashboard_
+
+![Google Calendar embedded in FlowFuse Dashboard](./images/google-calendar.png)
+_Google Calendar embedded in FlowFuse Dashboard_
+
+##### 2.2 Embed via HTML Embed Code
+
+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:
+
+1. Drag the **ui-template** widget onto the canvas.
+2. Double-click on it to open its configuration dialog.
+   - Create a new group for it to render in.
+   - Set the size (width and height).
+3. Paste your embed code into the template widget. Most embed codes include both HTML and JavaScript, so follow this structure:
+
+```html
+<template>
+  <!-- Paste your HTML code here -->
+</template>
+<script>
+  // Paste your JavaScript code here
+</script>
+```
+
+Some services provide an **iframe** tag. In this case, you need only copy the URL and use the embedding via the URL method.
+
+4. Click **Done** and **Deploy** to save your changes once you've added the code.
+
+![Animated weather widget on the Flowfuse dashboard, embedded with code.](./images/weather-widget.gif){data-zoomable}
+_Animated weather widget on the Flowfuse dashboard, embedded with code._
+
+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.
+
+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.
+
+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:
+
+### Enabling Embedding of FlowFuse Dashboards
+
+1. Go to your FlowFuse instance settings.
+2. Switch to the **editor** settings and enable **"Allow Dashboard to be embedded in an iFrame"**
+
+![FlowFuse instance settings showing the option to allow dashboard embedding in an iframe.](./images/allow-dashboard-embedding.png){data-zoomable}
+_FlowFuse instance settings showing the option to allow dashboard embedding in an iframe._
+
+3. Click **Save Settings and restart** your instance for the changes to take effect.
+
+[![FlowFuse OEE Dashboard embedded in another FlowFuse dashboard.](./images/embedding-flowfuse-oee-dashboard.png){data-zoomable}](https://flowfuse.com/blueprints/manufacturing/oee-dashboard/)
+_FlowFuse OEE Dashboard embedded in another FlowFuse dashboard._
+
+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.
+
+## Up Next 
+
+If you're interested in learning more about embedding webpages or enhancing your FlowFuse dashboards, check out the following blog articles:
+
+- [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.
+- [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.
diff --git a/src/blog/2025/05/images/allow-dashboard-embedding.png b/src/blog/2025/05/images/allow-dashboard-embedding.png
new file mode 100644
index 0000000000..5a5819c7ec
Binary files /dev/null and b/src/blog/2025/05/images/allow-dashboard-embedding.png differ
diff --git a/src/blog/2025/05/images/embedding-flowfuse-oee-dashboard.png b/src/blog/2025/05/images/embedding-flowfuse-oee-dashboard.png
new file mode 100644
index 0000000000..048c055461
Binary files /dev/null and b/src/blog/2025/05/images/embedding-flowfuse-oee-dashboard.png differ
diff --git a/src/blog/2025/05/images/emeding-webpage-on-flowfuse-dashboard.png b/src/blog/2025/05/images/emeding-webpage-on-flowfuse-dashboard.png
new file mode 100644
index 0000000000..521f0b59f8
Binary files /dev/null and b/src/blog/2025/05/images/emeding-webpage-on-flowfuse-dashboard.png differ
diff --git a/src/blog/2025/05/images/google-calendar.png b/src/blog/2025/05/images/google-calendar.png
new file mode 100644
index 0000000000..f772413a28
Binary files /dev/null and b/src/blog/2025/05/images/google-calendar.png differ
diff --git a/src/blog/2025/05/images/google-map.png b/src/blog/2025/05/images/google-map.png
new file mode 100644
index 0000000000..3820260404
Binary files /dev/null and b/src/blog/2025/05/images/google-map.png differ
diff --git a/src/blog/2025/05/images/if_frame-config.png b/src/blog/2025/05/images/if_frame-config.png
new file mode 100644
index 0000000000..baf06875d1
Binary files /dev/null and b/src/blog/2025/05/images/if_frame-config.png differ
diff --git a/src/blog/2025/05/images/pdf.png b/src/blog/2025/05/images/pdf.png
new file mode 100644
index 0000000000..fbc5c4c6f4
Binary files /dev/null and b/src/blog/2025/05/images/pdf.png differ
diff --git a/src/blog/2025/05/images/weather-widget.gif b/src/blog/2025/05/images/weather-widget.gif
new file mode 100644
index 0000000000..cf9df3d971
Binary files /dev/null and b/src/blog/2025/05/images/weather-widget.gif differ
diff --git a/src/blog/2025/05/images/weather-widget.png b/src/blog/2025/05/images/weather-widget.png
new file mode 100644
index 0000000000..2df0199b63
Binary files /dev/null and b/src/blog/2025/05/images/weather-widget.png differ


Reviews:
user: login: joepavitt
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T15:46:36Z
user: login: joepavitt
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T16:43:12Z

Review comments:
diff_hunk: @@ -0,0 +1,134 @@
+---
+title: "How to Embed Webpages on the FlowFuse Dashboard"
+subtitle: Learn how to embed external content like maps, reports, and widgets onto your FlowFuse dashboard.
+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.
+date: 2025-05-14
+authors: ["sumit-shinde"]
+image: 
+keywords: FlowFuse, embed webpages, external content, dashboard, maps, reports, widgets, Node-RED, iframe, embedding FlowFuse dashboard, dashboard customization
+tags:
+   - flowfuse
+---
+
+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.
+
+<!--more-->
+
+## Why Embed Webpages in Your Dashboard?
+
+Embedding external content directly into your FlowFuse dashboard can make your life a lot easier. Here’s why it’s worth considering:
+
+- **Streamline Your Workflow:** No more hopping between tabs or switching apps. Everything you need can be in one place.
+  
+- **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.
+  
+- **Quick Decisions:** Having all your key data together helps you see what’s important at a glance and act faster.
+
+- **Cut Down on Clicks:** The fewer actions needed to get to your information, the more time you can spend on actually getting things done.
+
+## How to Embed Webpages On your FlowFuse Dashboard
+
+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.
+
+### Prerequisites
+
+Before you begin embedding webpages on FlowFuse Dashboard, make sure you have the following:
+
+- **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).
+- **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.
+- **@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.
+
+#### Step 1: Obtain the URL or Embed Code of the Webpage You Want to Embed
+
+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.
+
+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.
+
+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.
+
+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.
+
+Once the URL or embed code is ready, move on to the next step.
+
+#### Step 2: Embedding the Webpage on FlowFuse Dashboard
+
+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:
+
+##### 2.1 Embed via URL 
+
+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:
+
+1. Drag the **ui_iframe** node onto the canvas.
+2. Double-click the node to open its configuration dialog.
+   - Create a new group for it to render in.
+   - Set the size (width and height).
+   - Enter the URL you want to embed.
+3. Click **Done** and then **Deploy**.
+
+For a quick hands-on practice, you can try embedding a weather widget, Google Maps, Google Calendar, or a hosted PDF on your dashboard.
+
+![Weather widget embedded in FlowFuse Dashboard](./images/weather-widget.png)
+_Weather widget embedded in FlowFuse Dashboard_
+
+![Google Map embedded in FlowFuse Dashboard](./images/google-map.png)
+_Google Map embedded in FlowFuse Dashboard_
+
+![PDF embedded in FlowFuse Dashboard](./images/pdf.png)
+_PDF embedded in FlowFuse Dashboard_
+
+![Google Calendar embedded in FlowFuse Dashboard](./images/google-calendar.png)
+_Google Calendar embedded in FlowFuse Dashboard_
+
+##### 2.1 Embed via HTML Embed Code
path: src/blog/2025/05/displaying-embeded-webpages-on-node-red-dashboard.md
user: login: joepavitt
body: ```suggestion
##### 2.2 Embed via HTML Embed Code
```
created_at: 2025-05-07T15:41:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,134 @@
+---
+title: "How to Embed Webpages on the FlowFuse Dashboard"
+subtitle: Learn how to embed external content like maps, reports, and widgets onto your FlowFuse dashboard.
+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.
+date: 2025-05-14
+authors: ["sumit-shinde"]
+image: 
+keywords: FlowFuse, embed webpages, external content, dashboard, maps, reports, widgets, Node-RED, iframe, embedding FlowFuse dashboard, dashboard customization
+tags:
+   - flowfuse
+---
+
+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.
+
+<!--more-->
+
+## Why Embed Webpages in Your Dashboard?
+
+Embedding external content directly into your FlowFuse dashboard can make your life a lot easier. Here’s why it’s worth considering:
+
+- **Streamline Your Workflow:** No more hopping between tabs or switching apps. Everything you need can be in one place.
+  
+- **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.
+  
+- **Quick Decisions:** Having all your key data together helps you see what’s important at a glance and act faster.
+
+- **Cut Down on Clicks:** The fewer actions needed to get to your information, the more time you can spend on actually getting things done.
+
+## How to Embed Webpages On your FlowFuse Dashboard
+
+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.
+
+### Prerequisites
+
+Before you begin embedding webpages on FlowFuse Dashboard, make sure you have the following:
+
+- **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).
+- **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.
+- **@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.
+
+#### Step 1: Obtain the URL or Embed Code of the Webpage You Want to Embed
+
+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.
+
+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.
+
+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.
+
+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.
+
+Once the URL or embed code is ready, move on to the next step.
+
+#### Step 2: Embedding the Webpage on FlowFuse Dashboard
+
+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:
+
+##### 2.1 Embed via URL 
+
+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:
+
+1. Drag the **ui_iframe** node onto the canvas.
path: src/blog/2025/05/displaying-embeded-webpages-on-node-red-dashboard.md
user: login: joepavitt
body: ```suggestion
1. Drag the **ui-iframe** node onto the canvas.
```
created_at: 2025-05-07T15:42:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,134 @@
+---
+title: "How to Embed Webpages on the FlowFuse Dashboard"
+subtitle: Learn how to embed external content like maps, reports, and widgets onto your FlowFuse dashboard.
+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.
+date: 2025-05-14
+authors: ["sumit-shinde"]
+image: 
+keywords: FlowFuse, embed webpages, external content, dashboard, maps, reports, widgets, Node-RED, iframe, embedding FlowFuse dashboard, dashboard customization
+tags:
+   - flowfuse
+---
+
+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.
+
+<!--more-->
+
+## Why Embed Webpages in Your Dashboard?
+
+Embedding external content directly into your FlowFuse dashboard can make your life a lot easier. Here’s why it’s worth considering:
+
+- **Streamline Your Workflow:** No more hopping between tabs or switching apps. Everything you need can be in one place.
+  
+- **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.
+  
+- **Quick Decisions:** Having all your key data together helps you see what’s important at a glance and act faster.
+
+- **Cut Down on Clicks:** The fewer actions needed to get to your information, the more time you can spend on actually getting things done.
+
+## How to Embed Webpages On your FlowFuse Dashboard
+
+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.
+
+### Prerequisites
+
+Before you begin embedding webpages on FlowFuse Dashboard, make sure you have the following:
+
+- **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).
+- **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.
+- **@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.
+
+#### Step 1: Obtain the URL or Embed Code of the Webpage You Want to Embed
+
+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.
+
+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.
+
+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.
+
+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.
+
+Once the URL or embed code is ready, move on to the next step.
+
+#### Step 2: Embedding the Webpage on FlowFuse Dashboard
+
+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:
+
+##### 2.1 Embed via URL 
path: src/blog/2025/05/displaying-embeded-webpages-on-node-red-dashboard.md
user: login: joepavitt
body: Can you add a screenshot here of the config for the node please? Feels a little too "blackbox" atm
created_at: 2025-05-07T15:43:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,134 @@
+---
+title: "How to Embed Webpages on the FlowFuse Dashboard"
+subtitle: Learn how to embed external content like maps, reports, and widgets onto your FlowFuse dashboard.
+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.
+date: 2025-05-14
+authors: ["sumit-shinde"]
+image: 
+keywords: FlowFuse, embed webpages, external content, dashboard, maps, reports, widgets, Node-RED, iframe, embedding FlowFuse dashboard, dashboard customization
+tags:
+   - flowfuse
+---
+
+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.
+
+<!--more-->
+
+## Why Embed Webpages in Your Dashboard?
+
+Embedding external content directly into your FlowFuse dashboard can make your life a lot easier. Here’s why it’s worth considering:
+
+- **Streamline Your Workflow:** No more hopping between tabs or switching apps. Everything you need can be in one place.
+  
+- **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.
+  
+- **Quick Decisions:** Having all your key data together helps you see what’s important at a glance and act faster.
+
+- **Cut Down on Clicks:** The fewer actions needed to get to your information, the more time you can spend on actually getting things done.
+
+## How to Embed Webpages On your FlowFuse Dashboard
+
+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.
+
+### Prerequisites
+
+Before you begin embedding webpages on FlowFuse Dashboard, make sure you have the following:
+
+- **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).
+- **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.
+- **@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.
+
+#### Step 1: Obtain the URL or Embed Code of the Webpage You Want to Embed
+
+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.
+
+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.
+
+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.
+
+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.
+
+Once the URL or embed code is ready, move on to the next step.
+
+#### Step 2: Embedding the Webpage on FlowFuse Dashboard
+
+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:
+
+##### 2.1 Embed via URL 
+
+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:
+
+1. Drag the **ui_iframe** node onto the canvas.
+2. Double-click the node to open its configuration dialog.
+   - Create a new group for it to render in.
+   - Set the size (width and height).
+   - Enter the URL you want to embed.
+3. Click **Done** and then **Deploy**.
+
+For a quick hands-on practice, you can try embedding a weather widget, Google Maps, Google Calendar, or a hosted PDF on your dashboard.
+
+![Weather widget embedded in FlowFuse Dashboard](./images/weather-widget.png)
+_Weather widget embedded in FlowFuse Dashboard_
+
+![Google Map embedded in FlowFuse Dashboard](./images/google-map.png)
+_Google Map embedded in FlowFuse Dashboard_
+
+![PDF embedded in FlowFuse Dashboard](./images/pdf.png)
+_PDF embedded in FlowFuse Dashboard_
+
+![Google Calendar embedded in FlowFuse Dashboard](./images/google-calendar.png)
+_Google Calendar embedded in FlowFuse Dashboard_
+
+##### 2.1 Embed via HTML Embed Code
+
+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:
+
+1. Drag the **ui_template** widget onto the canvas.
path: src/blog/2025/05/displaying-embeded-webpages-on-node-red-dashboard.md
user: login: joepavitt
body: ```suggestion
1. Drag the **ui-template** widget onto the canvas.
```
created_at: 2025-05-07T15:45:51Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-06T11:08:39Z
body: Images automagically compressed by [Calibre](https://calibreapp.com)'s [image-actions](https://github.com/marketplace/actions/image-actions) ✨

Compression reduced images by <strong>32.4%</strong>, saving <strong>512.83 KB</strong>.

| Filename | Before | After | Improvement | Visual comparison |
| -------- | ------ | ----- | ----------- | ----------------- |
| <code>src/blog/2025/05/images/allow-dashboard-embedding.png</code> | 136.81 KB | 86.55 KB | -36.7% | [View diff](/FlowFuse/website/pull/3221/commits/755a48cd5690112009cdcebf51164f7b8eb8301d?short_path=9323e53#diff-9323e53c43ebcdb834a8e500534d0077) |
| <code>src/blog/2025/05/images/embedding-flowfuse-oee-dashboard.png</code> | 307.67 KB | 188.81 KB | -38.6% | [View diff](/FlowFuse/website/pull/3221/commits/755a48cd5690112009cdcebf51164f7b8eb8301d?short_path=ab6836b#diff-ab6836b234793ef10b4781d1d9fb79e2) |
| <code>src/blog/2025/05/images/google-calendar.png</code> | 85.69 KB | 52.86 KB | -38.3% | [View diff](/FlowFuse/website/pull/3221/commits/755a48cd5690112009cdcebf51164f7b8eb8301d?short_path=7962653#diff-7962653c039a8f3e001e6a5dec5ae730) |
| <code>src/blog/2025/05/images/google-map.png</code> | 422.95 KB | 223.83 KB | -47.1% | [View diff](/FlowFuse/website/pull/3221/commits/755a48cd5690112009cdcebf51164f7b8eb8301d?short_path=9763715#diff-9763715f3229e386064a232945f1b6fa) |
| <code>src/blog/2025/05/images/pdf.png</code> | 220.38 KB | 166.47 KB | -24.5% | [View diff](/FlowFuse/website/pull/3221/commits/755a48cd5690112009cdcebf51164f7b8eb8301d?short_path=f0d2200#diff-f0d22006f393a290259d12740811b74a) |
| <code>src/blog/2025/05/images/weather-widget.png</code> | 408.86 KB | 351.00 KB | -14.2% | [View diff](/FlowFuse/website/pull/3221/commits/755a48cd5690112009cdcebf51164f7b8eb8301d?short_path=6cb0fe6#diff-6cb0fe6fcdf4b52f73cf8813fe08a7ec) |


1722 images did not require optimisation.

author_association: CONTRIBUTOR
user: login: sumitshinde-84
created_at: 2025-05-06T12:35:41Z
body: Hey @joepavitt, could you please review this PR?
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-07T16:13:22Z
body: Images automagically compressed by [Calibre](https://calibreapp.com)'s [image-actions](https://github.com/marketplace/actions/image-actions) ✨

Compression reduced images by <strong>44.5%</strong>, saving <strong>23.09 KB</strong>.

| Filename | Before | After | Improvement | Visual comparison |
| -------- | ------ | ----- | ----------- | ----------------- |
| <code>src/blog/2025/05/images/if_frame-config.png</code> | 51.89 KB | 28.80 KB | -44.5% | [View diff](/FlowFuse/website/pull/3221/commits/860be56bb51a2e29d8f7f1c59a84a88f2afd6cd1?short_path=eb6e477#diff-eb6e4779bd8807e11fd78eba89529372) |


1738 images did not require optimisation.

author_association: CONTRIBUTOR
user: login: joepavitt
created_at: 2025-05-07T16:43:33Z
body: Not merging as there is no blog tile, but approved from a content perspective
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-12T10:31:51Z
body: Images automagically compressed by [Calibre](https://calibreapp.com)'s [image-actions](https://github.com/marketplace/actions/image-actions) ✨

Compression reduced images by <strong>4.4%</strong>, saving <strong>20.67 KB</strong>.

| Filename | Before | After | Improvement | Visual comparison |
| -------- | ------ | ----- | ----------- | ----------------- |
| <code>src/blog/2025/05/images/emeding-webpage-on-flowfuse-dashboard.png</code> | 472.45 KB | 451.78 KB | -4.4% | [View diff](/FlowFuse/website/pull/3221/commits/1039e6a19052de33c09d6cc805afe8d400be8467?short_path=c6418cd#diff-c6418cdd4fd6e6ce170951457eb294b9) |


1745 images did not require optimisation.

author_association: CONTRIBUTOR