diff --git a/dashboard-filter-panel/package-lock.json b/dashboard-filter-panel/package-lock.json
index 5c28f6c..53d3274 100644
--- a/dashboard-filter-panel/package-lock.json
+++ b/dashboard-filter-panel/package-lock.json
@@ -44,6 +44,7 @@
         "thememirror": "^2.0.1",
         "three": "^0.164.1",
         "tslib": "^2.3.0",
+        "userflow.js": "^2.12.1",
         "util": "^0.12.5",
         "zone.js": "~0.14.0"
       },
@@ -12320,6 +12321,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/userflow.js": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/userflow.js/-/userflow.js-2.12.1.tgz",
+      "integrity": "sha512-bLErWFGR368uRF6IguanciZJnfoPhRMA/VKJjOCBZEe1n45dU01nRVw1DL6G0gV/yx/6t5v7a+k9FZ3aoXgbTw=="
+    },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
diff --git a/dashboard-filter-panel/package.json b/dashboard-filter-panel/package.json
index 31bb42f..13a28e8 100755
--- a/dashboard-filter-panel/package.json
+++ b/dashboard-filter-panel/package.json
@@ -47,6 +47,7 @@
     "thememirror": "^2.0.1",
     "three": "^0.164.1",
     "tslib": "^2.3.0",
+    "userflow.js": "^2.12.1",
     "util": "^0.12.5",
     "zone.js": "~0.14.0"
   },
diff --git a/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.html b/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.html
index 6900e56..2b3b736 100644
--- a/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.html
+++ b/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.html
@@ -1,6 +1,6 @@
 <mat-toolbar>
   <div class="flex w-full items-center">
-    <div class="grow flex justify-center items-center">
+    <div class="grow flex justify-center items-center userflow-filter-panel">
       <span class="mr-3">Dashboard with filter panel</span>
     </div>
 
diff --git a/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.scss b/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.scss
index 835c4fa..6952875 100644
--- a/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.scss
+++ b/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.scss
@@ -6,4 +6,6 @@
 }
 .dashboard-with-filter-panel {
   width: 100%;
-}
\ No newline at end of file
+}
+/* Userflow is only necessary for the Luzmo hosted showcases */
+.userflow-filter-panel {}
\ No newline at end of file
diff --git a/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.ts b/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.ts
index 21ad1cf..bf852a3 100644
--- a/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.ts
+++ b/dashboard-filter-panel/src/app/dashboard-filter-panel/dashboard-filter-panel.component.ts
@@ -14,6 +14,11 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { DashboardFilterPanelSettingsDialogComponent } from './settings-dialog/settings-dialog.component';
 
+// Userflow is only necessary for the Luzmo hosted showcases
+import userflow from 'userflow.js'
+userflow.init('ct_65z5oczamna45bveai47cpcbpe');
+userflow.identifyAnonymous();
+
 @Component({
   selector: 'app-dashboard-filter-panel',
   standalone: true,
diff --git a/drag-n-drop-chart-library/package-lock.json b/drag-n-drop-chart-library/package-lock.json
index c2fc552..333575b 100644
--- a/drag-n-drop-chart-library/package-lock.json
+++ b/drag-n-drop-chart-library/package-lock.json
@@ -19,6 +19,7 @@
         "react-dom": "^18.3.1",
         "react-rnd": "^10.4.11",
         "react-scripts": "5.0.1",
+        "userflow.js": "^2.12.1",
         "web-vitals": "^2.1.4"
       }
     },
@@ -19342,6 +19343,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/userflow.js": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/userflow.js/-/userflow.js-2.12.1.tgz",
+      "integrity": "sha512-bLErWFGR368uRF6IguanciZJnfoPhRMA/VKJjOCBZEe1n45dU01nRVw1DL6G0gV/yx/6t5v7a+k9FZ3aoXgbTw=="
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/drag-n-drop-chart-library/package.json b/drag-n-drop-chart-library/package.json
index 993db06..c4d0a5d 100644
--- a/drag-n-drop-chart-library/package.json
+++ b/drag-n-drop-chart-library/package.json
@@ -14,6 +14,7 @@
     "react-dom": "^18.3.1",
     "react-rnd": "^10.4.11",
     "react-scripts": "5.0.1",
