# Website embedded in dashboard

**URL:** <https://discourse.nodered.org/t/website-embedded-in-dashboard/2965>\
**Category:** Dashboard\
**Created:** [8 September 2018 10:45 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965 "2018-09-08T10:45:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![GChapo](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GChapo](https://discourse.nodered.org/u/GChapo)\
**Post date:** [8 September 2018 10:45 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/1 "2018-09-08T10:45:30Z")

</div>

Hello,

I wonder if anybody can help me?

I would like to embed a webpage on the dashboard. I have tried iframe and embed and have failed to achieve an outcome. I have looked at various previous posts to no avail.

Thanks in advance

Glenn

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [8 September 2018 11:05 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/2 "2018-09-08T11:05:43Z")

</div>

Hi @GChapo

Embedding an iframe inside a uitemplate node is the way to do it.

It may help if you share what you've tried in that direction and describe how it didn't work for you.

---

<div class="post-metadata">

**Author:** ![GChapo](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GChapo](https://discourse.nodered.org/u/GChapo)\
**Post date:** [8 September 2018 11:29 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/3 "2018-09-08T11:29:59Z")

</div>

Hi Nick,

I have followed previous posts like [https://groups.google.com/forum/#!searchin/node-red/how$20to$20embed$20local$20and$20remote$20html|sort:date/node-red/o0LN30Og6Ag/a7K8VI3gAAAJ](https://groups.google.com/forum/#!searchin/node-red/how%2420to%2420embed%2420local%2420and%2420remote%2420html%7Csort:date/node-red/o0LN30Og6Ag/a7K8VI3gAAAJ) and have tried simple ifame wrapped webpage to no avail. I am simply trying to have a dashboard display of a locally hosted webpage fed back to the dashboard so I can see that the message i send from the dashboard to the localhosted webpage through websockets has appeared. I have tried this with both localhosted attributes and port forwarded ddns attributes and indeed an external website such as [bbc.co.uk](http://bbc.co.uk), but all I have ever received is a blank box.

Thanks

Glenn

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [8 September 2018 12:23 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/4 "2018-09-08T12:23:09Z")

</div>

Without specific details of what you've tried we can't say why it hasn't worked. I suggest you share your uitemplate node with us that tries to iframe in the BBC website so we can see where you're going wrong.

---

<div class="post-metadata">

**Author:** ![GChapo](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GChapo](https://discourse.nodered.org/u/GChapo)\
**Post date:** [8 September 2018 12:36 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/5 "2018-09-08T12:36:14Z")

</div>

It's very simple

[{"id":"be3c7f1d.b4124","type":"ui\_template","z":"ef772b5d.4dce88","group":"5d1ea164.97ce","name":"","order":13,"width":"6","height":"6","format":"\<iframe src="[https://www.bbc.co.uk](https://www.bbc.co.uk)"\>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":100,"y":900,"wires":[[]]},{"id":"5d1ea164.97ce","type":"ui\_group","z":"","name":"Tests","tab":"26dcbff.4d90d4","order":2,"disp":false,"width":"12","collapse":false},{"id":"26dcbff.4d90d4","type":"ui\_tab","z":"","name":"Tests","icon":"dashboard"}]

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 September 2018 12:39 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/6 "2018-09-08T12:39:24Z")

</div>

the worldmap node has an example of this in its examples... the simple trick is to use a "normal" template node to create the html to feed a ui-template node on the dashboard - BUT you need to add the angular filter `| trusted` so that it doesn't strip out any extra tags that it would otherwise try to remove.

```auto
[{"id":"1271593d.5d1a27","type":"inject","z":"dfe4ec36.0a5a5","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":310,"y":1200,"wires":[["33bad88.3a3b028"]]},{"id":"5778320b.bba91c","type":"ui_template","z":"dfe4ec36.0a5a5","group":"53e6c4b8.1b0f7c","name":"","order":0,"width":"6","height":"6","format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":680,"y":1200,"wires":[[]]},{"id":"33bad88.3a3b028","type":"template","z":"dfe4ec36.0a5a5","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<iframe src=\"/worldmap\" height=300px ></iframe>","x":510,"y":1200,"wires":[["5778320b.bba91c"]]},{"id":"53e6c4b8.1b0f7c","type":"ui_group","z":"dfe4ec36.0a5a5","name":"Default","tab":"d78b32f4.2797f","disp":true,"width":"6"},{"id":"d78b32f4.2797f","type":"ui_tab","z":"dfe4ec36.0a5a5","name":"Home","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![GChapo](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GChapo](https://discourse.nodered.org/u/GChapo)\
**Post date:** [8 September 2018 13:28 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/7 "2018-09-08T13:28:20Z")

</div>

Thank you,

I'm getting some way there with your flow, but because the local hosted website is fed by websockets, it just flashes up "unknown". This happens when it first loads on the webpage, when it reboots or redeploys and then goes blank. Once a message from a text input is sent it populates the webpage.

However, the output to the dashboard just flashes unknow and is never populated by a message?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4798d5a8239c96952fcc93c742295b1c81d75a0b.png)

Hope that makes sense?

---

<div class="post-metadata">

**Author:** ![GChapo](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GChapo](https://discourse.nodered.org/u/GChapo)\
**Post date:** [8 September 2018 16:09 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/8 "2018-09-08T16:09:15Z")

</div>

Dear dceejay,

With your flow if I put [https://www.bbc.co.uk](https://www.bbc.co.uk) in place of /worldmap I still fail to get the bbc website embedded?

[{"id":"d36f7b98.984b88","type":"inject","z":"ef772b5d.4dce88","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":810,"y":160,"wires":[["b5317a16.c85048"]]},{"id":"8deb5cbb.3e029","type":"ui\_template","z":"ef772b5d.4dce88","group":"5d1ea164.97ce","name":"","order":0,"width":"6","height":"6","format":"\<div ng-bind-html="msg.payload | trusted"\>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1080,"y":160,"wires":[[]]},{"id":"b5317a16.c85048","type":"template","z":"ef772b5d.4dce88","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\<iframe src="[https://www.bbc.co.uk](https://www.bbc.co.uk)" height=300px \>","x":940,"y":160,"wires":[["8deb5cbb.3e029"]]},{"id":"5d1ea164.97ce","type":"ui\_group","z":"","name":"Tests","tab":"26dcbff.4d90d4","order":2,"disp":false,"width":"12","collapse":false},{"id":"26dcbff.4d90d4","type":"ui\_tab","z":"","name":"Tests","icon":"dashboard"}]

Glenn

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [8 September 2018 16:19 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/9 "2018-09-08T16:19:41Z")

</div>

Glenn,

When you paste in flow JSON, you must put three backticks (```) on a new line before and after it. This ensures its proper formatting is preserved. Without it, we cannot cleanly import your flow.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [8 September 2018 16:20 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/10 "2018-09-08T16:20:52Z")

</div>

I did a quick test myself. With local web sites, it worked for me but not for https. Could that be the problem?

This simple example embedding the Node-RED editor itself into the dashboard

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/63bc75947cd3b6d2fa3b8f1ed487a6581b41d244.png)

---

<div class="post-metadata">

**Author:** ![GChapo](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GChapo](https://discourse.nodered.org/u/GChapo)\
**Post date:** [8 September 2018 16:42 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/11 "2018-09-08T16:42:42Z")

</div>

Sorry, I did wonder how to send.

Can you send me your flow krambriw so I can hopefully understand why I can't get a local or any website embedded?

Thanks

Glenn

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [8 September 2018 17:10 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/12 "2018-09-08T17:10:02Z")

</div>

Make sure you check for errors in your browser when you are doing things like this. It is perfectly possible that you've triggered a security block.

If you are not sure how. Hit F12 and look at the console in the resulting developer tools window.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [8 September 2018 17:31 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/13 "2018-09-08T17:31:14Z")

</div>

> [@GChapo](#):
>
> Can you send me your flow krambriw

Here is the flow, it is just a very simple dashboard ui\_template node  
You have to edit the url in the code to match yours

```auto
[{"id":"afc87756.fa10b8","type":"ui_template","z":"bccd3f77.b2e57","group":"d08e9520.258a68","name":"www","order":0,"width":0,"height":0,"format":"<iframe style=\"width:558px; height:400px;\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://192.168.10.241:1880\"></iframe>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":310,"y":1100,"wires":[[]]},{"id":"d08e9520.258a68","type":"ui_group","z":"","name":"www","tab":"c36f57c4.301058","disp":false,"width":"35"},{"id":"c36f57c4.301058","type":"ui_tab","z":"","name":"Button Panel","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 September 2018 18:06 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/14 "2018-09-08T18:06:38Z")

</div>

Indeed - quite a few sites (not unnaturally) don't allow themselves to iframed into someone else's page.

---

<div class="post-metadata">

**Author:** ![GChapo](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GChapo](https://discourse.nodered.org/u/GChapo)\
**Post date:** [9 September 2018 07:33 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/15 "2018-09-09T07:33:07Z")

</div>

Thanks for your flow.

I have finally discovered why I was and I am still unable to view embedded websites. I followed your example and tried to link to the NODE-RED editor, but to no avail. However, when I viewed it from my PC and not my phone I was able to see the editor at last. It would appear that the phone browser doesn't support this process. I shall review separate methods and try to pick up and put back together my sanity.

Glenn

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [9 September 2018 08:16 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/16 "2018-09-09T08:16:55Z")

</div>

> [@GChapo](#):
>
> It would appear that the phone browser doesn't support this process

I do not know with your phone but mine (Iphone) is working fine for this as well but you have to be connected to the same network as your NR, either via wifi or 3/4G (where I am using a VPN)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 September 2018 19:50 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/17 "2018-09-09T19:50:42Z")

</div>

> [@GChapo](#):
>
> It would appear that the phone browser doesn't support this process

Have you checked that if you enter the url that you are trying to embed into the phone browser that it works?

---

<div class="post-metadata">

**Author:** ![GChapo](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GChapo](https://discourse.nodered.org/u/GChapo)\
**Post date:** [10 September 2018 06:45 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/18 "2018-09-10T06:45:27Z")

</div>

Hi Colin,

I have and it does.

Upon further investigation I have narrowed it down to a reverse tunnelling & web socket issue. If I connect on the same network or with 4G via ddns to the Node-RED editor it works. If I reverse tunnel it doesn't. If I try to connect to a website incorporating web sockets it never works.

Glenn

---

<div class="post-metadata">

**Author:** ![Bobet21](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobet21/32/3162_2.png) [@Bobet21](https://discourse.nodered.org/u/Bobet21)\
**Post date:** [18 October 2018 07:25 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/19 "2018-10-18T07:25:06Z")

</div>

> [@dceejay](#):
>
> ```auto
> Indeed - quite a few sites (not unnaturally) don't allow themselves to iframed into someone else's page.
> 
> ```

dceejay - you mean that there may be actuaaly now way of incorporating some websites - I am trying to incorporate the waze livemap into my dashboard. So far i have only been sucessful in getting a youtube video in the dashboard - anyother https webpage would fail.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [18 October 2018 07:35 UTC](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965/20 "2018-10-18T07:35:47Z")

</div>

@Bobet21 you can use the standard `<iframe>` HTML element in a `ui_template` node to try to embed any webpage in your dashboard. The point DCJ is making is that not all pages allow themselves to be viewed in an iframe. Also you may have issues adding HTTPS content into a dashboard served over HTTP - and vice versa. You should check your browser javascript console for any error messages to see if content is being blocked by the browser for some reason.

[Next page](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965.md?page=2)