Add inline CTA images to next 50 blog posts by traffic

src/blog/2023/01/environment-variables-in-node-red.md

@@ -57,6 +57,9 @@ Contextual data like configuration, which user is executing the code, differenti
 
 One of the options for the `inject` node is to inject a `env variable`, short for; you guessed it: Environment Variable. In this case we’re going to one that’s pre-defined by Node-RED: `NR_FLOW_NAME`. The name of each variable is in all caps by convention. When connecting this inject to a debug it prints “Flow 1” for me.
 
+::cta-image{src="/images/cta/book-a-demo.png" alt="Walk through your FlowFuse setup with our team - book a demo" cta="demo"}
+::
+
 ![Using an environment variable in Node-RED](./images/node-red-use-env-var.png "Using an environment variable in Node-RED")
 
 Leveraging environment variables can also be done with other nodes, like for example `change`, `switch`. Note however; you can set the `inject` node to output the value for `FOO` even when it doesn’t exist, but it doesn’t allow you to check in the switch node for example if `FOO` exists.

src/blog/2023/03/3-quick-node-red-tips-4.md

@@ -22,6 +22,9 @@ When taking data in from sensors sometimes a spurious value can be sent into you
 
 ![Using the Smooth node to return highest value from the last 100 payloads](./images/smooth.png "Using the Smooth node to return highest value from the last 100 payloads")
 
