n8n Webhooks for Beginners: Payload, Test vs Production URL, and the Response

Originally published at learn.ynteractive.com

A webhook is about as simple as app-to-app connections get. One app knows a URL, and it sends data there when something happens. In n8n, it's also the trigger behind a form-to-workflow build. This post walks the full request cycle, from the form's POST to the response that makes the form say "Thanks!"

The examples come from the free Lovable + n8n lesson, which connects a contact form built in Lovable to an AI agent in n8n. No code is written by hand. Lovable writes the form from a prompt, and n8n creates the webhook for you.

The request cycle

Lovable form
  --POST, JSON body {name, email, question, feedback}-->
n8n: On webhook call
  -> AI Agent (saves a row, sends an email)
  -> Respond to Webhook
  --response--> form shows "Thanks! Your message has been received."

Push, not poll

There are two common ways for one app to learn about something in another. It can check on a schedule. The Gmail trigger in the AI Email Responder lesson does that, checking the inbox Every Minute for new mail. Or it can be told. A webhook doesn't check anything. It sits at a URL and waits, and the other app calls it the moment the data exists. The lesson's one-line version: "A webhook is just a URL that waits for incoming data."

The payload

The form sends a POST request with the answers as JSON. The Lovable prompt in the lesson spells out the contract: "send the data as a POST request to the n8n webhook URL. The data should be sent as JSON with keys: name, email, question, feedback."

One submission looks roughly like this:

{
  "name": "Sarah",
  "email": "[e-mail]",
  "question": "Do you offer lead generation services?",
  "feedback": ""
}

POST means "here is some data for you," as opposed to asking for a page. The keys are the part to get right. n8n finds each value by its key, so the form and the workflow must use the same names.

Creating the webhook in n8n

In n8n, a webhook is a trigger:

1. Click Create workflow, then Add first step….
2. Click On webhook call.
3. Open the Respond dropdown and pick Using 'Respond to Webhook' Node (explained below).
4. Add the next step, such as an AI Agent, with the + on the right edge of the webhook node.

Reading fields: it's under body

Each field arrives inside the request body. That's why the AI Agent's prompt template in the lesson reads:

Name: {{ $json.body.name }}
Email: {{ $json.body.email }}

The path is body, then the key. If a key in the form changes, the expression that reads it has to change too.

The same shape works for internal forms. In the maintenance and IT request form lesson, Ridgeline Supply Co., a made-up warehouse company, sends the keys name, email, request and location. The test request says dock door 3 won't open, with trucks waiting. The agent marks it Urgent for the Facilities team, saves it to a Requests sheet and emails a confirmation.

Test URL vs Production URL

Every n8n webhook has two addresses:

• Test URL: only works while you're testing in the editor.
• Production URL: used by the published workflow. It only works after you click Publish.

A real form should always point at the Production URL. To copy it, click Publish, double-click the webhook node, open the Production URL tab and click the URL. It has the shape https://your-instance.app.n8n.cloud/webhook/ followed by a long ID.

If the form works during testing and then goes quiet, check two things. Is the form still pointing at the Test URL? Is the workflow published?

The response

A webhook can answer the app that called it. By default, the n8n webhook answers immediately, before the AI agent has even run.

Setting Respond to Using 'Respond to Webhook' Node tells n8n to wait. A Respond to Webhook node at the end of the workflow sends the answer once the agent has saved the row and sent the email. There's nothing to configure inside it. In the lesson's words, it sends a success response back to the form "so the user sees a confirmation message instead of an error."

The Lovable form has three states tied to that answer:

State	What the user sees
Waiting	The button changes to "Sending..."
Success	"Thanks! Your message has been received."
Failure	"Something went wrong. Please try again."

Don't hard-code the URL

The lesson's Lovable prompt says "Do not hard-code any webhook URL" and points the form at a secret named N8N_WEBHOOK_URL. To add it, click More in the Lovable toolbar, paste N8N_WEBHOOK_URL as the name, paste the Production URL as the value and click Save.

If the URL changes, you update one value and leave the form alone. And a webhook URL accepts data from anyone who has it, so treat it like a private address and don't post it publicly.

Webhook vs API

An API is a set of addresses you call to ask an app for something. A webhook is the other way around: you give an app your address, and it calls you when something happens.

Cost

The lessons are free practice copies, so nothing is published, sent or billed. A real build needs n8n (n8n Cloud is paid after a free trial, or you self-host) and Lovable (free and paid plans). If the workflow uses an AI agent, the OpenAI API is pay-as-you-go and billed separately from ChatGPT plans. The lessons suggest about $10 of credit to start.

Wire up the full cycle yourself in the free Lovable + n8n lesson.

---

Robert Breen is building Stepthrough, free hands-on AI lessons for people who work at a desk. Practice the tools step by step at learn.ynteractive.com.