+    "userflow.js": "^2.12.1",
     "web-vitals": "^2.1.4"
   },
   "homepage": "https://showcases.luzmo.com/drag-n-drop-chart-library",
@@ -22,7 +23,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "build:ci" : "CI=true npx react-scripts build"
+    "build:ci": "CI=true npx react-scripts build"
   },
   "eslintConfig": {
     "extends": [
diff --git a/drag-n-drop-chart-library/src/App.js b/drag-n-drop-chart-library/src/App.js
index 80b7bcc..d4206aa 100644
--- a/drag-n-drop-chart-library/src/App.js
+++ b/drag-n-drop-chart-library/src/App.js
@@ -3,6 +3,13 @@ import FlexComponent from "./Components/FlexComponent";
 import { Rnd } from "react-rnd";
 import ChartDrawer from "./Components/ChartDrawer";
 import { Button, Box} from "@mui/material";
+import './App.css';
+
+// Userflow is only necessary for the Luzmo hosted showcases
+import userflow from 'userflow.js'
+userflow.init('ct_65z5oczamna45bveai47cpcbpe');
+userflow.identifyAnonymous();
+
 
 export default function App() {
   const [open, setOpen] = React.useState(false);
@@ -18,7 +25,7 @@ export default function App() {
 
   return (
     <Box sx={{ width: "100%" }}>
-      <div
+      <div class="userflow-drag-n-drop"
         style={{
           maxWidth: "fit-content",
           marginInline: "auto",
diff --git a/wearables-dashboard/package-lock.json b/wearables-dashboard/package-lock.json
index aa38b86..5a6b459 100644
--- a/wearables-dashboard/package-lock.json
+++ b/wearables-dashboard/package-lock.json
@@ -14,7 +14,8 @@
         "@mui/icons-material": "^5.16.4",
         "@mui/lab": "^5.0.0-alpha.172",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "userflow.js": "^2.12.1"
       },
       "devDependencies": {
         "@types/react": "^18.3.3",
@@ -3898,6 +3899,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/userflow.js": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/userflow.js/-/userflow.js-2.12.1.tgz",
+      "integrity": "sha512-bLErWFGR368uRF6IguanciZJnfoPhRMA/VKJjOCBZEe1n45dU01nRVw1DL6G0gV/yx/6t5v7a+k9FZ3aoXgbTw=="
+    },
     "node_modules/vite": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.1.tgz",
diff --git a/wearables-dashboard/package.json b/wearables-dashboard/package.json
index a6dd274..458a146 100644
--- a/wearables-dashboard/package.json
+++ b/wearables-dashboard/package.json
@@ -18,7 +18,8 @@
     "@mui/icons-material": "^5.16.4",
     "@mui/lab": "^5.0.0-alpha.172",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "userflow.js": "^2.12.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
diff --git a/wearables-dashboard/src/App.tsx b/wearables-dashboard/src/App.tsx
index 09c0722..c68755c 100644
--- a/wearables-dashboard/src/App.tsx
+++ b/wearables-dashboard/src/App.tsx
@@ -4,6 +4,11 @@ import { Grid, Box, createTheme, ThemeProvider } from "@mui/material";
 
 import { Topnav } from "./components";
 
+// Userflow is only necessary for the Luzmo hosted showcases
+import userflow from 'userflow.js'
+userflow.init('ct_65z5oczamna45bveai47cpcbpe');
+userflow.identifyAnonymous();
+
 const theme = createTheme({
   typography: {
     fontFamily: "Lato",
@@ -29,7 +34,7 @@ function App() {
       <UserContext.Provider value={{ user, switchUser }}>
         <ThemeProvider theme={theme}>
           <Topnav selectedTab={selectedTab} onTabChange={setSelectedTab} />
-          <Grid container spacing={2} paddingX={2} paddingBottom={2}>
+          <Grid container spacing={2} paddingX={2} paddingBottom={2} class="userflow-wearables">
             {selectedTab === "analytics" && <Analytics />}
             {selectedTab === "settings" && (
               <Grid item xs={12}>
diff --git a/wearables-dashboard/src/index.css b/wearables-dashboard/src/index.css
index a198e07..ad55573 100644
--- a/wearables-dashboard/src/index.css
+++ b/wearables-dashboard/src/index.css
@@ -66,3 +66,6 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+/* Userflow is only necessary for the Luzmo hosted showcases */
+userflow-wearables {}
\ No newline at end of file