+::cta-image{src="/images/cta/book-a-demo.png" alt="Walk through your FlowFuse setup with our team - book a demo" cta="demo"}
+::
+
 You can in turn use this to ignore values that deviate too far from the sample. To help demonstrate the Smooth node, I've created a flow you can import into Node-RED.
 
 ```json

src/blog/2023/03/comparing-node-red-dashboards.md

@@ -50,6 +50,9 @@ I am assuming the user is a low-code developer. They may have limited experience
 
 So, that's the methodology, let's get on with looking at the strengths of each project.
 
+::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"}
+::
+
 ## How easy is it to install?
 
 ### uibuilder - 1st place

src/blog/2023/06/import-modules.md

@@ -69,6 +69,9 @@ Historically in Node-RED, you would have needed to manually `npm install` module
 
 ![Location of the "add" button in order to import an npm module intoa  function node](./images/npmimport-add.jpg "Location of the 'add' button in order to import an npm module intoa  function node")
 
+::cta-image{src="/images/cta/book-a-demo.png" alt="Walk through your FlowFuse setup with our team - book a demo" cta="demo"}
+::
+
 All you need is the name of the module you want to import, then:
 
 1. Drop in a new "function" node & double-click it

src/blog/2023/07/how-to-build-a-opc-client-dashboard-in-node-red.md

@@ -114,6 +114,9 @@ Rather than building the flow step-by-step, the flow source code will be present
 
 ## Browse Hierarchical Server Address Space Structure With OPC UA Browser Node
 
+::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"}
+::
+
 The first flow will browse the hierarchical OPC UA Server address space structure and display it on the dashboard.
 
 ![image-20230727-085611.png](./images/opc-ua-3/image-20230727-085611.png){data-zoomable}
@@ -138,7 +141,6 @@ The configuration of the endpoint properties includes no security credentials, a
 
 ![endpoint-configure.png](./images/opc-ua-3/endpoint-configure.png){data-zoomable}
 
-
 Using the output of a debug node, we get from the OPC UA Browser yield a payload with an array of 5 objects.  
 
 ![address-debug.png](./images/opc-ua-3/address-debug.png){data-zoomable}
@@ -205,7 +207,6 @@ Going back to our OPC Server, we can see that exactly where that value is derive
 
 ![sim-counter-server.png](./images/opc-ua-3/sim-counter-server.png){data-zoomable}
 
-
 Now we add a `gauge` dashboard node to visualize the counter on the dashboard.  In the OPC Server, it is shown that the counter increments in a range of 0-30 in 1 count increments.  
 
 ![counter-properties.png](./images/opc-ua-3/counter-propertie.png){data-zoomable}

src/blog/2023/07/how-to-deploy-a-basic-opc-ua-server-in-node-red.md

@@ -77,7 +77,6 @@ Because of OPC-UA’s wide industry acceptance, it is increasingly becoming nati
 !["Automation Pyramid"](./images/opc-ua-1/automation-pyramid.jpg "Automation Pyramid")
 *Image reference - [imagecontroltips.com](https://www.motioncontroltips.com/what-is-opc-ua-and-how-does-it-compare-with-industrial-ethernet/)*
 
-
 ## Fieldbus Model vs OPC-UA Information Model
 
 As of today, industrial ethernet fieldbuses dominate the field/device-level (level 0) and controller/PLC-level (level 1) of the automation pyramid. 
@@ -90,7 +89,6 @@ Traditionally, fieldbus protocols transmit only raw data from field devices (ie,
 
 !["Fieldbus Model"](./images/opc-ua-1/fieldbus-model.png "Fieldbus Model")
 
-
 In contrast to fieldbus protocols, OPC-UA represents automation data in the form of nodes. The framework for constructing nodes is referred to as the [OPC Information model](https://reference.opcfoundation.org/Core/Part5/v104/docs/), and consists of pre-defined classes and methods that are programmed in the OPC Server address space.  
 
 !["OPC Information Model"](./images/opc-ua-1/opc-information-model.png "OPC Information Model")
@@ -112,6 +110,9 @@ The OPC client simply needs to subscribe to the OPC Server endpoint url (ex. opc
 
 With some background on OPC-UA and how information is modeled in mind, we can take a look at the [node-red-contrib-opcua-server](https://flows.nodered.org/node/node-red-contrib-opcua-server) node, which is merely a compact version of the [node-red-contrib-opcua](https://flows.nodered.org/node/node-red-contrib-opcua) node that only focuses on the OPC-UA server and hence requires less dependencies.  
 
+::cta-image{src="/images/cta/aperia-book-demo.png" alt="Aperia Technologies stopped reprogramming controllers station by station with FlowFuse - book a demo" cta="demo"}
+::
+
  An [example flow](https://github.com/BiancoRoyal/node-red-contrib-opcua-server/blob/master/examples/server-with-context.json) is provided on github that can serve as a basis for understanding how a OPC-UA server is constructed.  Let’s get the example server up and running.  
 
 Deploying the example flow yields the following result - 
@@ -148,7 +149,6 @@ We can confirm the values are being stored in memory by checking the flow contex
 
 !["Screenshot showing the Context Data option"](./images/opc-ua-1/context-data-1.png "Screenshot showing the Context Data option")
 
-
 ![Screenshot showing the flow variables in the context data tab](./images/opc-ua-1/context-data-2.png "Screenshot showing the flow variables in the context data tab")
 Each time we hit refresh, the values change, confirming that the values are randomly changing every second.
 

src/blog/2023/07/influxdb-historical-data.md

@@ -58,6 +58,9 @@ Unfortunately, these values are not in a friendly form to work with.  Ideally, w
 
  <br>
 
+::cta-image{src="/images/cta/power-workplace-book-demo.png" alt="Power Workplace relies on FlowFuse for scalability, reliability and security audits - book a demo" cta="demo"}
+::
+
 We need to extract the numeric part of the string using a regular expression with a “change” node and the JSONata expression `$number($match(msg.payload, /-?(\d+(\.\d+)?)/, 10).match)`.  `$match` and `/-?(\d+(\.\d+)?)/` help the function pull out the numeric components of the string and `$number` parses these components to be an actual number data type.
 
 Here are the properties of the “change” node.
@@ -70,7 +73,6 @@ When we look in the debugger we see the payload specified as a “number” and
 
 Now we have some live data, let’s store it using InfluxDB. Below are the steps to set up an account with the InfluxDB free service.  Navigate to [https://www.influxdata.com/products/influxdb-overview/](https://www.influxdata.com/products/influxdb-overview/) and let’s begin.  Click on “Get Started for Free” under Cloud, InfluxDB Cloud Serverless.
 
-
 !["Screenshot showing the Influxdb cloud 'Getting started' button"](images/influxdb-historical-data/run-influxdb-8.png "Screenshot showing the Influxdb cloud 'Getting started' button")
 
 For this example the Free plan will work fine.
@@ -165,7 +167,6 @@ Here is the code from the “time/date” function node.  A bit of juggling of l
 
 Here is the “change” node used to create the msg.rangeEnd.  The JSONatta expression is `$fromMillis($toMillis(msg.rangeStart) + msg.payload.window * 60 * 1000)`.  The expression combines the milliseconds from the `msg.rangeStart` with the calculated milliseconds in the “Window (minutes)” from the GUI.
 
-
 !["Screenshot of the change node properties tab"](images/influxdb-historical-data/change-node-26.png "Screenshot of the change node properties tab")
 
 <br>
@@ -220,7 +221,6 @@ The “join” node just needs to be set to “Combine each” msg.chartData obj
 
 The final “change” node, “format,” is where we prescribe the format needed for the “chart” node, [{"series":[""],"data":[[]],"labels":[""]}], and finally we insert our `msg.chartData` array into that structure.  Notice `msg.title` is now set to “Data Received.”
 
-
 !["Screenshot of the change node properties tab"](images/influxdb-historical-data/change-node-33.png "Screenshot of the change node properties tab")
 
 <br>

src/blog/2023/08/flowforge-is-now-flowfuse.md

@@ -38,6 +38,9 @@ We are happy to announce that FlowForge is changing its name to FlowFuse. Changi
 
 <!--more-->
 
+::cta-image{src="/images/cta/book-a-demo.png" alt="Walk through your FlowFuse setup with our team - book a demo" cta="demo"}
+::
+
 We believe that this new name better reflects our core mission and aspirations. Just as electricity fuses elements to create energy, the FlowFuse platform fuses together data, ideas, processes, and technologies to generate a powerful force of innovation and transformation.
 
 Selecting a new name for a company or product is never easy. Some of the requirements we set for a new name were: 1) it should be reasonably close to FlowForge so it will be easier to transition the brand identity, 2) it should even better reflect our mission, and 3) keeping the FF acronym will help with environment variable prefixes :-). I think we have accomplished all the above and am delighted to move forward as FlowFuse.

src/blog/2023/12/device-agent-as-a-windows-service.md

@@ -49,7 +49,6 @@ Finally, we set the service to run under the **service** account.
 
 _NOTE: The instructions in this how to were written on **Windows 11 Pro 22H2**_
 
-
 ### TIP: Using domain accounts
 If the account is a domain account, append the domain name to the **user** e.g. `user@domain` whenever the **user** name is used in the instructions below.
 
@@ -59,6 +58,9 @@ If the account is a domain account, append the domain name to the **user** e.g.
 powershell -Command "Start-Process 'cmd' -Verb runAs
 ```
 
