Web Chat

input.webchat Input v0.1.0

Embeds a chat widget on any website with one copy-paste <script> tag and starts the workflow for every visitor message; the workflow's reply is sent straight back to the chat. Multi-turn state rides a per-visitor session id — wire it to an AI Agent for support, ordering, or customer-service bots.

Finding it in the library

Search the builder's node library for Web Chat (it lives under Input). A single click opens the in-editor docs panel shown here — description, ports, and every property, without leaving the canvas. Double-click (or drag) to add it to the workflow.

Library capture pending — regenerate with npm run shots:nodes.

Wired up in the builder

Web Chat in a real, runnable flow — captured live from the Studio editor, exactly as it looks on your canvas. This is the same workflow used for the example input & output below.

Canvas capture pending — regenerate with npm run shots:nodes.

How it’s configured

The node’s Configure panel as it opens in the builder when you select the step — every setting laid out with real values. Click any field to edit it.

Config capture pending — regenerate with npm run shots:nodes. See the full property reference below.

Ports

This is a trigger — it starts runs and takes no input wire.

Ports are the node’s contract with its neighbours. In the editor a port label renders bold when wired and italic when optional; ◈ ports accept attachment carriers rather than data wires.

Direction	Port	Label	What flows through it
Output	`output`	Message

How data flows through it

As a trigger, Web Chat starts runs — it takes no input wire. What it emits is the request wrapper: the event’s body becomes the payload, and the wrapper carries the event metadata around it (for an HTTP-style trigger that’s headers.*, request.method, request.path and query). Downstream nodes consume the content — the wrapper is unwrapped at each node boundary, and expression roots like {{ headers.x }} still resolve against the wrapper when you need the metadata. See Runs & run data for the envelope model.

Expressions in the config

String-typed properties accept {{ }} expressions evaluated against the incoming item at run time — e.g. {{ $json.customer.email }}. On this node that’s path, title, greeting, placeholder, accent, replyField, allowedOrigins. JSON- and code-typed fields never interpolate — they are passed through literally.

Build it with AI

Every node in this reference is reachable through Flowdrome’s AI Copilot and the MCP tools — say what you want, and the graph surgery happens server-side. Node types resolve fuzzily, so the catalog label (Web Chat) works as well as the exact type id (input.webchat).

In the Copilot panel (or any connected AI):

create a workflow that starts with web chat and logs the result

As a step in a create_chain_workflow call:

{"type":"Web Chat","config":{}}

Raw MCP call — add this node to a workflow with add_node

curl -s -X POST http://localhost:48170/mcp -H "content-type: application/json" -d '{ "jsonrpc": "2.0", "id": "1", "method": "tools/call", "params": { "name": "add_node", "arguments": { "workflowId": "<id>", "type": "Web Chat" } } }'

Example input & output

Captured from a real test run of the workflow above — this is what you see in the run data panel after pressing Test workflow.

Input — what the node received

{
  "message": "hi bot",
  "session": "s1"
}

Output — what the node produced

{
  "message": "hi bot",
  "session": "s1"
}

Property reference

Every setting, with its type and default — the same fields shown configured in the panel above.

Property	Type	Default	Description
Path `path`	`string`	`"/chat"`	URL path the widget + chat endpoint are served under. The embed script is {path}/widget.js and messages POST to {path}/message.
Title `title`	`string`	`"Chat with us"`	Heading shown at the top of the chat panel.
Greeting `greeting`	`string`	`"Hi! 👋 How can I help you today?"`	First message the bot shows when the panel opens (blank = none).
Input placeholder `placeholder`	`string`	`"Type your message…"`	Placeholder text in the message box.
Accent colour `accent`	`string`	`"#635bff"`	Hex colour for the launcher, header, and visitor bubbles.
Launcher position `position`	`select`	`"right"`	Which corner the chat button sits in. `leftright`
Reply field `replyField`	`string`	`""`	Which field of the workflow's output holds the reply text. Blank = auto-detect (reply / text / message / content).
Allowed origins `allowedOrigins`	`string`	`"*"`	CORS Access-Control-Allow-Origin for the message endpoint. "*" (default) lets the widget run on any site; set a specific origin to lock it down.
Max body (bytes) `maxBodyBytes`	`int`	`1048576`	Largest request body this trigger accepts — bigger requests are rejected with 413 before the workflow runs. 0 = unlimited at the trigger (the app-wide FLOWDROME_MAX_BODY_BYTES ceiling, default 32 MB, still applies).
Rate limit (req/s) `rateLimitRps`	`double`	`0`	Per-client-IP sustained request rate for this trigger. 0 = no rate limit (the default). For internet-exposed apps, prefer rate limiting at a fronting reverse proxy (docs/ingress-guards-design.md).
Rate limit burst `rateLimitBurst`	`int`	`0`	How many requests a client may send back-to-back before the per-second rate applies. 0 = automatic (2× the rate). Shown when `(showIf === undefined \|\| showIf(c)) && Number(rateLimitRps ?? 0) > 0`

Related nodes

The rest of the Input group — the same folder you’d scan in the editor’s library.

This page is generated from the node registry by gen-node-docs.mjs on every site build — ports, properties, defaults and visibility rules cannot drift from the code. The screenshots and example data are captured from a live Flowdrome by npm run shots:nodes and npm run gen:examples.