> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heylua.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Response Formatting

> Create rich, visual responses across all channels

## Overview

Make your agent's responses visually appealing with **formatting components** that work across WhatsApp, Facebook, Instagram, Email, Slack, and your website.

<Warning>
  **Important**: You must explicitly instruct your agent in the **Persona** or **Skill Context** to use these components. They won't be used automatically!
</Warning>

## 9 Visual Components

<CardGroup cols={3}>
  <Card title="List-Item" icon="list" href="/formatting/list-item">
    **Products, rooms, menus**

    Structured lists with images, titles, and descriptions
  </Card>

  <Card title="Horizontal-List-Item" icon="images" href="/formatting/horizontal-list-item">
    **Carousel display**

    Swipeable cards for visual browsing (WhatsApp only)
  </Card>

  <Card title="Actions" icon="hand-pointer" href="/formatting/actions">
    **Interactive buttons**

    Clickable action buttons for next steps
  </Card>

  <Card title="Links" icon="link" href="/formatting/links">
    **Web URLs**

    Links with rich previews
  </Card>

  <Card title="Images" icon="image" href="/formatting/images">
    **Photo galleries**

    Multiple images in gallery format
  </Card>

  <Card title="Documents" icon="file" href="/formatting/documents">
    **File downloads**

    Send PDFs, contracts, invoices, and other files
  </Card>

  <Card title="Payment" icon="credit-card" href="/formatting/payment">
    **Checkout links**

    Secure payment and booking links
  </Card>

  <Card title="Flow" icon="rectangle-list" href="/formatting/flow">
    **Interactive forms**

    WhatsApp Flows for secure data collection (WhatsApp only)
  </Card>

  <Card title="Navigate" icon="arrow-up-right-from-square" href="/formatting/navigate">
    **Website navigation**

    Direct users to pages (WebChat only)
  </Card>
</CardGroup>

## Quick Example

### E-commerce Product Response

**Without formatting:**

```
We have the UltraBook Pro for $1,299 and Student Laptop for $599.
```

**With formatting:**

```
::: list-item
![image](https://cdn.example.com/laptop-pro.jpg)
# UltraBook Pro
$1,299 · In Stock — 16GB RAM, 512GB SSD. Free 2-day shipping.
:::

::: list-item
![image](https://cdn.example.com/laptop-student.jpg)
# Student Laptop
$599 · Available — 8GB RAM, 256GB SSD. One-year warranty.
:::

::: actions
- Add to Cart
- Compare Laptops
- View Full Specs
:::
```

**Result**: Beautiful visual cards with images, structured info, and clickable actions!

<Frame>
  <img src="https://mintcdn.com/luaglobal/5airD3u2P6mv3Ovl/images/formatting/formatted-response-example.png?fit=max&auto=format&n=5airD3u2P6mv3Ovl&q=85&s=9500b90fb1ad67a7353b50222c092625" alt="Formatted response rendered in the Lua Pop chat widget" width="1928" height="1344" data-path="images/formatting/formatted-response-example.png" />
</Frame>

*The formatted markup above, rendered as visual cards in the Lua Pop chat widget.*

## How to Configure

Tell your agent in **Persona** or **Skill Context**:

```typescript theme={null}
persona: `
  When showing products, use list-item format:
  
  ::: list-item
  ![image](url)
  # Product Name
  $Price · Stock. Description here.
  :::
  
  Then provide actions:
  
  ::: actions
  - Add to Cart
  - View Details
  :::
`
```

<Card title="Complete Configuration Guide" icon="book" href="/cli/persona-command">
  Learn how to configure your agent's persona
</Card>

## Platform Support

Most components work across all channels:

* ✅ WhatsApp Business
* ✅ Facebook Messenger
* ✅ Instagram Messenger
* ✅ Email
* ✅ Slack
* ✅ Website (LuaPop)

<Note>
  **Channel-specific components:**

  * **Navigate** - WebChat/LuaPop only (requires onNavigate handler)
  * **Horizontal-List-Item** - WhatsApp only (falls back to list-item on other channels)
  * **Flow** - WhatsApp only (sends interactive WhatsApp Flows for secure data collection)
</Note>

## Explore Components

Click on any component in the left sidebar to see:

* Complete format specification
* Multiple examples across channels
* How to configure in persona/context
* Best practices
* Troubleshooting

<CardGroup cols={2}>
  <Card title="Start with List-Item" icon="list" href="/formatting/list-item">
    Most commonly used component
  </Card>

  <Card title="Add Actions" icon="hand-pointer" href="/formatting/actions">
    Make responses interactive
  </Card>

  <Card title="Configure Persona" icon="user" href="/cli/persona-command">
    Add formatting instructions
  </Card>

  <Card title="Test Your Agent" icon="comments" href="/cli/chat-command">
    Verify formatting works
  </Card>
</CardGroup>