Flow.Documentation
ProfessionalWorkflows

Show widget: data as a card

4 steps± 3 minVideoVerified 22 Oct 2026
  1. Step 1 · Open Flow and create a workflow
  2. Step 2 · Choose the widget and fill it
  3. Step 3 · Put the steps in one line and save
  4. Step 4 · Run and look at the card

A chat widget is a card, table or chart that appears in the chat. With Show widget a workflow fills such a widget with its own data. When an AI Colleague calls the workflow, the user sees the card in the chat instead of a wall of text. In the Studio you see the result straight away under the output.

Watch the whole guide as a video4 steps in one film
Step 1 / 4

Open Flow and create a workflow

In the portal, under Environments, click Development and there Open; Flow opens in a new tab. There, click ＋ next to General, choose New workflow and give it a name. A new workflow starts with an Event trigger: the point where it begins.

  1. Click Development
Open Flow and create a workflow · Click Development
  1. Click Open ↗
Open Flow and create a workflow · Click Open ↗
  1. Click Add to General
Open Flow and create a workflow · Click Add to General
  1. Click New workflow
Open Flow and create a workflow · Click New workflow
  1. In Workflow name, type Guide · order card
Open Flow and create a workflow · In Workflow name, type Guide · order card
Step 2 / 4

Choose the widget and fill it

Add Show widget and choose the widget. Under Data (Code) you give every field of the widget a value, with {{field}} from the workflow. This widget has a title, a status and an amount.

  1. Click Add node
Choose the widget and fill it · Click Add node
  1. Click Show widget
Choose the widget and fill it · Click Show widget
  1. In Name, type Show the order
  2. In Widget, choose Guide · order card · draft
Choose the widget and fill it · In Name, type Show the order; In Widget, choose Guide · order card · draft
  1. Click Code
Choose the widget and fill it · Click Code
  1. In the data, type `{
Choose the widget and fill it · In the data, type `{; ; ; ;
  1. Click the dot of ‘Event trigger’
Choose the widget and fill it · Click the dot of ‘Event trigger’
  1. Click the dot of ‘Show the order’
Choose the widget and fill it · Click the dot of ‘Show the order’
Step 3 / 4

Put the steps in one line and save

Select the steps (click the first, and the others while holding Shift) and click Align horizontally: they then stand in one line and you read the workflow from left to right; a branch (such as No of an If / Else) gets its own row below. Fit to view puts everything in sight; then Save.

  1. Click ‘Event trigger’
Put the steps in one line and save · Click ‘Event trigger’
  1. Click ‘Show the order’ while holding Shift
Put the steps in one line and save · Click ‘Show the order’ while holding Shift
  1. Click Align horizontally
Put the steps in one line and save · Click Align horizontally
  1. Click Fit to view
Put the steps in one line and save · Click Fit to view
  1. Click Save
Put the steps in one line and save · Click Save
Step 4 / 4

Run and look at the card

At the bottom you see the widget was filled, and below it the card itself, as it appears in the chat. As long as the widget is not published, the step uses the draft; publish it before the workflow goes live.

  1. Click Run
Run and look at the card · Click Run
Run and look at the card · Status: Completed.
Run and look at the card · The widget was filled (draft).
Run and look at the card · The card, with the order number as its title.

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