drio
Build Your App

Choose The Right Response Format

Match each tool to a widget that makes answers easy to scan and act on.

Widgets determine how the assistant’s answer appears in chat. Choosing the right widget is not decoration. It changes whether the result feels clear, credible, and actionable.

Widget Decision Guide

If the user needs to...Start with...Why
browse a small set of optionsProduct Card or Product Carouselvisual scanning is faster than reading a paragraph
compare options side by sideData Tablecomparison needs structure
understand an explanationMarkdown or Accordionlong-form answers stay readable
submit structured detailsForm or Multi-Step Formthe assistant can gather the next inputs cleanly
confirm a simple next stepConfirmationreduces friction for yes or no decisions
review a metric or trendMetric Card, Bar Chart, or Line Chartquantitative answers are easier to trust visually

Choose Based On The Conversation Moment

Discovery

Use browsing widgets when the user is still exploring:

  • Product Card
  • Product Carousel
  • Link List

These work well for product selection, asset discovery, and guided browsing.

Understanding

Use explanation widgets when the user needs clarity:

  • Markdown
  • Accordion
  • Info Card

These work well for FAQs, plan explanations, onboarding guidance, and help content.

Decision And Input

Use structured input widgets when the assistant should move the conversation forward:

  • Form
  • Multi-Step Form
  • Confirmation

These work well for lead capture, qualification, booking, and handoff flows.

Reporting And Proof

Use data display widgets when the answer should feel measurable:

  • Data Table
  • Metric Card
  • Bar Chart
  • Line Chart
  • Pie Chart

These work well for campaign reporting, usage summaries, and internal performance views.

Pick The Simplest Widget That Fits

A polished app usually uses fewer widget types than you expect. Overusing rich components can make the experience feel busy and inconsistent.

Start with the simplest format that helps the user:

  • choose a card before a carousel if only one or two items matter
  • choose markdown before a table if the answer is narrative
  • choose a confirmation before a form if the only decision is yes or no

How Widgets Connect To Data

Each widget maps API response fields to visible properties in the builder. That means the best widgets are the ones that match the natural shape of your data.

If you have to force-fit the data into a widget, choose a different widget or split the tool into a more focused action.

Before You Publish

  • the widget helps the user make the next decision quickly
  • the output stays scannable on the first read
  • the same tool returns a consistent shape across common prompts
  • the response still feels useful when the AI adds a short written summary