{ "meta": { "templateCredsSetupCompleted": true }, "nodes": [ { "id": "c430dbe3-a6b8-4e18-8cf8-a5e42a495f46", "name": "When clicking \u2018Execute workflow\u2019", "type": "n8n-nodes-base.manualTrigger", "position": [ 5856, 1920 ], "parameters": {}, "typeVersion": 1 }, { "id": "a63f4cbf-2477-4662-b651-af1c14332d32", "name": "Sticky Note", "type": "n8n-nodes-base.stickyNote", "position": [ 4528, 1408 ], "parameters": { "width": 1200, "height": 1184, "content": "# Hosting Static HTML KPI Dashboard with CustomJS\n\n[KPI Google Sheet](https://docs.google.com/spreadsheets/d/10mj6hngkPTg1_A6bVNn8QfKujap6j-Lrt_LwAkY2d7Q/edit?usp=sharing) \n\nThis workflow automatically generates a weekly KPI dashboard from Google Sheets data and hosts it as a live static HTML page using [CustomJS](https://www.customjs.space).\n\n---\n\n## Setup\n- Requires a **self-hosted n8n instance** and a **CustomJS API key**.\n- Google Sheets should be **publicly accessible** or shared with a service account for n8n access.\n- Optional: Additional JSON/CSV sources can be integrated.\n\n---\n\n## How it works\n1 **Manual Trigger** \n- Run the workflow on demand or schedule weekly.\n\n\n2 **Load Data from Google Sheet** \n- Pull KPI metrics such as Visitors, Leads, Demo Booked, Proposal Sent, Won. \n- Aggregate weekly or per channel as needed.\n\n\n3 **Prepare Structured JSON** \n- Transform sheet rows into a clean JSON structure ready for the dashboard. \n- Example structure: \n```json\n[\n {\"Date\":\"2026-02-01\",\"Channel\":\"Google Ads\",\"Visitors\":1200,\"Leads\":95,\"Demo Booked\":40,\"Proposal Sent\":22,\"Won\":9},\n {\"Date\":\"2026-02-01\",\"Channel\":\"LinkedIn\",\"Visitors\":800,\"Leads\":70,\"Demo Booked\":28,\"Proposal Sent\":16,\"Won\":7}\n]\n```\n\n4 **Generate HTML Dashboard** \n- Feed JSON into a CustomJS HTML template node.\n- Automatically builds KPI cards, tables, and charts using Chart.js.\n\n\n5 **Host Static HTML**\n- CustomJS deploys the HTML page instantly.\n- Optional: Connect a custom domain in one click.\n- Each weekly update overwrites the previous dashboard.\n\n\n6 **Optional Enhancements**\n- Generate QR codes for the live dashboard link.\n- Include multiple charts, multiple sheets, or historical trends." }, "typeVersion": 1 }, { "id": "63aad3dc-26fd-4427-ab40-762761c6b1fe", "name": "Sticky Note1", "type": "n8n-nodes-base.stickyNote", "position": [ 5776, 1824 ], "parameters": { "color": 7, "width": 960, "height": 416, "content": "## Collect sheet data and convert to json" }, "typeVersion": 1 }, { "id": "dd1a3ad4-505f-4222-a05c-e66bd9332c99", "name": "Sticky Note2", "type": "n8n-nodes-base.stickyNote", "position": [ 6848, 1824 ], "parameters": { "color": 7, "width": 544, "height": 416, "content": "## Build and publish HTML" }, "typeVersion": 1 }, { "id": "63ab98d5-413e-4c9f-9334-742c5a87c3b4", "name": "Sticky Note3", "type": "n8n-nodes-base.stickyNote", "position": [ 7504, 1840 ], "parameters": { "color": 7, "width": 432, "height": 400, "content": "## Generate QR code" }, "typeVersion": 1 }, { "id": "3ceea1d1-37dd-48f3-a571-4a9bbbe02479", "name": "HTML", "type": "n8n-nodes-base.html", "position": [ 6960, 1968 ], "parameters": { "html": "\n\n\n\nKPI Dashboard\n\n\n\n\n\n\n

\n\n

Visitors by Channel

\n\n

Funnel Conversion

\n\n

Channel Breakdown

\n\n\n\n

\n\n\n\n" }, "typeVersion": 1.2 }, { "id": "af3d762b-f5c4-4b39-8f0a-8bf275e53dc7", "name": "Get Data From Sheet", "type": "n8n-nodes-base.httpRequest", "position": [ 6096, 1968 ], "parameters": { "url": "https://docs.google.com/spreadsheets/d/10mj6hngkPTg1_A6bVNn8QfKujap6j-Lrt_LwAkY2d7Q/gviz/tq?tqx=out:csv&sheet=Sheet1", "options": { "response": { "response": { "responseFormat": "file" } } } }, "typeVersion": 4.4 }, { "id": "effc82e4-f01b-4984-8b4b-5353d203f4f7", "name": "Convert HTML to PDF", "type": "@custom-js/n8n-nodes-pdf-toolkit-v2.pdfToolkit", "position": [ 7632, 1968 ], "parameters": { "html": "=\n\n\n\nKPI Dashbaord\n\n\n\n\n\n

KPI Dashboard

\n\n\n\n\n ", "operation": "htmlToPdf", "pdfHeightMm": 120 }, "credentials": { "customJsApi": { "name": "" } }, "typeVersion": 1 }, { "id": "9ec01a64-4ba6-4df0-a3fc-8d4dc711af49", "name": "Extract from File", "type": "n8n-nodes-base.extractFromFile", "position": [ 6320, 1968 ], "parameters": { "options": {} }, "typeVersion": 1.1 }, { "id": "c05037bf-f6cb-4238-b45d-17f7bd3c3304", "name": "Aggregate", "type": "n8n-nodes-base.aggregate", "position": [ 6512, 1968 ], "parameters": { "options": {}, "aggregate": "aggregateAllItemData" }, "typeVersion": 1 }, { "id": "64a36470-99ac-45a7-86c5-6d40ca508615", "name": "Schedule Trigger", "type": "n8n-nodes-base.scheduleTrigger", "position": [ 5856, 2096 ], "parameters": { "rule": { "interval": [ {} ] } }, "typeVersion": 1.3 }, { "id": "95630953-76c3-4af6-80d9-4714c17715df", "name": "Upsert HTML Page", "type": "@custom-js/n8n-nodes-pdf-toolkit-v2.pdfToolkit", "position": [ 7200, 1968 ], "parameters": { "pageName": "KPI Dashboard", "resource": "page", "operation": "upsert", "htmlContent": "={{ $('HTML').item.json.html }}" }, "credentials": { "customJsApi": { "name": "" } }, "typeVersion": 1 } ], "connections": { "HTML": { "main": [ [ { "node": "Upsert HTML Page", "type": "main", "index": 0 } ] ] }, "Aggregate": { "main": [ [ { "node": "HTML", "type": "main", "index": 0 } ] ] }, "Schedule Trigger": { "main": [ [ { "node": "Get Data From Sheet", "type": "main", "index": 0 } ] ] }, "Upsert HTML Page": { "main": [ [ { "node": "Convert HTML to PDF", "type": "main", "index": 0 } ] ] }, "Extract from File": { "main": [ [ { "node": "Aggregate", "type": "main", "index": 0 } ] ] }, "Get Data From Sheet": { "main": [ [ { "node": "Extract from File", "type": "main", "index": 0 } ] ] }, "When clicking \u2018Execute workflow\u2019": { "main": [ [ { "node": "Get Data From Sheet", "type": "main", "index": 0 } ] ] } } }