<details> <summary>📄 View Full Workflow JSON</summary> ```json { "name": "Team LinkedIn Profile Directory Page", "nodes": [ { "parameters": { "path": "team-linkedin", "responseMode": "responseNode", "options": {} }, "id": "85902fe6-27ba-4cff-96e1-8872a699bf0c", "name": "Webhook Trigger", "type": "n8n-nodes-base.webhook", "typeVersion": 2.1, "position": [ 0, 0 ], "webhookId": "70944de0-5ba0-46a0-9702-80aa195324d3" }, { "parameters": { "respondWith": "text", "responseBody": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Connect with Our Team on LinkedIn</title>\n <style>\n body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: #f5f5f5;\n max-width: 600px;\n padding: 2rem;\n margin: 0 auto;\n }\n \n h1 {\n margin-bottom: 0.25rem;\n }\n \n .subtitle {\n margin-top: 0;\n margin-bottom: 1.5rem;\n color: #555;\n }\n \n ul {\n list-style: none;\n padding: 0;\n }\n \n li {\n margin: 0.5rem 0;\n background: #fff;\n border-radius: 0.5rem;\n padding: 0.75rem 1rem;\n box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n }\n \n a {\n color: #0A66C2;\n font-size: 1.05rem;\n font-weight: 500;\n word-break: break-all;\n text-decoration: none;\n }\n \n small {\n display: block;\n margin-top: 0.25rem;\n color: #777;\n font-size: 0.8rem;\n }\n </style>\n</head>\n<body>\n <h1>Connect with Our Team</h1>\n <p class=\"subtitle\">Tap a name below to open their LinkedIn profile</p>\n \n <ul>\n <li>\n <a href=\"https://linkedin.com/in/andre-exilien-61897515b\" target=\"_blank\">\n Andre Exilien\n <small>linkedin.com/in/andre-exilien-61897515b</small>\n </a>\n </li>\n <li>\n <a href=\"https://linkedin.com/in/aztuxmann\" target=\"_blank\">\n Jason Mann\n <small>linkedin.com/in/aztuxmann</small>\n </a>\n </li>\n <li>\n <a href=\"https://linkedin.com/in/safa-matin-4177678\" target=\"_blank\">\n Safa Martin\n <small>linkedin.com/in/safa-matin-4177678</small>\n </a>\n </li>\n <li>\n <a href=\"https://linkedin.com/in/steven-johnson-coding\" target=\"_blank\">\n Steven Johnson\n <small>linkedin.com/in/steven-johnson-coding</small>\n </a>\n </li>\n <li>\n <a href=\"https://linkedin.com/in/daricaceres\" target=\"_blank\">\n Dari Caceres\n <small>linkedin.com/in/daricaceres</small>\n </a>\n </li>\n </ul>\n</body>\n</html>", "options": { "responseHeaders": { "entries": [ { "name": "Content-Type", "value": "text/html" } ] } } }, "id": "608a0580-ec9f-4f80-a355-890278321e5e", "name": "Return HTML Page", "type": "n8n-nodes-base.respondToWebhook", "typeVersion": 1.5, "position": [ 224, 0 ] }, { "parameters": {}, "id": "e0e4f26b-f1b6-433f-94e3-3c61e8da65a7", "name": "Manual Trigger", "type": "n8n-nodes-base.manualTrigger", "typeVersion": 1, "position": [ 0, 224 ] }, { "parameters": { "assignments": { "assignments": [ { "id": "id-1", "name": "url", "value": "https://stevenrhett.app.n8n.cloud/webhook/team-linkedin", "type": "string" } ] }, "options": {} }, "id": "59429c36-f91a-4e0e-b1c4-045fabdc9637", "name": "Set Hub URL", "type": "n8n-nodes-base.set", "typeVersion": 3.4, "position": [ 224, 224 ] }, { "parameters": { "url": "=https://api.qrserver.com/v1/create-qr-code/?size=400x400&data={{ $json.url }}", "options": { "response": { "response": { "responseFormat": "file" } } } }, "id": "57699557-8a0b-46bd-a331-654178d84038", "name": "Generate QR Code", "type": "n8n-nodes-base.httpRequest", "typeVersion": 4.3, "position": [ 448, 224 ] } ], "pinData": {}, "connections": { "Webhook Trigger": { "main": [ [ { "node": "Return HTML Page", "type": "main", "index": 0 } ] ] }, "Manual Trigger": { "main": [ [ { "node": "Set Hub URL", "type": "main", "index": 0 } ] ] }, "Set Hub URL": { "main": [ [ { "node": "Generate QR Code", "type": "main", "index": 0 } ] ] } }, "active": true, "settings": { "executionOrder": "v1" }, "versionId": "9f8abeb1-0c70-4635-8fc8-3bbba71c8761", "meta": { "instanceId": "b2174c815ee80f3b0ced9bbe80cc59e2446ebd3a64dffdfcf412cfa6252b0740" }, "id": "CHLYi4huASbk3A64", "tags": [] } ``` </details> --- # Team LinkedIn Profile Directory Page An n8n workflow that hosts a mobile-friendly team directory page and generates a QR code for easy sharing. ## Overview This automation serves two purposes: 1. **Directory Page** — A webhook serves a styled HTML page listing team LinkedIn profiles 2. **QR Code Generator** — A manual trigger creates a scannable QR code linking to the directory ## How It Works ### Flow 1: Serve the Directory Page #### **Webhook Trigger → Return HTML Page** When someone visits the webhook URL, they see a clean page with tappable links to each team member's LinkedIn profile. ### Flow 2: Generate a QR Code ` Manual Trigger → Set Hub URL → Generate QR Code ` Running this manually calls the QR Server API to create a 400×400 QR code pointing to the directory. ## Configuration | Setting | Value | |---------|-------| | Endpoint | `/webhook/team-linkedin` | | Full URL | `https://stevenrhett.app.n8n.cloud/webhook/team-linkedin` | | QR Code Size | 400×400px | | Status | Active | ## Team Members - Andre Exilien — [linkedin.com/in/andre-exilien-61897515b](https://linkedin.com/in/andre-exilien-61897515b) - Jason Mann — [linkedin.com/in/aztuxmann](https://linkedin.com/in/aztuxmann) - Safa Martin — [linkedin.com/in/safa-matin-4177678](https://linkedin.com/in/safa-matin-4177678) - Steven Johnson — [linkedin.com/in/steven-johnson-coding](https://linkedin.com/in/steven-johnson-coding) - Dari Caceres — [linkedin.com/in/daricaceres](https://linkedin.com/in/daricaceres) ## Use Cases - **Networking events** — Print the QR code on badges or posters - **Email signatures** — Link to one directory instead of individual profiles - **Presentations** — Add the QR code to your final slide - **Business cards** — Single QR code for the whole team ## Workflow JSON ```json { "name": "Team LinkedIn Profile Directory Page", "nodes": [ { "parameters": { "path": "team-linkedin", "responseMode": "responseNode", "options": {} }, "id": "85902fe6-27ba-4cff-96e1-8872a699bf0c", "name": "Webhook Trigger", "type": "n8n-nodes-base.webhook", "typeVersion": 2.1, "position": [0, 0], "webhookId": "70944de0-5ba0-46a0-9702-80aa195324d3" }, { "parameters": { "respondWith": "text", "responseBody": "<!DOCTYPE html>...</html>", "options": { "responseHeaders": { "entries": [ { "name": "Content-Type", "value": "text/html" } ] } } }, "id": "608a0580-ec9f-4f80-a355-890278321e5e", "name": "Return HTML Page", "type": "n8n-nodes-base.respondToWebhook", "typeVersion": 1.5, "position": [224, 0] }, { "parameters": {}, "id": "e0e4f26b-f1b6-433f-94e3-3c61e8da65a7", "name": "Manual Trigger", "type": "n8n-nodes-base.manualTrigger", "typeVersion": 1, "position": [0, 224] }, { "parameters": { "assignments": { "assignments": [ { "id": "id-1", "name": "url", "value": "https://stevenrhett.app.n8n.cloud/webhook/team-linkedin", "type": "string" } ] }, "options": {} }, "id": "59429c36-f91a-4e0e-b1c4-045fabdc9637", "name": "Set Hub URL", "type": "n8n-nodes-base.set", "typeVersion": 3.4, "position": [224, 224] }, { "parameters": { "url": "=https://api.qrserver.com/v1/create-qr-code/?size=400x400&data={{ $json.url }}", "options": { "response": { "response": { "responseFormat": "file" } } } }, "id": "57699557-8a0b-46bd-a331-654178d84038", "name": "Generate QR Code", "type": "n8n-nodes-base.httpRequest", "typeVersion": 4.3, "position": [448, 224] } ], "connections": { "Webhook Trigger": { "main": [[{"node": "Return HTML Page", "type": "main", "index": 0}]] }, "Manual Trigger": { "main": [[{"node": "Set Hub URL", "type": "main", "index": 0}]] }, "Set Hub URL": { "main": [[{"node": "Generate QR Code", "type": "main", "index": 0}]] } }, "active": true, "settings": { "executionOrder": "v1" }, "id": "CHLYi4huASbk3A64" } ``` ## Notes - The HTML response is self-contained with inline CSS - QR codes are generated via the free [QR Server API](https://goqr.me/api/) - The workflow must be set to **Active** for the webhook to respond ---