Flow.Documentatie
Professional

Een chat-widget uit een voorbeeld

7 stappen± 5 minVideoGecontroleerd 22 okt 2026
  1. Stap 1 · Open uw ontwikkelomgeving
  2. Stap 2 · Kies een voorbeeld
  3. Stap 3 · Geef de widget een naam
  4. Stap 4 · Sla op, test en publiceer
  5. Stap 5 · Maak een workflow die de widget vult
  6. Stap 6 · Voeg de stap Toon widget toe
  7. Stap 7 · Voer uit en bekijk de widget

Een chat-widget laat gegevens in de chat zien als kaart, tabel, kerncijfers of grafiek, in plaats van als lange tekst. U begint met een voorbeeld dat meteen werkt, test en publiceert het, en vult het daarna vanuit een workflow. Een AI Collega die de widget mag gebruiken, toont hem zelf in de chat.

Bekijk de hele handleiding als video7 stappen in één film
Stap 1 / 7

Open uw ontwikkelomgeving

Klik in de portal bij Omgevingen op Ontwikkeling, en daar op Openen. Flow opent in een nieuw tabblad, en u bent meteen ingelogd.

  1. Klik op Ontwikkeling
Open uw ontwikkelomgeving · Klik op Ontwikkeling
  1. Klik op Openen ↗
Open uw ontwikkelomgeving · Klik op Openen ↗
Stap 2 / 7

Kies een voorbeeld

Klik op + naast Algemeen en kies Nieuwe chat-widget. Elk voorbeeld is getekend met zijn eigen voorbeeldgegevens: wat u ziet, is wat de chat laat zien. Kies het Statusoverzicht: een titel, voortgang en een tabel.

  1. Klik op Toevoegen aan Algemeen
Kies een voorbeeld · Klik op Toevoegen aan Algemeen
  1. Klik op Nieuwe chat-widget
Kies een voorbeeld · Klik op Nieuwe chat-widget
  1. Klik op Statusoverzicht
Kies een voorbeeld · Klik op Statusoverzicht
Stap 3 / 7

Geef de widget een naam

In het midden ziet u de widget zoals hij in de chat verschijnt. Links staan de blokken, rechts past u een blok aan en onder Gegevens ziet u welke velden de widget nodig heeft. Geef hem een naam die zegt wat hij laat zien.

  1. Vul in bij Naam van de widget: Projectstatus
Geef de widget een naam · Vul in bij Naam van de widget: Projectstatus
Geef de widget een naam · De widget met de voorbeeldgegevens, zoals in de chat.
Stap 4 / 7

Sla op, test en publiceer

Testen controleert of de voorbeeldgegevens passen bij de velden die de widget vraagt. Pas daarna kunt u publiceren; workflows en AI Collega's gebruiken de gepubliceerde versie.

  1. Klik op Opslaan
Sla op, test en publiceer · Klik op Opslaan
  1. Klik op Testen
Sla op, test en publiceer · Klik op Testen
Sla op, test en publiceer · Werkt met de voorbeeldgegevens.
  1. Klik op Publiceren
Sla op, test en publiceer · Klik op Publiceren
Sla op, test en publiceer · Versie 1 staat klaar.
Stap 5 / 7

Maak een workflow die de widget vult

Maak een nieuwe workflow. Zet in de voorbeeldgegevens van de trigger een project met zijn taken: zo komt de aanvraag straks ook binnen, via een API of een andere workflow.

  1. Klik op Toevoegen aan Algemeen
Maak een workflow die de widget vult · Klik op Toevoegen aan Algemeen
  1. Klik op Nieuwe workflow
Maak een workflow die de widget vult · Klik op Nieuwe workflow
  1. Vul in bij Workflownaam: Projectstatus tonen
Maak een workflow die de widget vult · Vul in bij Workflownaam: Projectstatus tonen
  1. Klik op de trigger
Maak een workflow die de widget vult · Klik op de trigger
  1. Klik op Code
Maak een workflow die de widget vult · Klik op Code
  1. Vul in bij Voorbeeldgegevens: `{
Maak een workflow die de widget vult · Vul in bij Voorbeeldgegevens: `{; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;
Stap 6 / 7

Voeg de stap Toon widget toe

Kies uw widget en zeg per veld waar de waarde vandaan komt. {{project}} neemt de waarde uit de trigger over; een waarde die met = begint, rekent: = len(taken) telt de taken.

  1. Klik op Node toevoegen
Voeg de stap Toon widget toe · Klik op Node toevoegen
  1. Klik op Toon widget
Voeg de stap Toon widget toe · Klik op Toon widget
  1. Kies bij Widget: Projectstatus · v1
Voeg de stap Toon widget toe · Kies bij Widget: Projectstatus · v1
  1. Klik op Code
Voeg de stap Toon widget toe · Klik op Code
  1. Vul in bij Gegevens voor de widget: `{
Voeg de stap Toon widget toe · Vul in bij Gegevens voor de widget: `{; ; ; ; ;
  1. Klik op het bolletje van ‘Event trigger’
Voeg de stap Toon widget toe · Klik op het bolletje van ‘Event trigger’
  1. Klik op het bolletje van ‘Toon widget’
Voeg de stap Toon widget toe · Klik op het bolletje van ‘Toon widget’
Stap 7 / 7

Voer uit en bekijk de widget

Onderin bij Uitvoer staat de gevulde widget, precies zoals de chat hem toont. Geef de widget aan een AI Collega (Agent → Brein → Chat-widgets), of laat een agent deze workflow als tool gebruiken: dan verschijnt hij in de chat.

  1. Klik op Opslaan
Voer uit en bekijk de widget · Klik op Opslaan
  1. Klik op Voer uit
Voer uit en bekijk de widget · Klik op Voer uit
Voer uit en bekijk de widget · De widget is gevuld.
Voer uit en bekijk de widget · Het statusoverzicht met de drie taken van het project.

Deze handleiding is op 22 okt 2026 stap voor stap uitgevoerd door een geautomatiseerde test op Flow (versie 3e563176).