Most workflows are useless if there is no front door. The Slack message goes nowhere if no one ever fires the webhook. The lead-enrichment graph just waits for an HTTP POST that never arrives. People who build automations get good at the wiring and bad at the surface.
UI Embeds in FlowEngine give every workflow a front door. A button, a form, or a chatbot. You describe what you want in plain English, the AI Assistant builds it, and one click links the result to the workflow that should fire when it gets used. This guide walks the full path: empty state to a live, embeddable component connected to an n8n workflow.
Skill level: beginner. Time required: about 10 minutes. You'll need: a FlowEngine account with at least one n8n instance and a workflow that starts with a Webhook or Chat Trigger node.
What You'll Build
By the end you'll have a chatbot or contact form sitting in the portal, linked to an n8n workflow. Every message the user sends in the chatbot becomes an execution of that workflow. The same component can be dropped on any external site as a script tag or iframe.
Where UI Embeds Live
UI Embeds are a portal-level feature, not a per-instance one. You design them once and assign them to any client or instance you own. Open the portal sidebar and click Embeds under the n8n section.
Two ways in. The + New button in the secondary panel opens the editor with a blank canvas. The + Create Component button in the center is the same thing with more visual weight when you have no components yet.
Step 1: Pick a Type
The editor opens with three tabs at the top: Form, Button, Chatbot. Each one is a different surface for the same idea: capture some input, send it to your workflow.
- Button. One click, fires the workflow. Useful for "approve invoice", "trigger daily report", "send me the weekly summary now".
- Form. Collects structured data. Useful for contact forms, lead intake, support tickets.
- Chatbot. A conversation surface. Useful when the input is open-ended and the workflow downstream uses an LLM to decide what to do.
You can switch types later. The AI Assistant adapts to whichever tab is active.
Step 2: Describe What You Want
Once the editor is open the right panel is the AI Assistant. This is where the heavy lifting happens. You type what you want, the assistant edits the component in place, and the preview in the middle updates as the changes apply.
Some prompts that actually work:
- "Create a contact form with name, email, and message fields"
- "Make the button background blue with rounded corners"
- "Change the chatbot welcome message to ask what kind of property the lead is looking for"
- "Add a phone number field below email and mark it required"
- "Use a dark theme with a purple accent"
The assistant returns short, edits the component, and a small Applied badge appears when the change lands. If the output looks off, iterate in chat: "smaller", "less padding", "use red instead". You are not locked into the first answer.
Anything the AI does is also fully editable by hand. The left rail breaks the component into Component Info, Content, Colors, Design, Effects, Animations, Advanced, Share. AI for the broad strokes, the rail for the last 10 percent.
Step 3: Save and Publish
The editor saves drafts continuously. To make a component live you click Publish in the top right. Published components count against your plan limits. Free accounts get one active component, Pro accounts get five, Pro+ is unlimited. Drafts never count.
A published component without a workflow does nothing useful. Hitting submit on the form just collects data into the void. So the next step is the part most builders care about: connecting the component to an actual workflow.
Step 4: Assign the Component to a Workflow (One Click)
This is the move that ties the front door to the engine. Open the instance that hosts the workflow you want to fire. From the portal sidebar pick Hosting, then click into the instance. You land on the instance overview with the workflow list.
Every workflow that has a Webhook or Chat Trigger node shows a small purple + Add Component button on its row. Workflows without a webhook trigger do not show the button at all, which is the easiest way to spot whether your workflow is wired correctly upstream. If the button is missing, open the workflow in n8n and add a Webhook or Chat Trigger node, save, and refresh.
Click + Add Component. A modal opens titled Assign Component with the workflow's name as the subtitle. Three tabs sort the choices:
- This Instance. Components already assigned to this instance.
- Linked. Components already linked to some workflow on this instance.
- All. Every component you own across the agency.
Click the component you just built. That single click writes the workflow id, the webhook URL, and the HTTP method onto the component. The modal closes. Back on the UI Embeds tab the component now shows a green Active badge and "Linked: [workflow name]" under its title.
That is the one-click part. No JSON to edit, no webhook URL to copy and paste, no "now configure the trigger URL on the form" step. The assignment is the configuration.
Step 5: Test It
Click the component card to open its preview. Submit the form or send a message to the chatbot. The workflow fires immediately. In n8n, the execution list shows the new run with the data you just entered. If something fails, the error surfaces in n8n's execution view, not in the embed.
If your workflow is inactive, executions still happen but show up as "manual test" runs in n8n. Toggle the workflow active in n8n and every future submission becomes a live execution.
Step 6: Drop It on Your Site
A linked component is also embeddable. From the UI Embeds page click the 3-dot menu on the card. The menu has four share modes:
- Direct Link. A standalone hosted page. Good for sharing in email or a Slack message.
- iFrame Embed. A pre-built iframe tag you can paste into any CMS, including Webflow, WordPress, Notion.
- JavaScript. A script tag that renders the component inline on your page. Use this when you want the embed to inherit your site's chrome.
- HTML Link. A plain anchor tag for newsletters and footer links.
The component on your site fires the same n8n workflow as the in-portal preview. There is no second configuration step.
Common Mistakes
- The + Add Component button is missing. The workflow does not have a Webhook or Chat Trigger node. Add one in n8n and refresh.
- The Assign Component modal shows no embeds. You have not created any UI Embeds yet, or the ones you have are all draft. Publish at least one component first.
- Submissions land but the workflow does not run. The workflow is inactive in n8n. Toggle it active.
- The AI Assistant edits the wrong thing. The active editor tab matters. The assistant edits whichever type tab (Form, Button, Chatbot) is currently selected.
- Embed code shows a port like :2368 in image URLs. Strip the port. The public site handles this automatically; only matters if you pasted preview URLs.
Where This Fits
UI Embeds are useful any time the workflow needs an input that does not come from another system. Customer-facing forms. Internal one-click triggers. Chatbots that fan out into longer n8n graphs. The pattern is always the same: a published component, an assigned workflow, an Active badge.
For agencies, the same component can be assigned to multiple client instances. Build a "lead intake" form once, drop it on three different client portals, each one fires that client's own n8n workflow. The component is the template; the assignment is what makes it specific.
If your workflow is the kind where you need the same input to always produce the same output (invoice processing, compliance checks, regulated pipelines), pair the embed with OpenClaw on FlowEngine instead of a flexible n8n graph. OpenClaw's deterministic agents are the right tool when "the AI did something different this time" is not acceptable.
Going Further
The same flow works the other direction too. If you assign a Chat Trigger workflow, the chatbot embed automatically routes messages into the workflow's chat input. Multi-turn conversations work without extra configuration because the chat session id is passed through.
If you'd rather not build the n8n side either, FlowEngine's AI Builder at AI Builder in the sidebar generates full n8n workflows from a sentence. Describe the automation, get the graph, then wrap it in a UI Embed using the steps above. Both halves of the front door are AI-built. For ideas on what to put inside the workflow, the guide to popular n8n integrations covers the most common nodes people start with.
Wrapping Up
UI Embeds turn a workflow from an internal automation into something a customer can actually use. The AI Assistant means you don't have to design the surface by hand. The Assign Component modal means you don't have to wire the webhook by hand either. What's left is the part you actually wanted to do: ship the automation.
Try FlowEngine free if you want to spin up your first UI Embed. Free tier includes one active component, no credit card required.