ChatUI Widget Demo - Interactive Buttons

How it works

The chat widget now supports interactive buttons. When the backend responds with widget data, the widget will render clickable buttons that users can interact with.

Backend Response Format:

{ "text": "Please select an option:", "widget": { "type": "buttons", "options": [ { "id": "opt1", "text": "Customer Support", "value": "support" }, { "id": "opt2", "text": "Sales Inquiry", "value": "sales" }, { "id": "opt3", "text": "Technical Help", "value": "technical" } ] } }

When a user clicks a button, the option's value is sent to the API, and the option's text appears as a user message.

Try it yourself

Type "menu" or "options" in the chat to see the interactive buttons in action!

The demo simulates backend responses with widget data.