# Interactive chat widgets for AI agents

> Hourzero widgets turn your AI agent's answers into cards, product carousels, booking calendars, and forms. Describe one to Backstage, or start from a template.

**Show, don't tell.** Widgets turn what your actions return into cards, lists, and forms customers can use right in the chat. Describe one to Backstage, or start from a template.

For example, three chats show the agent tracking an order with a card that lists the delivery date, the items, and a Track package button, suggesting gifts under $250 as a carousel of product cards with Add to cart buttons, and ending a chat with a short survey of stars and quick tags.

## Describe it. Backstage builds it.

No code and no design tools. Tell Backstage what you have in mind, and it does the rest.

### 1. Describe it

Paste a sample of what your action returns and say what customers should see. Backstage drafts a widget and previews it with your data.

For example, Backstage turns a pasted order API response into a draft order card with the status, delivery date, items, and a Track package button.

### 2. Refine and approve

Ask for changes in plain words, like another button. Nothing is saved until you approve it.

### 3. Attach it to an action

Choose the widget in the action's settings. From then on, that action's results show up as your card.

### 4. Publish

Try it in the Playground, then publish. Customers tap, pick, and fill it in without leaving the chat.

## Or start from a template

Ready-made designs for carts, bookings, invoices, flight status, and more. Pick one, and Backstage fits it to the fields your API returns.

Templates cover commerce, bookings, travel, food and drink, sales and leads, support, finance, real estate, insights, productivity, and media and sports.

For example, the Widgets page lists the agent's saved widgets with the actions that show them, and starter widgets below, from product cards to a shopping cart.

## Build anything

Widgets are made of the same pieces as an app, so customers can read, choose, and act right in the chat.

### Show

- Cards, lists, and tables
- Carousels and tabs
- Charts and stats
- Images, badges, and ratings
- Progress, steps, and countdowns

### Ask

- Text fields and dropdowns
- Date pickers and time slots
- Star ratings and quick picks
- Sliders and quantities
- Checkboxes and switches

### Do

- Send a reply to the agent
- Open a link, like checkout
- Copy a code or reference
- Run one of your actions

For example, three more chats show a haircut booking with a calendar and time slots, a pricing comparison with a monthly and yearly switch, and a flight status card with the route, times, and progress.

## Safe in front of customers

### Filled from your data

A widget shows what your action returned, so prices and order details come from your system, not the model.

### Text where cards don't fit

Widgets show in your website chat. On other channels, or when a result doesn't fit the design, the agent answers in text.

### Live when you publish

Saving a widget updates your draft. Customers see it after you test it in the Playground and publish.

[Read how widgets work](https://hourzero.dev/docs/ai-agent-management/widgets)

## Questions about widgets

How they're built, and where they show up.

[Talk to our team](https://hourzero.dev/enterprise#contact)

### Do I need to code or design anything?

No. Describe what you want to Backstage, or start from a template. It builds the widget, previews it with your data, and saves it when you approve.

### Which channels show widgets?

Your website's chat bubble and Center Stage. On other channels the action still runs, and the agent answers in text.

### Can a widget send information back to my system?

Yes. A button or form can run one of your actions, like booking a slot or sending feedback, and the widget shows whether it worked.

### What if my API returns something unexpected?

The agent answers in text instead, so customers never see a broken card.

### Which plans include widgets?

Standard, Pro, and Enterprise. Each agent can save up to 50 widgets.

## Keep exploring

- [Procedures](https://hourzero.dev/features/procedures): Have it follow your steps, every time.
- [Channels](https://hourzero.dev/features/channels): Your website and the apps customers use.
- [Skills](https://hourzero.dev/features/skills): Add specialist abilities when you need them.
- [MCP](https://hourzero.dev/features/mcp): Plug in tools from any MCP server.

## Ready when your customers are

They're already asking. Train an agent on your site and have it answering by this afternoon. Free plan, no credit card needed.

- [Start building free](https://hourzero.dev/sign-up)
- [Read the quick start](https://hourzero.dev/docs/quick-start/your-first-agent)
- [Talk to sales](https://hourzero.dev/enterprise#contact)