Skip to main content

​
Overview

Make your agent’s responses visually appealing with formatting components that work across WhatsApp, Facebook, Instagram, Email, Slack, and your website.
Important: You must explicitly instruct your agent in the Persona or Skill Context to use these components. They won’t be used automatically!

​
6 Visual Components

List-Item

Products, rooms, menusStructured lists with images, titles, and descriptions

Actions

Interactive buttonsClickable action buttons for next steps

Links

Web URLsLinks with rich previews

Images

Photo galleriesMultiple images in gallery format

Payment

Checkout linksSecure payment and booking links

Navigate

Website navigationDirect users to pages (WebChat only)

​
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
Professional laptop with 16GB RAM, 512GB SSD. Free 2-day shipping.
:::

::: list-item
![image](https://cdn.example.com/laptop-student.jpg)
#Student Laptop
##$599 - Available
Perfect for students with 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!
With vs without formatting
Screenshot: Side-by-side comparison showing plain text vs formatted response

​
How to Configure

Tell your agent in Persona or Skill Context: 
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
  :::
`

Complete Configuration Guide

Learn how to configure your agent’s persona

​
Platform Support

All components work across:
  • ✅ WhatsApp Business
  • ✅ Facebook Messenger
  • ✅ Instagram Messenger
  • ✅ Email
  • ✅ Slack
  • ✅ Website (LuaPop)
Navigate component only works on WebChat/LuaPop (requires onNavigate handler)

​
Coming Soon

Custom Component Builder

Create your own custom components (Q1 2025)

​
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

Start with List-Item

Most commonly used component

Add Actions

Make responses interactive

Configure Persona

Add formatting instructions

Test Your Agent

Verify formatting works