{
"meta": {
"templateCredsSetupCompleted": true
},
"nodes": [
{
"id": "79bad9c0-492e-4817-8c2b-fad534c6a0ea",
"name": "Webhook - Receive Form",
"type": "n8n-nodes-base.webhook",
"position": [
2352,
848
],
"parameters": {
"path": "67adcc76-29c9-412a-b3ce-f34d2944a09f",
"options": {
"rawBody": true
},
"httpMethod": "POST",
"responseMode": "lastNode"
},
"typeVersion": 1.1
},
{
"id": "aa0b4dc2-2100-44d8-adad-9595a99037d0",
"name": "Create HTML Design",
"type": "n8n-nodes-base.code",
"position": [
2736,
848
],
"parameters": {
"jsCode": "const quote = $json.quote;\nconst imageBase64 = $json.imageBase64;\nconst mimeType = $json.mimeType;\n\n// Better randomization using timestamp and execution ID\n// This ensures different designs even in quick succession\nconst timestamp = Date.now();\nconst executionId = $execution.id || 0;\nconst randomSeed = (timestamp + executionId) % 6;\nconst designIndex = Math.floor((Math.random() * 1000 + randomSeed) % 6);\n\nconsole.log(`Selected design: ${designIndex + 1} (seed: ${randomSeed}, time: ${timestamp})`);\n\nlet html = '';\n\n// Design 1 - Purple Gradient with Circles\nif (designIndex === 0) {\n html = `\n\n\n\n \n \n\n\n \n \n \n \n \n \n \n \n
![\"Profile\"](\"data:${mimeType};base64,${imageBase64}\")
\n
${quote}
\n\n\n`;\n}\n\n// Design 2 - Dark Elegant with Golden Border\nelse if (designIndex === 1) {\n html = `\n\n\n\n \n \n\n\n \n
\n
\"
\n ${quote}
\n\n\n`;\n}\n\n// Design 3 - Pink Gradient Split\nelse if (designIndex === 2) {\n html = `\n\n\n\n \n \n\n\n \n
\n
${quote}
\n\n\n`;\n}\n\n// Design 4 - Ocean Blue Card\nelse if (designIndex === 3) {\n html = `\n\n\n\n \n \n\n\n \n \n
\n
${quote}
\n\n\n`;\n}\n\n// Design 5 - Teal Modern\nelse if (designIndex === 4) {\n html = `\n\n\n\n \n \n\n\n \n \n \n
\n
${quote}
\n\n\n`;\n}\n\n// Design 6 - Sunset Orange\nelse if (designIndex === 5) {\n html = `\n\n\n\n \n \n\n\n \n \n \n
\n
${quote}
\n\n\n`;\n}\n\nreturn {\n json: {\n html: html,\n quote: quote,\n designUsed: designIndex + 1,\n designName: ['Purple Circles', 'Dark Golden', 'Pink Gradient', 'Ocean Blue', 'Teal Modern', 'Sunset Orange'][designIndex],\n timestamp: timestamp\n }\n};"
},
"typeVersion": 2
},
{
"id": "c4af2d86-aa2c-45f8-8c27-64583b3ffe90",
"name": "HTML to Image (HCTI)",
"type": "n8n-nodes-base.httpRequest",
"notes": "Sign up at htmlcsstoimage.com - Free 50 images/month",
"position": [
2944,
848
],
"parameters": {
"url": "https://hcti.io/v1/image",
"method": "POST",
"options": {},
"sendBody": true,
"authentication": "genericCredentialType",
"bodyParameters": {
"parameters": [
{
"name": "html",
"value": "={{ $json.html }}"
},
{
"name": "viewport_width",
"value": 1080
},
{
"name": "viewport_height",
"value": 1080
}
]
},
"genericAuthType": "httpBasicAuth"
},
"credentials": {
"httpBasicAuth": {
"name": ""
}
},
"typeVersion": 4.1,
"alwaysOutputData": true
},
{
"id": "94ce69a3-f7b6-4f42-bdce-760d52bc1fe6",
"name": "Download Image",
"type": "n8n-nodes-base.httpRequest",
"position": [
3152,
848
],
"parameters": {
"url": "={{ $json.url }}",
"options": {
"response": {
"response": {
"responseFormat": "file"
}
}
}
},
"typeVersion": 4.1
},
{
"id": "55c01d4c-d3d0-42fe-98eb-bf5366092a57",
"name": "Prepare Image Data",
"type": "n8n-nodes-base.code",
"position": [
3568,
848
],
"parameters": {
"jsCode": "// Convert downloaded image to base64\nconst binaryData = $input.item.binary.data;\nconst base64Image = binaryData.data.toString('base64');\n\nconst quoteData = $('Parse Form Data').item.json;\n\nreturn {\n json: {\n quote: quoteData.quote,\n designImageBase64: base64Image,\n imageUrl: $('HTML to Image (HCTI)').item.json.url\n }\n};"
},
"typeVersion": 2
},
{
"id": "8d510d0f-e601-40ed-baf1-ca2b2a206694",
"name": "Prepare Final Response",
"type": "n8n-nodes-base.code",
"position": [
3984,
848
],
"parameters": {
"jsCode": "const captionResponse = $input.item.json;\nconst designData = $('Prepare Image Data').item.json;\n\n// Extract caption from ChatGPT\nlet caption = \"\";\ntry {\n caption = captionResponse.choices[0].message.content.trim();\n} catch (error) {\n caption = \"Caption generation failed. Please try again.\";\n}\n\n// Prepare response for the form\nconst response = {\n success: true,\n quote: designData.quote,\n designImageBase64: designData.designImageBase64,\n caption: caption,\n timestamp: new Date().toISOString()\n};\n\nreturn {\n json: response\n};"
},
"typeVersion": 2
},
{
"id": "845ef993-27a6-4f41-8ee7-4bf6e6812eca",
"name": "Respond to Webhook1",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
4160,
848
],
"parameters": {
"options": {
"responseHeaders": {
"entries": [
{
"name": "Content-Type",
"value": "application/json"
},
{
"name": "Access-Control-Allow-Origin",
"value": "*"
}
]
}
},
"respondWith": "json",
"responseBody": "={{ JSON.stringify($json) }}"
},
"typeVersion": 1
},
{
"id": "a1bc71ff-c28c-4f74-837b-b4422221a4a3",
"name": "Create a post",
"type": "n8n-nodes-base.linkedIn",
"position": [
3808,
1216
],
"parameters": {
"additionalFields": {}
},
"typeVersion": 1
},
{
"id": "084329c5-4a75-4dee-84e6-10372a02c693",
"name": "Webhook-LinkedIn-post",
"type": "n8n-nodes-base.webhook",
"position": [
3584,
1216
],
"parameters": {
"path": "087bc7d9-39b4-48c2-add3-2e73b082cdf4",
"options": {},
"httpMethod": "POST",
"responseMode": "responseNode"
},
"typeVersion": 2.1
},
{
"id": "3d79ded9-d0cc-4276-802f-3323ec499c23",
"name": "Respond to Webhook",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
4032,
1216
],
"parameters": {
"options": {
"responseCode": 200,
"responseHeaders": {
"entries": [
{
"name": "Access-Control-Allow-Origin",
"value": "*"
},
{
"name": "Access-Control-Allow-Methods",
"value": "POST, OPTIONS"
},
{
"name": "Access-Control-Allow-Headers",
"value": "Content-Type"
},
{
"name": "Content-Type",
"value": "application/json"
}
]
}
},
"respondWith": "json",
"responseBody": "{\n \"success\": true,\n \"message\": \"Post received and posted to LinkedIn\"\n}"
},
"typeVersion": 1.4
},
{
"id": "e5c47950-4ce7-42e2-8443-c2008a033e04",
"name": "Edit Image",
"type": "n8n-nodes-base.editImage",
"position": [
3360,
848
],
"parameters": {
"options": {},
"operation": "resize"
},
"typeVersion": 1
},
{
"id": "5c6c2021-4a73-4431-aabd-00ddadd9aae3",
"name": "Sticky Note",
"type": "n8n-nodes-base.stickyNote",
"position": [
3520,
1120
],
"parameters": {
"color": 7,
"width": 832,
"height": 272,
"content": "## 3. Confirm and post directly to LinkedIn"
},
"typeVersion": 1
},
{
"id": "1857d7f7-1d3f-4fdc-aefb-90b12d4b089a",
"name": "Sticky Note1",
"type": "n8n-nodes-base.stickyNote",
"position": [
1376,
624
],
"parameters": {
"width": 816,
"height": 864,
"content": "## Automated LinkedIn Post Designer with N8N Integration\n\n## How it works\n- Upload your portrait and post quote in the webform - attached link to the webform below\n- Webhook receives the form data\n- Parse form Data, convert the image to base64 image\n- Create HTML Design: create the design from 6 ready templates, all in HTML\n- HTML to image: convert the code to an image and download\n- Reduce image size, generate captions using OpenAI API\n- Output response to view in webform\n- Edit captions in webform and post to LinkedIn directly\n\n## Setup\n1. Get the web form attached below\n2. Match both webhooks in the form to send data\n3. Get [html css to image](https://htmlcsstoimage.com/) API and match in HTML to image (HCTI) http request node - Basic Auth\n4. Get [OpenAI](https://platform.openai.com/settings/) API and insert into ChatGPT http request node - Header parameters\n5. Create [LinkedIn](https://www.linkedin.com/) credential and match the Create a post LinkedIn node\n\n## [Link to the webform](https://drive.google.com/file/d/1c2fuxuJXt-eV3qM4aW48H0CVebA1js1j/view?usp=sharing)"
},
"typeVersion": 1
},
{
"id": "5819505b-aa46-44aa-a8da-b5d094341ed4",
"name": "Parse Form Data",
"type": "n8n-nodes-base.code",
"position": [
2544,
848
],
"parameters": {
"jsCode": "// Extract form data\nconst body = $input.item.binary;\nconst params = $input.item.json.body;\n\n// Get quote text\nconst quote = params.quote || \"No quote provided\";\n\n// Get image binary data\nconst imageData = body.image;\n\nif (!imageData) {\n throw new Error(\"No image uploaded\");\n}\n\n// Convert binary to base64 for HTML embedding\nconst base64Image = imageData.data.toString('base64');\nconst mimeType = imageData.mimeType || 'image/jpeg';\n\nreturn {\n json: {\n quote: quote,\n imageBase64: base64Image,\n mimeType: mimeType,\n timestamp: new Date().toISOString()\n }\n};"
},
"typeVersion": 2
},
{
"id": "6a4c4f5a-5fc5-4449-a56b-ca4ddfc2e308",
"name": "ChatGPT - Generate Caption",
"type": "n8n-nodes-base.httpRequest",
"position": [
3776,
848
],
"parameters": {
"url": "https://api.openai.com/v1/chat/completions",
"method": "POST",
"options": {},
"sendBody": true,
"sendHeaders": true,
"bodyParameters": {
"parameters": [
{
"name": "model",
"value": "gpt-4o-mini"
},
{
"name": "messages",
"value": "={{ [\n {\n role: 'system',\n content: 'You are an expert Linkedin caption writer. Write in an educative, inspirational, motivating, and informative tone. Never use em dashes. Keep it authentic, engaging, and conversion-focused.'\n },\n {\n role: 'user',\n content: 'Write a compelling linkedin caption for this quote: \"' + $json.quote + '\"\\n\\nRequirements:\\n- Tone: Educative, inspirational, motivating, informative\\n- NO em dash allowed anywhere\\n- Length: 100-150 words\\n- Start with an attention-grabbing hook\\n- Expand on the quote meaning or practical application\\n- End with a clear call-to-action or thought-provoking question\\n- Add 5-7 highly relevant hashtags\\n- Make it personal and relatable\\n- No fluff, just value\\n\\nFormat:\\n[Hook line]\\n\\n[Main content - 2-3 short paragraphs]\\n\\n[CTA or question]\\n\\n[Hashtags separated by spaces]'\n }\n] }}"
},
{
"name": "temperature",
"value": 0.8
},
{
"name": "max_tokens",
"value": 400
}
]
},
"headerParameters": {
"parameters": [
{
"name": "Authorization",
"value": "Bearer YOUR_TOKEN_HERE"
},
{
"name": "Content-Type",
"value": "application/json"
}
]
}
},
"typeVersion": 4.1
},
{
"id": "d5dd0d46-94b4-40a3-b6ff-35f3b92f5aa9",
"name": "Sticky Note2",
"type": "n8n-nodes-base.stickyNote",
"position": [
2288,
736
],
"parameters": {
"color": 7,
"width": 1200,
"height": 656,
"content": "## 1. Receive data from webform, process and generate design"
},
"typeVersion": 1
},
{
"id": "c35b2f27-a007-4468-9ac1-fc28339a348a",
"name": "Sticky Note4",
"type": "n8n-nodes-base.stickyNote",
"position": [
3520,
736
],
"parameters": {
"color": 7,
"width": 832,
"height": 352,
"content": "## 2. Generate caption and send response back to webform"
},
"typeVersion": 1
}
],
"connections": {
"Edit Image": {
"main": [
[
{
"node": "Prepare Image Data",
"type": "main",
"index": 0
}
]
]
},
"Create a post": {
"main": [
[
{
"node": "Respond to Webhook",
"type": "main",
"index": 0
}
]
]
},
"Download Image": {
"main": [
[
{
"node": "Edit Image",
"type": "main",
"index": 0
}
]
]
},
"Parse Form Data": {
"main": [
[
{
"node": "Create HTML Design",
"type": "main",
"index": 0
}
]
]
},
"Create HTML Design": {
"main": [
[
{
"node": "HTML to Image (HCTI)",
"type": "main",
"index": 0
}
]
]
},
"Prepare Image Data": {
"main": [
[
{
"node": "ChatGPT - Generate Caption",
"type": "main",
"index": 0
}
]
]
},
"HTML to Image (HCTI)": {
"main": [
[
{
"node": "Download Image",
"type": "main",
"index": 0
}
]
]
},
"Webhook-LinkedIn-post": {
"main": [
[
{
"node": "Create a post",
"type": "main",
"index": 0
}
]
]
},
"Prepare Final Response": {
"main": [
[
{
"node": "Respond to Webhook1",
"type": "main",
"index": 0
}
]
]
},
"Webhook - Receive Form": {
"main": [
[
{
"node": "Parse Form Data",
"type": "main",
"index": 0
}
]
]
},
"ChatGPT - Generate Caption": {
"main": [
[
{
"node": "Prepare Final Response",
"type": "main",
"index": 0
}
]
]
}
}
}