AI Agent Management
Widget Studio
Create reusable interfaces for action results and customer interactions.
Overview
Open Build → Widgets to manage the UI cards your agent can display. My widgets contains saved widgets; Create widgets offers starting points for a new design. A widget can be linked to an action and reused.
Create a widget
- Open Create widgets and choose a template or start a new widget.
- Use the builder to describe the interface, edit its content, and review the preview.
- Define the values the widget expects and configure its functions where needed.
- Check the card with representative data and each interactive state.
- Save the widget, then link it from a compatible action's Widget section.
Work in the builder
| Surface | Use it for |
|---|---|
| AI builder | Describe a new design or a change to the current widget. |
| Preview | Inspect the resulting card and its interactions. |
| Code | Edit the widget implementation and its Schema, Default data, and named examples. |
| Functions | Configure the behavior connected to widget interactions. |
| States | Choose when sections are visible, using data conditions and groups. |
Configure widget functions
| Function type | Behavior |
|---|---|
| Call API | Call an API and use the returned data. |
| Run client-side code | Invoke a function implemented by the website host. |
| Send message | Send the configured message into the conversation on the visitor’s behalf. |
| Open link | Open a URL, email client, or phone dialer. |
| Open embedded page | Open an HTTPS page inside the web widget. |
| Dismiss widget | Close the widget. |
| Set variables | Update the widget’s state values. |
Review the fields shown for the selected function type, including inputs, return fields, and On execute, On success, or On failure behavior where available. Link the function to the intended control and test its result from the deployed channel.
Control visibility with states
- Open States and choose Add your first state or Add state.
- Give the state a clear name and choose its Visibility.
- For conditional visibility, add the data conditions and combine them with And or Or. Use groups when conditions belong together.
- Review the Default data and named examples in Code so you can exercise each state.
- Check both matching and non-matching values in Preview, then save the widget.
States change which widget sections appear based on data. They are separate from action triggers, which determine when an entire widget action starts.
Check each preview surface
Use Widget, Chat bubble, and Agent page below the preview to inspect the card in its customer-facing context. Switch between light and dark preview themes and check the card’s buttons, long text, and conditional states before attaching it to an action.
Design for real data
- Use consistent input names and types so action mappings remain understandable.
- Provide useful empty, loading, success, and error states where the interaction needs them.
- Check long text and missing optional values.
- Test keyboard operation and a narrow mobile viewport.
- Confirm that any function which changes business data follows the required action and approval workflow.
Reuse and manage widgets
Search My widgets to reopen an existing design. Use the widget's management controls to rename or manage it. When linking an existing widget to another action, review its input schema and all existing uses before editing the shared design.
Import and export
The Widget Studio options menu supports downloading and uploading widget JSON files. Uploads must be smaller than 2 MB and pass widget validation; save after upload to keep the change. The custom action's Widget section also supports a .widget file. Use this to reuse a design, then review its inputs and functions in the destination action before enabling it.