# How to show qrcode in dashboard?

**URL:** <https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570>\
**Category:** Dashboard\
**Created:** [18 February 2022 03:21 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570 "2022-02-18T03:21:06Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![UnknownForever](https://avatars.discourse-cdn.com/v4/letter/u/6f9a4e/32.png) [@UnknownForever](https://discourse.nodered.org/u/UnknownForever)\
**Post date:** [18 February 2022 03:21 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/1 "2022-02-18T03:21:06Z")

</div>

Hi guys, I want to display my qrcode in dashboard but I'm not sure how to do it. Could someone tell me how it can be done.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [18 February 2022 05:24 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/2 "2022-02-18T05:24:39Z")

</div>

Hi @UnknownForever,  
When I look for the keywords qrcode and dashboard, I see other existing discussions about that. For example [here](https://discourse.nodered.org/t/cant-display-base64-qr-code-in-template/51032/4) is a nice example from which you could get started.

Bart

---

<div class="post-metadata">

**Author:** ![UnknownForever](https://avatars.discourse-cdn.com/v4/letter/u/6f9a4e/32.png) [@UnknownForever](https://discourse.nodered.org/u/UnknownForever)\
**Post date:** [18 February 2022 09:26 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/3 "2022-02-18T09:26:41Z")

</div>

Hi, Bart,  
Thank you for the info.

---

<div class="post-metadata">

**Author:** ![umtksa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/umtksa/32/38322_2.png) [@umtksa](https://discourse.nodered.org/u/umtksa)\
**Post date:** [19 February 2022 16:26 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/4 "2022-02-19T16:26:11Z")

</div>

as an alternative  
you can use google charts as a qr generator

```auto
https://chart.googleapis.com/chart?chs=500x500&cht=qr&chld=H&chl=write your qr data here 

```

[try me](https://chart.googleapis.com/chart?chs=500x500&cht=qr&chld=H&chl=texthere)

---

<div class="post-metadata">

**Author:** ![UnknownForever](https://avatars.discourse-cdn.com/v4/letter/u/6f9a4e/32.png) [@UnknownForever](https://discourse.nodered.org/u/UnknownForever)\
**Post date:** [21 February 2022 01:50 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/5 "2022-02-21T01:50:44Z")

</div>

Hi umtksa,  
I'm new to node red so can explain me how to use google chart in node red?

---

<div class="post-metadata">

**Author:** ![umtksa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/umtksa/32/38322_2.png) [@umtksa](https://discourse.nodered.org/u/umtksa)\
**Post date:** [21 February 2022 02:58 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/6 "2022-02-21T02:58:25Z")

</div>

here a sample

````auto
[{"id":"7c597c35222ccf5c","type":"tab","label":"qr flow","disabled":false,"info":""},{"id":"5c7487db0bfa5cb9","type":"inject","z":"7c597c35222ccf5c","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"hello","payloadType":"str","x":310,"y":100,"wires":[["da779782f275a4fe"]]},{"id":"bf3aaab618b16d2b","type":"inject","z":"7c597c35222ccf5c","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"world","payloadType":"str","x":310,"y":160,"wires":[["da779782f275a4fe"]]},{"id":"da779782f275a4fe","type":"ui_template","z":"7c597c35222ccf5c","group":"14ff6b6b66ab7d5b","name":"qr","order":3,"width":"8","height":"8","format":"<style>\n \n\n.open{\n background-image: url(\"https://chart.googleapis.com/chart?chs=500x500&cht=qr&chld=H&chl={{msg.payload}}\");\n background-repeat: no-repeat;\n background-position: center;\n width: 100%;\n height:500px;\n}\n\n\n</style>\n\n\n<div class=\"open\">\n\n</div>\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":570,"y":120,"wires":[[]]},{"id":"14ff6b6b66ab7d5b","type":"ui_group","name":"herita","tab":"c1dcfb03.ffed9","order":2,"disp":false,"width":"10","collapse":false,"className":""},{"id":"c1dcfb03.ffed9","type":"ui_tab","name":"dash","icon":"dashboard","order":1}]```
````

---

<div class="post-metadata">

**Author:** ![UnknownForever](https://avatars.discourse-cdn.com/v4/letter/u/6f9a4e/32.png) [@UnknownForever](https://discourse.nodered.org/u/UnknownForever)\
**Post date:** [21 February 2022 05:59 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/7 "2022-02-21T05:59:51Z")

</div>

ok thank you umtksa.

---

<div class="post-metadata">

**Author:** ![UnknownForever](https://avatars.discourse-cdn.com/v4/letter/u/6f9a4e/32.png) [@UnknownForever](https://discourse.nodered.org/u/UnknownForever)\
**Post date:** [21 February 2022 07:25 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/8 "2022-02-21T07:25:16Z")

</div>

Can you tell me how to get the barcode code scanner and get the out in dashboard?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [21 February 2022 12:36 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/9 "2022-02-21T12:36:13Z")

</div>

What have you tried so far? Show us your flow (export it and attach it to a reply) and explain where you are having a problem.

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````)

````auto
``` 
   code goes here 
```

````

You can edit and correct your post by clicking the pencil ✏ icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![umtksa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/umtksa/32/38322_2.png) [@umtksa](https://discourse.nodered.org/u/umtksa)\
**Post date:** [21 February 2022 16:32 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/10 "2022-02-21T16:32:23Z")

</div>

most of the barcode scanners seen as a keyboard by the system if you are using one of them  
just use a text input from dashboard nodes.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [23 March 2022 16:33 UTC](https://discourse.nodered.org/t/how-to-show-qrcode-in-dashboard/58570/11 "2022-03-23T16:33:19Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.