N8N Chat UI
beginner

Multi-step button chatbot for n8n, no AI required

A wizard-style chat widget that asks a sequence of questions and tailors each answer to the buttons a visitor picks. No AI model and no AI costs.

ChatbotNo AI
Download workflow (.json)

Prerequisites

  • An n8n instance, cloud or self-hosted
  • A chat widget that sends chatInput and shows followUpPrompts as buttons, such as N8N Chat UI
  • Your decision tree sketched out on paper first

The same button mechanism as the basic menu recipe, with a deeper tree. The bot asks a sequence of questions, and each click decides which question or recommendation comes next. There is still no AI model and no AI cost.

What you'll build

A wizard. A visitor picks a service, then a budget range, and gets a recommendation specific to what they picked. The sample tree starts with three choices (a new website, ongoing support, talk to a person) and branches from there.

Each click is still a single, independent lookup against the whole tree. Nothing is remembered between clicks. The wizard feels path-aware because the tree is deeper: in the sample, Under 2000 and Over 10000 get different recommendations because those two button labels point at different nodes directly, not because the workflow remembers you chose a new website first.

How it works

  • A webhook receives each message from the widget and checks a shared secret.
  • A Code node matches the clicked label against every button in a multi-level menu_tree.
  • The reply returns the matching message and its next buttons as followUpPrompts, with a route to a person available at any step.

What it does not do

It cannot collect free text. A form step such as typing an email needs the workflow to know it is waiting for an email on the next message, which needs session state a stateless button bot does not have. If you need to collect free text, use the AI FAQ chatbot, whose memory keeps track of the conversation.

What it costs

The workflow is free to download and use, and there is no AI model, so there is no per-conversation AI bill. Your n8n hosting applies as normal. For N8N Chat UI plans, see pricing.

Set it up

  1. Import the workflow. Download the file with the button at the top of this page and import it with Workflows → Import from File.
  2. Write your tree. Open Chatbot settings and edit menu_tree. The structure is the same as the basic recipe (a message and a list of options with a label and a next), with more nodes. A node such as website_budget_low is only reached through the service_website path, which is what makes the flow conditional.
  3. Choose a secret. Put a random string in webhook_secret. It is a deterrent, not strong security: anything sent from a browser can be read.

Warning: Every button label must be unique across the whole tree. Matching checks every button in every node, so two buttons sharing a label anywhere means whichever comes last in the JSON silently wins. This is easy to trip over in a deep tree, where short labels like Yes or Tell me more are tempting to reuse. Give different destinations different wording.

Test it

Send a test click before you connect a widget. n8n's built-in chat panel needs a Chat Trigger, so it will not open for this workflow. Instead, click Test workflow, then send a POST request to the Test URL shown on the Chat webhook node:

curl -X POST 'YOUR_TEST_URL' \
  -H 'Content-Type: application/json' \
  -d '{"chatInput":"Pricing","sessionId":"test-1","metadata":{"webhook_secret":"YOUR_SECRET"}}'

The response contains output and followUpPrompts. The test URL listens for one request each time you click Test workflow; activate the workflow to use the production URL for repeated testing.

Walk every path in your tree at least once by sending each label in turn. A deep tree makes it easy to leave a dead-end node, where an option points at a node name that does not exist, unnoticed. Every path should end at a real recommendation or the handoff node.

Add it to your site

Activate the workflow and use its production webhook URL as your widget's chat endpoint. Send the same secret in the widget metadata, for example metadata: { webhook_secret: 'YOUR_SECRET' }. The metadata docs explain how metadata reaches n8n.

The widget needs to show the followUpPrompts array as buttons and send the clicked label back as the next message. N8N Chat UI does this out of the box.

Troubleshooting

A path ends back at the start menu unexpectedly

A next value that does not match a real node name falls back to the start menu silently. Walk every path after any edit.

A button jumps to the wrong place

Check whether that exact label is reused anywhere else in the tree. See the warning above.

How deep can the tree go?

There is no hard limit, but past four or five levels most people find a short AI-driven conversation easier to maintain than a large JSON tree. At that point, consider the AI FAQ chatbot.

I get a 401 as soon as I test

The Request from your widget? check compares metadata.webhook_secret in the request with webhook_secret in Chatbot settings. If they differ, the workflow returns a 401.

Take it further

Start from the basic button menu if you want something smaller, or move to the AI FAQ chatbot when visitors start typing real questions.