Flow.Documentation
Professional

A chat widget from a template

7 steps± 5 minVideoVerified 22 Oct 2026
  1. Step 1 · Open your development environment
  2. Step 2 · Pick an example
  3. Step 3 · Name the widget
  4. Step 4 · Save, test and publish
  5. Step 5 · Create a workflow that fills the widget
  6. Step 6 · Add the Show widget step
  7. Step 7 · Run and look at the widget

A chat widget shows data in the chat as a card, table, key figures or chart, instead of long text. You start from an example that works straight away, test and publish it, and then fill it from a workflow. An AI Colleague that may use the widget shows it in the chat itself.

Watch the whole guide as a video7 steps in one film
Step 1 / 7

Open your development environment

In the portal, under Environments, click Development, and there Open. Flow opens in a new tab and you are signed in straight away.

  1. Click Development
Open your development environment · Click Development
  1. Click Open ↗
Open your development environment · Click Open ↗
Step 2 / 7

Pick an example

Click ＋ next to General and choose New chat widget. Every example is drawn with its own sample data: what you see is what the chat shows. Choose the Status overview: a title, progress and a table.

  1. Click Add to General
Pick an example · Click Add to General
  1. Click New chat widget
Pick an example · Click New chat widget
  1. Click Status overview
Pick an example · Click Status overview
Step 3 / 7

Name the widget

In the middle you see the widget as it appears in the chat. On the left are the blocks, on the right you adjust a block, and under Data you see which fields the widget needs. Give it a name that says what it shows.

  1. In Widget name, type Project status
Name the widget · In Widget name, type Project status
Name the widget · The widget with the sample data, as in the chat.
Step 4 / 7

Save, test and publish

Test checks whether the sample data fits the fields the widget asks for. Only then can you publish; workflows and AI Colleagues use the published version.

  1. Click Save
Save, test and publish · Click Save
  1. Click Test
Save, test and publish · Click Test
Save, test and publish · Works with the sample data.
  1. Click Publish
Save, test and publish · Click Publish
Save, test and publish · Version 1 is ready.
Step 5 / 7

Create a workflow that fills the widget

Create a new workflow. Put a project with its tasks in the trigger's sample data: that is how the request will come in later too, through an API or another workflow.

  1. Click Add to General
Create a workflow that fills the widget · Click Add to General
  1. Click New workflow
Create a workflow that fills the widget · Click New workflow
  1. In Workflow name, type Show project status
Create a workflow that fills the widget · In Workflow name, type Show project status
  1. Click the trigger
Create a workflow that fills the widget · Click the trigger
  1. Click Code
Create a workflow that fills the widget · Click Code
  1. In Sample data, type `{
Create a workflow that fills the widget · In Sample data, type `{; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;
Step 6 / 7

Add the Show widget step

Choose your widget and say per field where the value comes from. {{project}} takes the value from the trigger; a value starting with = calculates: = len(taken) counts the tasks.

  1. Click Add node
Add the Show widget step · Click Add node
  1. Click Show widget
Add the Show widget step · Click Show widget
  1. In Widget, choose Project status · v1
Add the Show widget step · In Widget, choose Project status · v1
  1. Click Code
Add the Show widget step · Click Code
  1. In Data for the widget, type `{
Add the Show widget step · In Data for the widget, type `{; ; ; ; ;
  1. Click the dot of ‘Event trigger’
Add the Show widget step · Click the dot of ‘Event trigger’
  1. Click the dot of ‘Show widget’
Add the Show widget step · Click the dot of ‘Show widget’
Step 7 / 7

Run and look at the widget

At the bottom under Output is the filled widget, exactly as the chat shows it. Give the widget to an AI Colleague (Agent → Brain → Chat widgets), or let an agent use this workflow as a tool: then it appears in the chat.

  1. Click Save
Run and look at the widget · Click Save
  1. Click Run
Run and look at the widget · Click Run
Run and look at the widget · The widget is filled.
Run and look at the widget · The status overview with the project's three tasks.

This guide was carried out step by step on 22 Oct 2026 by an automated test on Flow (version 3e563176).