FlowFuse · ZJvandeWeg · Jun 10, 2026
diff --git a/docs/README.md b/docs/README.md
diff --git a/docs/admin/introduction.md b/docs/admin/introduction.md
@@ -242,7 +242,7 @@ drop-down menu in the stack table. This allows the platform to notify users
 that an update is available for their instance, allowing them to upgrade the stack
 at their convenience.
 
-![Screenshot of FlowFuse showing where admins can create new stacks](./images/admin-stacks-create-new-version.png){data-zoomable}
+![Screenshot of FlowFuse showing where admins can create new stacks](./images/admin-stacks-create-new-version.png)
 <em>Screenshot of FlowFuse showing where admins can create new stacks</em>
 
 Node-RED instances that use the old stack will offer the new stack as a one-click upgrade option.
@@ -251,7 +251,7 @@ Node-RED instances that use the old stack will offer the new stack as a one-clic
 
 Alternatively, click 'Create stack' to create an entirely new stack.
 
-![Screenshot of FlowFuse showing the "Create Stack" dialog](./images/admin-stack-create.png){data-zoomable}
+![Screenshot of FlowFuse showing the "Create Stack" dialog](./images/admin-stack-create.png)
 <em>Screenshot of FlowFuse showing the "Create Stack" dialog</em>
 
 When prompted for the Node-RED version, the value here depends on the setup you're running:

diff --git a/docs/device-agent/deploy.md b/docs/device-agent/deploy.md
@@ -77,7 +77,7 @@ the Remote Instance can be placed in Developer Mode that enables remote access t
 
 * Local access to the editor can be enabled by defining a Username & Password in the Device 
   Settings -> Security and enabling "Allow offline access"
-  ![Device Allow Offline Access Settings](./images/device-local-access.png){data-zoomable}
+  ![Device Allow Offline Access Settings](./images/device-local-access.png)
   _Device Allow Offline Access Srttings_
 
 Whilst in Developer Mode the Remote Instance will not receive new updates from the platform.

diff --git a/docs/device-agent/introduction.md b/docs/device-agent/introduction.md
@@ -12,7 +12,7 @@ meta:
 
 # FlowFuse Device Agent
 
-![FlowFuse Device Agent Workflow](./images/device-agent-workflow.png){data-zoomable}
+![FlowFuse Device Agent Workflow](./images/device-agent-workflow.png)
 _Workflow to onboard new Remote Instances through the FlowFuse Platform and Device Agent_
 
 The FlowFuse platform can be used to manage Node-RED Remote Instances running on remote hardware, e.g. devices on your factory floor.

diff --git a/docs/device-agent/quickstart.md b/docs/device-agent/quickstart.md
@@ -12,7 +12,7 @@ meta:
 
 This guide will walk you through the process of adding a device to FlowFuse, connecting it to the platform, and deploying your Node-RED flows remotely. FlowFuse's Device Agent helps unlock the power of your devices by allowing you to manage and deploy Node-RED flows running on those devices securely and remotely.
 
-![FlowFuse Device Agent Workflow](./images/device-agent-workflow.png){data-zoomable}
+![FlowFuse Device Agent Workflow](./images/device-agent-workflow.png)
 _Workflow to onboard new Remote Instances through the FlowFuse Platform and Device Agent_
 
 ## Video Walkthrough
@@ -28,13 +28,13 @@ This video will walk you through every step from creating a remote instance, ins
 3. Click **Add Remote Instance.**
 4. Fill in the **Name** & **Type** and select an **Application**
 
-    ![Screenshot of the dialog form to fill out when registering a Device](./images/add_remote_instance.png){data-zoomable}{ style="max-width: 600px"; }
+    ![Screenshot of the dialog form to fill out when registering a Device](./images/add_remote_instance.png){ style="max-width: 600px"; }
     _Screenshot of the dialog form to fill out when registering a Device_
 
 5. Click **Add**
 6. You will be presented with a **Device Configuration** that you will need in the next step. _(Do not close this window just yet.)_
 
-    ![Screenshot of the dialog shown to a user when a Device is registered](./images/config_yml2a.png){data-zoomable}
+    ![Screenshot of the dialog shown to a user when a Device is registered](./images/config_yml2a.png)
     _Screenshot of the dialog shown to a user when a Device is registered_
 
 7. Copy the installation command. You will need it in next step.
@@ -46,7 +46,7 @@ This video will walk you through every step from creating a remote instance, ins
 3. Answer prompts as needed.
 4. Installer will set up the runtime and configure the Device Agent, and summarize on successful completion.
 
-    ![Example output in a Terminal showing a device agent successfully installed](./images/installer_output.png){data-zoomable}
+    ![Example output in a Terminal showing a device agent successfully installed](./images/installer_output.png)
     _Example output in a Terminal showing a device agent successfully installed_
 
 Your device is now connected to FlowFuse and ready to be used.
@@ -65,22 +65,22 @@ There are two approaches to deploying flows to your Remote Instances.
 3. Locate your newly added device and **click** on your Remote Instance.
 4. Then Click **Developer Mode** toggle button on upper right.
 
