# Dashboard button link to external url or Iframe?

**URL:** <https://discourse.nodered.org/t/dashboard-button-link-to-external-url-or-iframe/5856>\
**Category:** Dashboard\
**Created:** [16 December 2018 17:33 UTC](https://discourse.nodered.org/t/dashboard-button-link-to-external-url-or-iframe/5856 "2018-12-16T17:33:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [16 December 2018 17:33 UTC](https://discourse.nodered.org/t/dashboard-button-link-to-external-url-or-iframe/5856/1 "2018-12-16T17:33:56Z")

</div>

Hello guys,  
what is the easiest way to redirect a dashboard button click to grafana dashboard ( external url link), or do you believe it will looks better to use some iframe into template node to embedded the external web page like a grafana in node red dashboard? .  
I have been looking around but all that I found is using the template node I meant for the simplest one using dashboard button to open an external URL link..  
So would like if any of you can contribute for simple sample if both alternative are valid.  
As usual thanks for your help.

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [16 December 2018 17:45 UTC](https://discourse.nodered.org/t/dashboard-button-link-to-external-url-or-iframe/5856/2 "2018-12-16T17:45:18Z")

</div>

What have you tried? What looks better is going to be down to personal preference. Try them both and then go with the one you prefer.

---

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [16 December 2018 17:55 UTC](https://discourse.nodered.org/t/dashboard-button-link-to-external-url-or-iframe/5856/3 "2018-12-16T17:55:43Z")

</div>

I just tested the Iframe, I used that with world-map node example. its looks ok, not not sure if anything can be improved in that way of showing external web page.  
But anyway I would like to see how I can just do to open a browser when regular dashboard button is clicked?

```auto
[{"id":"51530c93.4fbe34","type":"inject","z":"59edf7be.1a2188","name":"GrafanalLocalIP","topic":"","payload":"http://192.168.2.12:4000","payloadType":"str","repeat":"120","crontab":"","once":true,"onceDelay":"2","x":247,"y":228,"wires":[["3a4de03b.a8896"]]},{"id":"3a4de03b.a8896","type":"template","z":"59edf7be.1a2188","name":"Template Iframe align=middle ","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<body style=\"background-color:MediumSeaGreen;\">\n<h1 style=\"color:MediumSeaGreen; text-align:center;\"> GRAFANA</h1>\n<iframe src={{{payload}}} height=\"900\" width=\"800\" ></iframe>\n</body>\n</html>\n","x":457,"y":228,"wires":[["f570bd09.34626"]]},{"id":"f570bd09.34626","type":"ui_template","z":"59edf7be.1a2188","group":"6e6c1cac.bfb904","name":"Template_SCRIPT","order":1,"width":"15","height":"15","format":"<style>\n .filled { \n height: 70% !important;\n \n padding: 0 !important;\n margin: 0 !important;\n }\n .nr-dashboard-template {\n padding: 0;\n margin: 0;\n }\n \n .rounded {\n border-radius: 15px 15px 15px 15px;\n font-size: 18px;\n}\n \n</style>\n \n<script>\n$('.vibrate').on('click', function() {\n navigator.vibrate(100);\n});\n \nfunction restore_bg(x) {\n $(this).css(\"background-color\", x);\n };\n \n$('.touched').on('mousedown', function() {\n \n var x= $(this).css(\"background-color\");\n $(this).css(\"background-color\", \"yellow\");\n \n setTimeout(restore_bg.bind(this,x),200);\n navigator.vibrate(100);\n });\n \n</script>\n<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":760,"y":228,"wires":[[]]},{"id":"6e6c1cac.bfb904","type":"ui_group","z":"59edf7be.1a2188","name":"WORLD MAP","tab":"766f9484.6658fc","order":2,"disp":true,"width":"15","collapse":true},{"id":"766f9484.6658fc","type":"ui_tab","z":"59edf7be.1a2188","name":"GPS-TRACKER","icon":"language","order":27}]

```

---

<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:** [16 December 2018 19:47 UTC](https://discourse.nodered.org/t/dashboard-button-link-to-external-url-or-iframe/5856/4 "2018-12-16T19:47:01Z")

</div>

Personally, I don't use iframes for this. Mainly because the Dashboard SPA can already push the boundaries of what some mobile browsers can cope with. Graphana dashboards can get even larger though they are rather better optimised.

So, from a personal perspective, I put links into the NR Dashboard and keep Grafana on a separate page.

Indeed, I have Grafana as a home icon on my iOS devices & as a bookmark on my desktop devices.

---

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [16 December 2018 20:14 UTC](https://discourse.nodered.org/t/dashboard-button-link-to-external-url-or-iframe/5856/5 "2018-12-16T20:14:16Z")

</div>

thanks for the advice @TotallyInformation , can you please indicate how do you trigger open an external link for a regular dashboard button?

---

<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:** [16 December 2018 20:52 UTC](https://discourse.nodered.org/t/dashboard-button-link-to-external-url-or-iframe/5856/6 "2018-12-16T20:52:57Z")

</div>

> [@luisgcu](#):
>
> regular dashboard button

I don't think you can? You would have to use a Dashboard Template node I would think.

However, you can add a link to the Dashboard menu by going to the dashboard sidebar.