# Visual Bot Flow Builder | onmsg Website Chat

> Design website chat flows with a drag-and-drop builder. 11 step types: AI agent, questions, choices, forms, media, and branching by page, availability or answer.

URL: https://onmsg.app/features/visual-bot-flow-builder/

Most configurable

# Build your website conversation visually, no code

Last updated: September 8, 2026

A drag-and-drop builder for website conversations, with 11 step types for greeting, capturing enquiries, branching, and handing off.

-   Drag-and-drop canvas with 11 step types
-   Branch by saved answer, by availability (online/offline), or by page URL
-   Collect details with One field and multi-field Form steps, with validation

Start free

[https://chat.onmsg.app →](https://chat.onmsg.app)

 

See what's in each plan

[/pricing/ →](/pricing/)

No credit card required

![A drag-and-drop conversation flow canvas with connected step blocks branching into three paths](/images/misc/modern-3d-illustration-of-a-drag-and-drop-conversa.webp)

-   Grounding controls, not guesswork
-   11 flow step types, no code
-   Shared inbox with handoff
-   Start on the free plan

## What the visual bot flow builder does

Most website chat starts life as a single greeting and never grows past it. The visual bot flow builder is the part of onmsg that turns that greeting into an actual conversation: a canvas where you drag step blocks, connect them, and decide what happens at every fork. You are not writing rules in a config file or briefing a developer. You are drawing the path a visitor walks.

The canvas holds eleven step types. Some of them speak, Message shows information and continues, Image or video displays media from an upload or a link, Pause inserts a short typing delay so a reply does not land like a wall. Some of them listen, Question collects a free-text answer into a variable, One field collects a single value such as an email address, phone number or quantity, and Form collects several fields together. One of them thinks: the AI Agent step runs a multi-turn AI conversation with its own grounding and handoff configuration. And three of them decide: By answer branches on a saved variable, By availability chooses between online and offline paths, and By page branches on the visitor’s URL.

![Eleven labelled flow step type blocks arranged in a clean grid](/images/misc/modern-3d-illustration-of-eleven-labelled-flow-ste.webp)

That combination is what separates a flow from a script. A script runs the same way for everyone. A flow notices that this visitor is on the pricing page, that it is 9pm, and that they already told you they are an existing customer, then behaves accordingly.

### Common problems this solves

**“Every visitor gets the same generic greeting.”** A single opening message has to serve someone comparing prices and someone chasing an existing order. By page branching lets each of them start somewhere sensible, and Choices lets them self-select within a couple of taps.

**“Enquiries arrive with half the information.”** A bare contact form gets you a name and a sentence. A Form step with required fields, input types and configurable validation gets you the address, the budget range or the model number too, before anyone on your team spends time asking.

**“After-hours messages disappear.”** Set business hours and after-hours behaviour on the widget, then branch with By availability so the offline path collects details as an offline message rather than promising an instant reply nobody is there to give.

**“Changing the bot means booking developer time.”** The person who notices a confusing question is usually the person answering it. On a visual canvas they can rewrite the step and republish the flow themselves.

## How a flow gets built

A first flow usually takes four moves. Start with a Message step that greets the visitor in your own voice. Add a Choices step listing the two to four things people actually come to you for, which branches the conversation immediately. On each branch, add either a Form step to collect what your team needs, or an AI Agent step pointed at your knowledge base to answer questions from your own content. Finish with an escalation so the conversation reaches a person, with everything collected so far attached.

From there you refine. Add a By page branch when you notice pricing-page visitors asking different questions. Add a By answer branch when one enquiry type needs a follow-up question. Add a Pause before a long message so it reads like a reply rather than a broadcast. Each change is a step on the canvas, not a release.

## Where the flow builder connects

The flow builder is one part of a larger loop. The AI Agent step draws on the 

Grounded AI Agent & Knowledge Base

[/features/grounded-ai-agent/ →](/features/grounded-ai-agent/)

, which decides how tightly answers stick to the knowledge you supplied. The escalation path drops the conversation into the 

Shared Team Inbox

[/features/shared-team-inbox/ →](/features/shared-team-inbox/)

, where a teammate picks it up with the history intact. And the whole conversation is presented inside the 

Website Chat & Widget Customization

[/features/website-chat-widget/ →](/features/website-chat-widget/)

 layer, which controls how it looks and when it appears.

If you want the concepts before the mechanics, start with 

what a no-code chatbot flow builder is

[/guide/what-is-a-no-code-chatbot-flow-builder/ →](/guide/what-is-a-no-code-chatbot-flow-builder/)

, then walk through 

building a greeting-to-handoff flow step by step

[/guide/how-to-build-a-greeting-to-handoff-flow/ →](/guide/how-to-build-a-greeting-to-handoff-flow/)

.

Product tour

## Flow Builder in the product

Clearly labelled example views of the screens involved.

![Flow canvas showing a greeting step connected to a choices step with four enquiry buttons](/images/misc/modern-3d-illustration-of-a-flow-canvas-showing-a-.webp)

A greeting branching into enquiry types with a Choices step.

![A Form step configuration panel with required fields, input types and validation rules](/images/misc/modern-3d-illustration-of-a-form-step-configuratio.webp)

Form steps collect several fields together, with validation.

![A branching node splitting a conversation by page URL, by availability and by saved answer](/images/misc/modern-3d-illustration-of-a-branching-node-splitti.webp)

Three ways to branch: By page, By availability, By answer.

![An AI Agent step inside a flow escalating a conversation into a shared team inbox](/images/misc/modern-3d-illustration-of-an-ai-agent-step-inside-.webp)

An AI Agent step mid-flow, with escalation to a person.

Why onmsg

## Why teams use onmsg for flow builder

A drag-and-drop builder for website conversations, with 11 step types for greeting, capturing enquiries, branching, and handing off.

### You can see the whole conversation

Every step and branch sits on one canvas, so you can trace exactly what a visitor will be shown before you publish. Nothing hides in a rules engine you can't read.

### Eleven step types, no code

AI Agent, Question, Choices, One field, Form, Message, Image or video, Pause, By answer, By availability and By page. Enough range to shape a real enquiry, few enough to hold in your head.

### Different pages, different conversations

A visitor on your pricing page rarely wants the same opening as someone on the homepage. The By page step branches on the visitor's URL so each one gets a relevant start.

### Validation before the handoff

Form steps support required fields, input types and configurable validation, so the details reaching your team are complete rather than half-filled.

### An AI step you can drop anywhere

Add an AI Agent step at any point in the flow and configure its instructions, greeting, escalation message, maximum turns and knowledge base selection.

### Edited by whoever notices the problem

The person who spots a confusing question is usually not a developer. A visual canvas means they can fix the wording and republish without filing a ticket.

## Visual flow building compared to the usual options

| Capability | Typical website chat tool | onmsg |
| --- | --- | --- |
| Who can edit the conversation | Developer or agency, via config or code | Anyone on the team, on a drag-and-drop canvas |
| Step types available | Message and button steps | 11 step types including AI Agent, Form and three branch types |
| Page-aware conversations | One flow for the whole site | By page branching on the visitor's URL |
| Availability-aware routing | Static offline message | By availability step with separate online and offline paths |
| Enquiry capture | Single email field | One field and multi-field Form steps with configurable validation |
| AI inside the flow | Separate bot, separate tool | AI Agent step with grounding and handoff settings in the same flow |

Questions

## Flow Builder FAQs

### Do I need to know how to code to build a flow?

No. You drag step blocks onto a canvas and connect them. Each step has a settings panel where you write the message, choose the field type or pick the branch condition. There is no scripting language to learn.

### What are the 11 step types?

AI Agent, Question, Choices, One field, Form, Message, Image or video, Pause, By answer, By availability and By page. Between them they cover greeting a visitor, collecting free text or structured details, showing media, pausing for realism, branching, and handing off.

### How long does it take to build a first flow?

A simple greeting-to-handoff flow is a few minutes of work: a greeting Message, a Choices step for enquiry type, a Form step for details, and an escalation. You can start there and add branches once you see what visitors actually ask.

### Can a flow show something different on my pricing page?

Yes. The By page step branches on the visitor's page URL, so a pricing-page visitor can be met with plan questions while a homepage visitor gets a broader greeting.

### What happens if my team is offline?

The By availability step routes visitors down an offline path. Combined with the widget's business hours and after-hours behaviour, you can capture the enquiry as an offline message and keep it in retained history for the morning.

### Can a form require certain fields?

Yes. Form steps support required fields, input types and configurable validation, so you can insist on an email address or a phone number before the flow continues.

### Can I combine a flow with the AI agent?

That is the intended use. Add an AI Agent step wherever open questions belong, and configure its instructions, greeting, escalation message, maximum turns and knowledge base. Structured steps handle the parts you want controlled; the AI handles the rest.

### Does onmsg handle bookings or payments through a flow?

No. The step types collect and route enquiries. onmsg is not a booking engine, a checkout, or a general-purpose integration automation builder, and we would rather say so than let you find out later.

## Related features

### Grounded AI Agent & Knowledge Base

An AI agent that answers from your own knowledge base, with grounding modes, configurable refusals, and handoff to a person.

Read more

[Grounded AI Agent & Knowledge Base →](/features/grounded-ai-agent/)

### Shared Team Inbox

A shared inbox where your team views conversation history, replies, assigns, resolves, searches, and keeps a draft per conversation.

Read more

[Shared Team Inbox →](/features/shared-team-inbox/)

### Website Chat & Widget Customization

An embeddable chat widget you install with a script snippet, then customize to match your site: colours, fonts, placement, hours, and custom CSS.

Read more

[Website Chat & Widget Customization →](/features/website-chat-widget/)

![](/images/hero/modern-3d-illustration-of-a-finished-greeting-to-h.webp)

No credit card required

## Ready to set up flow builder?

A drag-and-drop builder for website conversations, with 11 step types for greeting, capturing enquiries, branching, and handing off. Start on the free plan and configure it on your own site.

Start free

[https://chat.onmsg.app →](https://chat.onmsg.app)

 

Compare plans

[/pricing/ →](/pricing/)

-   Free plan available
-   Installs with a script snippet
-   Your content, your controls