-    ![The "Developer Mode" toggle button available on the Device screen](./images/developer.png){data-zoomable}
+    ![The "Developer Mode" toggle button available on the Device screen](./images/developer.png)
     _The "Developer Mode" toggle button available on the Device screen_
 
 5. This will enable editor access for your device.
 
-    ![The "Device Editor" button available on the Device screen](./images/editorEnabled.png){data-zoomable}
+    ![The "Device Editor" button available on the Device screen](./images/editorEnabled.png)
     _The "Device Editor" button available on the Device screen_
 
 6. Clicking **Device Editor** will launch the editor.
 
-    ![Screenshot of a Node-RED Editor for a Device](./images/nr_editor.png){data-zoomable}
+    ![Screenshot of a Node-RED Editor for a Device](./images/nr_editor.png)
     _Screenshot of a Node-RED Editor for a Device_
 
 ### DevOps Pipelines
 
-![Screenshot showing the user interface for creating and running DevOps Pipelines in FlowFuse](./images/ui-devops-pipelines.png){width=750}{data-zoomable}
+![Screenshot showing the user interface for creating and running DevOps Pipelines in FlowFuse](./images/ui-devops-pipelines.png){width=750}
 _Screenshot showing the user interface for creating and running DevOps Pipelines in FlowFuse_
 
 To work with Pipelines, you need at least one other Hosted Instance or Remote Device to push _from_/_to_. You can follow the instructions on setting up a Pipeline and deploying your flows between Hosted Instances/Remote Instances [DevOps Pipelines](/docs/user/devops-pipelines.md).

diff --git a/docs/device-agent/register.md b/docs/device-agent/register.md
@@ -73,19 +73,19 @@ This approach provides you with a single "Provisioning Token" for all of your Re
    * Select an **Application** if you want the device to be automatically assigned to an application.
 6. Click **Create**
 
-![Screenshot of a FlowFuse Remote Instance Provisioning Token](./images/create-provisioning-token.png){data-zoomable}
+![Screenshot of a FlowFuse Remote Instance Provisioning Token](./images/create-provisioning-token.png)
 
 Once the Provisioning Token has been created, you will be shown the 
 **Device Provisioning Configuration** dialog:
 
-![Screenshot of a FlowFuse Remote Instance Provisioning Token](./images/provisioning-token.png){data-zoomable}
+![Screenshot of a FlowFuse Remote Instance Provisioning Token](./images/provisioning-token.png)
 
 **IMPORTANT:** This is the only time the platform will show you
 this information. Make sure to take a copy or use the **Download**
 button to save the configuration file locally.
 
 Once the token is created, it will be shown in the list of tokens on the **Provisioning** tab.
-![Screenshot of FlowFuse Remote Instance Provisioning Tokens](./images/provisioning-tokens.png){data-zoomable}
+![Screenshot of FlowFuse Remote Instance Provisioning Tokens](./images/provisioning-tokens.png)
 
 ## Connecting your Hardware
 
@@ -342,7 +342,7 @@ This option can be used to enable local login for the Node-RED editor.  This opt
 
 It can be configured under the Remote Instance's Settings
 
-![Local Auth settings for Remote Instance](./images/device-local-access.png){data-zoomable}
+![Local Auth settings for Remote Instance](./images/device-local-access.png)
 _Local Auth settings for Remote Instance_
 
 Or by adding the following to the `device.yml` file

diff --git a/docs/install/docker/README.md b/docs/install/docker/README.md
@@ -12,45 +12,6 @@ meta:
       - nodered
 ---
 