+::cta-image{src="/images/cta/power-workplace-book-demo.png" alt="Power Workplace relies on FlowFuse for scalability, reliability and security audits - book a demo" cta="demo"}
+::
+
 ### TIP: Launching an elevated powershell prompt window (e.g. as the admin user)
 
 ```bash
@@ -107,7 +109,6 @@ del nssm-2.24.zip
 rmdir /s /q nssm-2.24
 ```
 
-
 ### `powershell` version [elevated](#tip%3A-launching-an-elevated-powershell-prompt-window-(e.g.-as-the-admin-user)) powershell prompt
 If you don't have `cURL` installed, then powershell can be used to download the file. Here is how to do it:
 
@@ -130,7 +131,6 @@ If you prefer, you can download the nssm zip file manually from [https://nssm.cc
 
 Ultimately, you should end up with a file named `nssm.exe` in the `c:\opt\` directory.
 
-
 ## Install and configure the device-agent
 
 As the **service** account, to do so open a command prompt window and run the following and authenticate:
@@ -226,7 +226,6 @@ Click the "Edit Service" button to save the changes.
 
 Now you have a service that will run the device-agent as the **service** account 🎉
 
-
 ### Controlling the service
 
 You can start the service with the command:

src/blog/2024/01/dashboard-2-multi-user.md

@@ -38,6 +38,9 @@ All instances on FlowFuse can be configured with _"FlowFuse User Authentication"
 
 ##### FlowFuse Cloud
 
+::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"}
+::
+
 _Note: Every instance created from today onwards automatically comes with the necessary configuration. Already created instances need to be manually restarted._
 
 The Personalised Multi-User Dashboard plugin, `@flowfuse/node-red-dashboard-2-user-addon`, is available in our [Certified Nodes](/integrations/?certified=1) catalogue, accessible to our Teams and Enterprise customers.

src/blog/2024/02/connect-node-red-to-kepware-opc.md

@@ -31,11 +31,12 @@ The first thing we need to do is check our **OPC UA Configuration Manager** for
 
 ![kepware tray](./images/kepserverex-tray.png)
 
-
 If your Node-RED instance lives on the same server that your KepserverEX is on, pick accordingly or click add if you need to define by ip address. This is for setting different credential requirements for localhost vs remote host access.  Also note, that if you have multiple network adapters, make sure to select the adapter that is in use. 
 
-![kepware endpoint definition](./images/kep-endpoint-definition.png)
+::cta-image{src="/images/cta/aperia-book-demo.png" alt="Aperia Technologies stopped reprogramming controllers station by station with FlowFuse - book a demo" cta="demo"}
+::
 
+![kepware endpoint definition](./images/kep-endpoint-definition.png)
 
 We are testing locally on the server, so we will use the one selected for loopback addressing.  We will be leaving the OPC server port as default and select **Basic256Sha256** with **Sign and Encrypt**.
 
@@ -49,32 +50,26 @@ Import the flow below into your Node-RED environment.
 
 <iframe width="100%" height="225px" src="https://flows.nodered.org/flow/04a84fe5b0db7cda9e74ba811e7b0ca5/share?height=250" allow="clipboard-read; clipboard-write" style="border: none;"></iframe>
 
-
 Next, let's configure the **OPC UA Client**.  Click the **pencil** to add a new OPCUA-Endpoint.
 
 ![kepware node-red encrypted opc ua node](./images/opcua-endpoint-node-red-encrypted.png)
 
-
 For the endpoint, **copy** the endpoint definition from the KepserverEX OPC UA Configuration Manager.  In our example, it is ```opc.tcp://127.0.0.1:49320```, and paste it into the Endpoint.  For SecurityPolicy select **Basic256Sha256**. For SecurityMode, select **Sign&Encrypt**.  Lastly, we will be selecting **Anonymous**.  Click **Update**, then **Deploy**.  
 
-
 Trigger the flow by **clicking** on the inject node.  The server may not connect at this time, and it is expected.
 
 ![kepware node-red invalid endpoint](./images/node-red-opc-ua-invalid-endpoint.png)
 
-
 #### Step 3: KepserverEX
 
 Moving back over to KepserverEX,  Click on the tray again in the bottom of the screen and select **Configuration**, then select **Edit** from the file menu, then **Properties**.  Next, Select **OPC UA** and ensure that **Allow Anonymous login** is set to **Yes**.  Click **OK**.  
 
 ![kepware node-red anonymous login](./images/node-red-kepware-anonymous-login.png)
 
-
 Select the tray at the bottom of the screen again, and select **OPC UA Configuration**. Select the **Trusted Clients** tab.
 
 ![kepware node-red trusted client before](./images/kepserverex-trusted-client-before.png)
 
-
 Now select the **NodeOPCUA-Client** and then **click** Trust.  ***If you don't have the client option, trigger the inject node again from the Node-RED flow and check the logs***
 
 ![kepware node-red trusted client after](./images/kepserverex-trusted-client-after.png)
@@ -91,7 +86,6 @@ We will be leveraging the default Simulated Examples for reading tags from Kepse
 
 ![kepware node-red read tags](./images/node-red-kepware-read-tag.png)
 
-
 Edit the OPCUa-Item node and note the item.
 
 ```

src/blog/2024/03/dashboard-getting-started.md

@@ -46,6 +46,9 @@ So, with that in mind, we wanted to offer a new "Getting Started" guide that wil
 
 ## Adding your first widgets
 
+::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"}
+::
+
 With the nodes installed, getting started is as easy as choosing a node from the Palette (the left-hand side list of nodes) in Node-RED, and dropping it onto your canvas.
 
 <video autoplay loop muted playsinline aria-label="Screen recording to show how easy it is to deploy your first Dashboard 2.0 application." width="800" height="460" preload="none"><source src="/blog/2024/03/images/dashboard-getting-started-add-widget.webm" type="video/webm" /></video>
@@ -83,7 +86,6 @@ Currently, we have three different options for page layout:
 - **Fixed:** ([docs](https://dashboard.flowfuse.com/layouts/types/fixed.html)) Each component will render at a _fixed_ width, no matter what the screen size is. The "width" property is converted a fixed pixel value (multiples of 48px by default).
 - **Notebook:** ([docs](https://dashboard.flowfuse.com/layouts/types/notebook.html)) This layout will stretch to 100% width, up to a maximum width of 1024px, and will centrally align. It's particularly useful for storytelling (e.g. articles/blogs) or analysis type user interfaces (e.g. Jupyter Notebooks), where you want the user to digest content in a particular order through scrolling.
 
-
 ### Navigation Sidebar
 
 Dashboard 2.0 offers various options on the appearance of the navigation sidebar:
@@ -94,7 +96,6 @@ Dashboard 2.0 offers various options on the appearance of the navigation sidebar
 - **Appear over Content:** When the sidebar is opened, the page is given an overlay, and the sidebar sits on top.
 - **Always Hide:** The sidebar will never show, and navigation between pages can instead be driven by [`ui-control`](https://dashboard.flowfuse.com/nodes/widgets/ui-control.html).
 
-
 ### Define Your Layout
 
 In our example, we're going to switch to a "Notebook" layout, with a "Collapse to Icons" sidebar:

src/blog/2024/03/using-kafka-with-node-red.md

@@ -42,6 +42,9 @@ docker run -p 9092:9092 `
 confluentinc/cp-kafka
 ```
 
+::cta-image{src="/images/cta/power-workplace-book-demo.png" alt="Power Workplace relies on FlowFuse for scalability, reliability and security audits - book a demo" cta="demo"}
+::
+
 ## Running Kafka on the cloud
 To run Kafka on the cloud, you can consider utilizing any cloud service according to your preferences. For a guide on running Kafka on a cloud platform, the procedures may differ. You can refer to the documentation provided by your preferred cloud service for detailed instructions.
 

src/blog/2024/04/displaying-logged-in-users-on-dashboard.md

@@ -85,6 +85,9 @@ The FlowFuse User Addon is a plugin developed for Dashboard 2.0, leveraging the
 
 ### Installing Flowfuse user addon
 
+::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"}
+::
+
 1. Click the Node-RED Settings (top-right)
 2. Click "Manage Palette"
 3. Switch to the "Install" tab

src/blog/2024/05/exploring-node-red-dashboard-2-widgets.md

@@ -54,6 +54,9 @@ The **ui-form** widget emits a payload object with key-value pairs of form eleme
 
 1. Drag a **function** node onto the canvas and add the following code. This will store the submission in the `income` global context variable, and then modify `msg.payload` to pass on a notification to any further connected nodes.
 
+::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"}
+::
+
 ```javascript
 // Retrieve the existing 'income' array from the global context, or initialize it as an empty array if it doesn't exist
 let income = global.get('income') || [];

src/blog/2024/05/mapping-location-on-dashboard-2.md

@@ -86,6 +86,9 @@ To render an interactive world map webpage for plotting location data, we will u
 
 Before plotting locations, we need to obtain the data first. For this purpose, we will utilize the [Edenburg Open Public Transportation API](https://tfe-opendata.readme.io/docs/getting-started). This API provides the live locations of all of Edenburg's public buses and trams, enabling us to access the necessary data for plotting on Worldmap within Dashboard 2.0.
 
+::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"}
+::
+
 1. Drag an **Inject** node onto the canvas and set the repeat property to a 20-second interval.
 2. Drag an HTTP request node onto the canvas, Dobule-click on it and choose **GET** method, and enter `https://tfe-opendata.com/api/v1/vehicle_locations` in the URL field and select return  as **a parsed json object**. This API is public, so no need for environment variables. For private APIs, consider using [environment variables](/blog/2023/01/environment-variables-in-node-red) for security.