Turning n8n Workflows into Lovable Apps

Overview

In this tutorial you will learn how to:

1. Expose an existing n8n workflow with a webhook trigger.
2. Create a Lovable front‑end that sends data to that webhook.
3. Receive the data in n8n, process it (filter, email, store), and optionally return a response.
4. Deploy the solution so a non‑technical user can interact with it.

Prerequisites

• An active n8n account (cloud or self‑hosted).
• An active Lovable.dev account.
• Basic knowledge of n8n nodes (Webhook, Google Sheets, Email, Switch, etc.).
• A Google Sheet or other storage set up if you want to persist leads.

Step‑by‑Step Instructions

1. Prepare the n8n Workflow

1. Create a new workflow in n8n and name it Lead‑Management.
2. Add a Webhook node as the trigger.
   • Method: POST
   • Path: agent-device-inquiry (or any unique path).
   • Copy the Production URL; you’ll need it in Lovable.
3. Add a Google Sheets node (or your preferred storage) to append the incoming data.
   • Map the fields: fullName, email, budget, requirements.
4. Add a Filter node to exclude low‑budget leads.
   • Condition: {{ $json.budget }} < 1000 → False (skip).
5. Add a Switch node to determine the email content based on budget ranges.
   • Cases:
     • 1000‑3000: send “We’ll call you later this week.”
     • 3000‑5000: send “We’re interested – here’s our calendar link.”
6. Add an Email node (e.g., Gmail, SendGrid) for each case.
   • Use the data from the webhook to populate the recipient, subject, and body.
7. Activate the workflow.

2. Build the Lovable Front‑End

1. Log in to Lovable.dev and create a new app (e.g., Agency Inquiry Form).
2. In the UI builder, add a Form component with fields:
   • Full Name (text)
   • Email (email)
   • Budget (dropdown with options 100‑1000, 1000‑3000, 3000‑5000)
   • Requirements (textarea)
3. Under the Form settings, set the Submit action to Webhook.
   • Paste the n8n webhook URL copied earlier.
   • Method: POST.
   • Map the form fields to the JSON body (e.g., fullName: $fullName).
4. Add a Success message (e.g., “Your inquiry has been submitted.”).
5. Save and publish the Lovable app.

3. Test the Integration

1. Open the published Lovable app in a browser.
2. Fill out the form with test data.
3. Submit and verify:
   • The n8n workflow runs (check the execution log).
   • Data appears in the Google Sheet.
   • The correct email is sent.
   • The success message displays.

4. Deploy to Production

1. In n8n, switch the webhook URL from Test to Production.
2. Update the Lovable form webhook URL to the production URL.
3. Re‑publish the Lovable app.
4. Test again to ensure everything works.

Tips & Gotchas

• Webhook Method: Always use POST when sending form data; GET will not carry the payload.
• Field Mapping: In Lovable, ensure the JSON keys match what the n8n workflow expects ($json.budget).
• Budget Filtering: The filter node must return a boolean; otherwise the Switch node will not work.
• Email Limits: If using Gmail, watch for daily send limits; consider a dedicated email service for production.
• Testing: Use n8n’s Test Workflow button while the webhook is in test mode to quickly iterate.
• Security: For production, add authentication to the webhook (e.g., a secret header) and validate it in n8n.
• Error Handling: Add a Set node after the webhook to log any missing fields before proceeding.

Resources

• n8n documentation on Webhook nodes: n8n.io
• Lovable dev guide: lovable.dev
• Harshit Tyagi’s full video: YouTube