-<script>     
-   class ChecklistItem extends HTMLElement {
-
-      static observedAttributes = ["type", "task"];
-
-      constructor() {
-         super();   
-         this.type = 'required'
-         this.task = ''
-      }
-
-      attributeChangedCallback(name, oldValue, newValue) {
-        if (name === "type") {
-            this.type = newValue;
-        } else if (name === "task") {
-            this.task = newValue;
-        }
-      }
-
-      connectedCallback () {
-        const iconRequired = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`
-        const iconRecommended = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" /></svg>`
-        const iconOptional = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`
-
-        let icon = iconRequired
-        let tooltip = "Required for Operation"
-        if (this.type === 'recommended') {
-          icon = iconRecommended
-          tooltip = "Recommended for Production"
-        } else if (this.type === 'optional') {
-          icon = iconOptional
-          tooltip = "Optional"
-        }
-        this.innerHTML = `<div class="checklist-item checklist-item--${this.type}"><span class="tooltip" data-tooltip="${tooltip}"><span class="checklist-item-status">${icon}</span><span>${this.task}</span></span></div>`
-      }
-   }
-
-   customElements.define('checklist-item', ChecklistItem);
-</script>
 
 # Docker Install
 
@@ -65,19 +26,26 @@ The following guide walks through a full production-ready deployment. If you wan
   <div class="checklist">
     <label>Prerequisites</label>
     <div>
-      <checklist-item task="Domain Name"></checklist-item>
-      <checklist-item task="Docker Engine & Docker Compose"></checklist-item>
-      <checklist-item type="recommended" task="Setup Dedicated Database"></checklist-item>
-      <checklist-item type="recommended" task="Prepare TLS Certificates"></checklist-item>
+      ::ChecklistItem{task="Domain Name"}
+      ::
+      ::ChecklistItem{task="Docker Engine & Docker Compose"}
+      ::
+      ::ChecklistItem{type="recommended" task="Setup Dedicated Database"}
+      ::
+      ::ChecklistItem{type="recommended" task="Prepare TLS Certificates"}
+      ::
     </div>
   </div>
 
   <div class="checklist">
     <label>Installation</label>
     <div>
-      <checklist-item task="Download FlowFuse"></checklist-item>
-      <checklist-item task="Configure FlowFuse"></checklist-item>
-      <checklist-item type="recommended" task="Enable HTTPS"></checklist-item>
+      ::ChecklistItem{task="Download FlowFuse"}
+      ::
+      ::ChecklistItem{task="Configure FlowFuse"}
+      ::
+      ::ChecklistItem{type="recommended" task="Enable HTTPS"}
+      ::
     </div>
   </div>
 </div>

diff --git a/docs/install/introduction.md b/docs/install/introduction.md
@@ -10,10 +10,6 @@ meta:
      - kubernetes
      - trial license
      - deployment models
-templateEngineOverride: njk,md    
-installationServiceHubspot:
-  formId: "22edc659-d098-4767-aeb1-6480daae41ad"
-  targetId: "hs-form-installation-service"
 ---
 
 # Installing FlowFuse
@@ -40,8 +36,5 @@ for any specific actions required.
 
 If you need assistance, request our complimentary Installation Service, and we will help you install FlowFuse.
 
-{% set formId = installationServiceHubspot.formId %}
-{% set targetId = installationServiceHubspot.targetId %}
-{% set cta = "cta-request-installation-service" %}
-{% set reference = "docs-install-intro" %}
-{% include "hubspot/hs-form.njk" %}
+::HubSpotForm{formId="22edc659-d098-4767-aeb1-6480daee41ad" cta="cta-request-installation-service" reference="docs-install-intro"}
+::
diff --git a/docs/install/kubernetes/README.md b/docs/install/kubernetes/README.md
@@ -11,45 +11,6 @@ meta:
       - mqtt
 ---
 
-<script>     
-    class ChecklistItem extends HTMLElement {
-
-       static observedAttributes = ["type", "task"];
-
-       constructor() {
-          super();   
-          this.type = 'required'
-          this.task = ''
-       }
-
-       attributeChangedCallback(name, oldValue, newValue) {
-         if (name === "type") {
-             this.type = newValue;
-         } else if (name === "task") {
-             this.task = newValue;
-         }
-       }
-
-       connectedCallback () {
-         const iconRequired = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`
-         const iconRecommended = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" /></svg>`
-         const iconOptional = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`
-
-         let icon = iconRequired
-         let tooltip = "Required for Operation"
-         if (this.type === 'recommended') {
-           icon = iconRecommended
-           tooltip = "Recommended for Production"
-         } else if (this.type === 'optional') {
-           icon = iconOptional
-           tooltip = "Optional"
-         }
-         this.innerHTML = `<div class="checklist-item checklist-item--${this.type}"><span class="tooltip" data-tooltip="${tooltip}"><span class="checklist-item-status">${icon}</span><span>${this.task}</span></span></div>`
-       }
-    }
-
-    customElements.define('checklist-item', ChecklistItem);
- </script>
 
 # Kubernetes Install
 
@@ -62,19 +23,26 @@ By the end, you will have a fully functioning FlowFuse instance running on a Kub
    <div class="checklist">
      <label>Prerequisites</label>
      <div>
-       <checklist-item task="Domain Name"></checklist-item>
-       <checklist-item task="Kubernetes cluster"></checklist-item>
-       <checklist-item type="recommended" task="Setup Dedicated Database"></checklist-item>
-       <checklist-item type="recommended" task="Prepare TLS Certificates"></checklist-item>
+       ::ChecklistItem{task="Domain Name"}
+       ::
+       ::ChecklistItem{task="Kubernetes cluster"}
+       ::
+       ::ChecklistItem{type="recommended" task="Setup Dedicated Database"}
+       ::
+       ::ChecklistItem{type="recommended" task="Prepare TLS Certificates"}
+       ::
      </div>
    </div>
 
    <div class="checklist">
      <label>Installation</label>
      <div>
-       <checklist-item task="Download FlowFuse"></checklist-item>
-       <checklist-item task="Configure FlowFuse"></checklist-item>
-       <checklist-item type="recommended" task="Enable HTTPS"></checklist-item>
+       ::ChecklistItem{task="Download FlowFuse"}
+       ::
+       ::ChecklistItem{task="Configure FlowFuse"}
+       ::
+       ::ChecklistItem{type="recommended" task="Enable HTTPS"}
+       ::
      </div>
    </div>
  </div>