Help Trying to use Voiceflow as a UI Tool
I'm trying to use a voiceflow workflow solely as a ui tooll to connect to n8n whats the simplest way to do this i simply want the voiceflow to take a user message, send it to n8n and display the n8n response
3 Replies
Here’s a quick, no-code pattern that lets your Voiceflow chat act as the “front-end” and n8n as the back-end workflow.
1️⃣ Expose a webhook in n8n
• Create an HTTP Request node → set it to POST → copy the test URL that n8n gives you (e.g. https://n8n.cloud/webhook/…).
• Build the rest of your n8n flow so it ends with a Respond to Webhook node (or a plain JSON reply) that returns something like
2️⃣ Build three blocks in Voiceflow
1. Capture / “User says” → store the user’s message in a variable, e.g. {user_msg}.
2. API Step (see “API step” docs)
• Method: POST
• Endpoint: paste the n8n webhook URL
• Raw body:
• Headers: Content-Type = application/json
• Click Send & Test → map response.reply to a Voiceflow variable, e.g. {n8n_reply}
3. Text / Speak Step → set the message to
{n8n_reply} so the chat shows what n8n returned.
(optional) Toggle the “Failure path” on the API step so you can handle time-outs or errors gracefully.
That’s it—when the user types, Voiceflow passes the text to n8n, waits for the JSON response, captures the reply value, and displays it back to the user.
If you need extra logic (signing requests, formatting complex payloads, etc.) drop a Function step in place of the API step and use fetch() as described in the Function docs.
Docs you’ll use:
• API Step: https://docs.voiceflow.com/reference/api-step
• Function Step (if needed): https://docs.voiceflow.com/v2.0/docs/function-step
Happy building!how do i do this part which block?Text / Speak Step → set the message to {n8n_reply} so the chat shows what n8n returned.
use a Message step an add
{n8n_reply} to display the response.