# Button Site in node-red

**URL:** <https://discourse.nodered.org/t/button-site-in-node-red/69502>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, database, function-node, mqtt\
**Created:** [24 October 2022 20:11 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502 "2022-10-24T20:11:52Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [24 October 2022 20:11 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/1 "2022-10-24T20:11:52Z")

</div>

Is it possible to receive a payload from a button that is on an online site?  
Or even localhost.  
My idea is to hit the button on the site, and start production using a PLC

---

<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:** [24 October 2022 20:25 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/2 "2022-10-24T20:25:50Z")

</div>

What do you mean by a button? Do you mean an actual real physical button or a button on a screen on a dashboard? If you mean a real physical button then how is it connected to the computer?

---

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [25 October 2022 13:47 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/3 "2022-10-25T13:47:25Z")

</div>

No, A button in a site.

---

<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:** [25 October 2022 14:01 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/4 "2022-10-25T14:01:29Z")

</div>

What do you mean by 'a site'? It is very difficult to help if you don't give an clear description of what you are trying to do.

If you mean a button on the node-red dashboard controlling a PLC, then yes that can be done, provided the machine running node-red can communicate with the PLC in some way.

---

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [25 October 2022 14:10 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/5 "2022-10-25T14:10:00Z")

</div>

A WebSite, like this:[http://www.treinamento48.shop/](http://www.treinamento48.shop/)

---

<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:** [25 October 2022 14:16 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/6 "2022-10-25T14:16:06Z")

</div>

> [@Erissin\_Industria4.0](#):
>
> A WebSite, like this

Do you mean that actual website or a node-red dashboard that looks like that?

I should not have to keep guessing what you mean. Do you mean that you want to develop a website using node-red that looks like that website and controls a PLC then why did you not ask that? The answer is yes, as I said above.

Have you actually done any research before coming here and making me spend time answering your vague questions?

---

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [25 October 2022 14:21 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/7 "2022-10-25T14:21:49Z")

</div>

No, you don't understand, I'm developing that web site, and I want to press one of those buttons, and when they're pressed they'll send a payload to node-red, and I don't know if it's possible to connect that button with node- red

---

<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:** [25 October 2022 14:27 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/8 "2022-10-25T14:27:37Z")

</div>

If you had said that in the first place it would have helped.

You need to get a message, indicating the button has been pressed, from the website to node-red. A good way to do that is using mqtt, but you could use an http end point if you preferred.

---

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [25 October 2022 14:40 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/9 "2022-10-25T14:40:56Z")

</div>

Thanks for this information.

---

<div class="post-metadata">

**Author:** ![JayDickson](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaydickson/32/90592_2.png) [@JayDickson](https://discourse.nodered.org/u/JayDickson)\
**Post date:** [25 October 2022 14:56 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/10 "2022-10-25T14:56:39Z")

</div>

This is actually fairly easy to implement, though there are security implications. When I'm doing stuff like this, I use an http node set to listen for POST requests and set the button on the website to hit that http endpoint using the [formaction attribute](https://www.w3schools.com/tags/att_button_formaction.asp).

At the very minimum, your node-red instance should be password protected, as it will need to be exposed to the internet for this to work. In my production environment I take it a bit further by presenting the node-red gui on a non-standard directory and use a different port for HTTP activity, as well as hiding everything behind a load balancer (citrix netscaler) with rules set to drop any http requests except those explicitly defined.

---

<div class="post-metadata">

**Author:** ![Erissin\_Industria4.0](https://avatars.discourse-cdn.com/v4/letter/e/3ab097/32.png) [@Erissin\_Industria4.0](https://discourse.nodered.org/u/Erissin_Industria4.0)\
**Post date:** [25 October 2022 15:23 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/11 "2022-10-25T15:23:13Z")

</div>

Você pode me enviar um dos seus fluxos?

---

<div class="post-metadata">

**Author:** ![JayDickson](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaydickson/32/90592_2.png) [@JayDickson](https://discourse.nodered.org/u/JayDickson)\
**Post date:** [25 October 2022 15:51 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/12 "2022-10-25T15:51:51Z")

</div>

Here's a quick and ugly example. `[{"id":"b3bbf79a69d76bc3","type":"http in","z":"0847275de270f654","name":"","url":"/test","method":"post","upload":false,"swaggerDoc":"","x":260,"y":160,"wires":[["9911453f76d228d4","61853a2b7947ac11"]]},{"id":"9911453f76d228d4","type":"debug","z":"0847275de270f654","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":325,"y":220,"wires":[],"l":false},{"id":"f576432140a4ddba","type":"http response","z":"0847275de270f654","name":"","statusCode":"","headers":{},"x":730,"y":140,"wires":[]},{"id":"5962bf8b9cc41b21","type":"http in","z":"0847275de270f654","name":"","url":"buttonpage","method":"get","upload":false,"swaggerDoc":"","x":240,"y":120,"wires":[["7217178eb784f9e0"]]},{"id":"7217178eb784f9e0","type":"template","z":"0847275de270f654","name":"HTML in here","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n\t<div>\n\t<form action=\"http://localhost:1880/test\" method=\"post\" class=\"buttonBox\">\n <button type=\"submit\" name=\"action\" value=\"testValue\">\n\t\t\t\t\t<div style=\"font-size:15vmin;\">\n\t\t\t\t\t\tDo a thing\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t</form>\n\t</div>\n</html>","output":"str","x":420,"y":120,"wires":[["f576432140a4ddba"]]},{"id":"61853a2b7947ac11","type":"change","z":"0847275de270f654","name":"redirect back to main page after submit","rules":[{"t":"set","p":"headers.location","pt":"msg","to":"localhost:1880/buttonpage","tot":"str"},{"t":"set","p":"statusCode","pt":"msg","to":"303","tot":"str"},{"t":"delete","p":"payload","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":160,"wires":[["f576432140a4ddba"]]}]`

It assumes you are hosting the website via node-red itself, but you can host the site elsewhere and just change the URL in the http redirect if you want.

---

<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:** [8 November 2022 15:52 UTC](https://discourse.nodered.org/t/button-site-in-node-red/69502/13 "2022-11-08T15:52:15Z")

</div>

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