Skip to main content

Comparison Tables

Display product comparisons in a structured table format.

Overview​

Comparison tables help customers evaluate multiple products:

┌─────────────┬──────────┬──────────┬──────────┐
│             │ Basic    │ Pro      │ Premium  │
├─────────────┼──────────┼──────────┼──────────┤
│ Price       │ $29      │ $49      │ $99      │
│ Storage     │ 10 GB    │ 50 GB    │ Unlimited│
│ Support     │ Email    │ Priority │ 24/7     │
│ API Access  │ ❌       │ ✓        │ ✓        │
└─────────────┴──────────┴──────────┴──────────┘

Use Cases​

Plan Comparison​

Compare subscription tiers:

Customer: "What's the difference between plans?"

AI: "Here's a comparison of our plans:"
[Comparison Table: Starter vs Pro vs Enterprise]

Product Comparison​

Compare similar products:

Customer: "Widget A or Widget B?"

AI: "Let me compare them for you:"
[Comparison Table: Widget A vs Widget B features]

Feature Matrix​

Show feature availability:

[Features x Product grid with checkmarks]

Table Structure​

Columns​

  • First column: Feature/attribute names
  • Subsequent columns: Products/plans being compared

Rows​

Common row types:

TypeExample
Price$29/mo
Text"50 GB"
Boolean✓ or ❌
Rating⭐⭐⭐⭐
Badge"Best Value"

Header Row​

Product/plan names with optional:

  • Image thumbnail
  • Price summary
  • Recommendation badge

Configuration​

Table Settings​

In Settings → Widget → Rich Messages:

SettingOptions
Enable ComparisonsYes/No
Max Columns2-4
Max Rows5-15
Sticky HeaderYes/No

Visual Options​

OptionDescription
Highlight WinnerColor best option
Show DifferencesEmphasize differences
Compact ModeReduce padding

Data Format​

Simple Comparison​

{
  type: 'comparison',
  products: ['Basic', 'Pro', 'Premium'],
  features: [
    {
      name: 'Price',
      values: ['$29', '$49', '$99']
    },
    {
      name: 'Storage',
      values: ['10 GB', '50 GB', 'Unlimited']
    },
    {
      name: 'API Access',
      values: [false, true, true]
    }
  ]
}

With Styling​

{
  type: 'comparison',
  products: [
    { name: 'Basic', price: '$29' },
    { name: 'Pro', price: '$49', badge: 'Popular' },
    { name: 'Premium', price: '$99' }
  ],
  features: [
    {
      name: 'Storage',
      values: ['10 GB', '50 GB', 'Unlimited'],
      highlight: 2 // Highlight Premium
    }
  ]
}

Responsive Behavior​

Desktop​

Full table displayed with all columns visible.

Tablet​

Horizontal scroll if needed, sticky first column.

Mobile​

Options for mobile display:

ModeBehavior
ScrollHorizontal scroll
StackStack products vertically
TabsTab per product
AccordionExpandable sections

Interactive Features​

Hover Details​

Show more info on hover:

Storage: 50 GB
[Hover: "Includes automatic backups"]

Selection​

Let customer select preferred option:

[Select Basic] [Select Pro] [Select Premium]

Deep Dive​

"Learn more" links for each product.

Styling​

Colors​

Tables inherit theme colors:

  • Header: Slightly darker background
  • Alternating rows: Subtle striping
  • Highlights: Primary color

Icons​

Boolean values can use icons:

ValueDisplay
true✓ Green check
false❌ Red X
partial◐ Yellow partial

Emphasis​

Highlight important differences:

  • Bold text for key features
  • Color for best values
  • Badge for recommendations

Best Practices​

Clear Labels​

  • Use simple feature names
  • Avoid jargon
  • Be consistent

Fair Comparison​

  • Compare comparable items
  • Show objective data
  • Include caveats when needed

Guide Decision​

  • Highlight recommended option
  • Summarize key differences
  • Suggest next steps

Accessibility​

  • Include alt text for icons
  • Ensure keyboard navigation
  • Use semantic table markup