Rich Content

The OmniBots web widget supports 15 rich content element types beyond plain text, enabling interactive and visually engaging bot conversations. Rich content elements are delivered in the rich_content array of a message and render in order.

For the full TypeScript interfaces and analytics events, see the Widget Guide: Rich Content reference.

Supported Content Types

Type	Description	Use Case
Text	Formatted text with optional Markdown	Styled bot responses, instructions
Buttons	Vertical stack of action buttons	Trigger flows, open URLs, make calls
Card	Structured content with image, title, text, buttons	Product display, search results
Carousel	Horizontally scrollable card sets	Browse multiple options
Image	Inline image display with optional click action	Visual documentation, product photos
Video	Embedded video player with playback controls	Tutorials, product demos
Audio	Audio player with waveform visualization	Voice messages, audio clips
File	Downloadable file attachment with icon	Document delivery, reports
List	Vertical list of clickable items	Search results, menus
Location	Embedded Google Maps view with marker	Store locator, directions
Form	Multi-field input form	Data collection, surveys
Rating	Star, thumbs, emoji, or number rating input	Satisfaction surveys, feedback
Chips	Clickable pill-shaped buttons (like quick replies)	Tag selection, filtering
Info	Colored alert/notification box	Warnings, success messages, errors
Divider	Horizontal separator line	Visual section breaks

imageGallery showing all 15 rich content types rendered in the widget: text, buttons, card, carousel, image, video, audio, file, list, location map, form, star rating, chips, info alert, and divider

All 15 rich content element types

Button Actions

All interactive elements share a common set of button action types:

Action	Description
postback	Sends a payload to the bot as if the user typed it
url	Opens a link in a new tab (or same window)
phone	Initiates a phone call
copy	Copies text to the clipboard

Each button also supports a style property ('primary', 'secondary', 'outline', 'danger') and an optional Material icon.

Cards and Carousels

Cards display structured content with an optional image, title, subtitle, description, and action buttons. Wrap multiple cards in a carousel for horizontal scrolling.

{
  "type": "carousel",
  "cards": [
    {
      "title": "Standard Plan",
      "subtitle": "$29/month",
      "image_url": "/images/standard.png",
      "buttons": [
        { "title": "Select", "action": { "type": "postback", "payload": "select_standard" } }
      ]
    },
    {
      "title": "Pro Plan",
      "subtitle": "$79/month",
      "image_url": "/images/pro.png",
      "buttons": [
        { "title": "Select", "action": { "type": "postback", "payload": "select_pro" } }
      ]
    }
  ]
}

Forms

Inline forms collect structured data without leaving the chat. Supported field types: text, email, phone, number, date, time, datetime, select, and textarea.

{
  "type": "form",
  "title": "Contact Information",
  "fields": [
    { "name": "full_name", "label": "Full Name", "type": "text", "required": true },
    { "name": "email", "label": "Email", "type": "email", "required": true },
    { "name": "phone", "label": "Phone", "type": "phone", "required": false }
  ],
  "submit_button": { "title": "Submit" },
  "submit_action": { "type": "postback", "payload": "form_submit:{{full_name}}:{{email}}" }
}

TIP

Form field values are included in the postback payload using {{field_name}} template syntax.

Rating

Collect user ratings with configurable visual styles:

{
  "type": "rating",
  "title": "How was your experience?",
  "max_rating": 5,
  "style": "stars",
  "submit_action": { "type": "postback", "payload": "rating:{{rating}}" }
}

Rating styles: stars (default), thumbs, emoji, or numbers.

Info Alerts

Display colored alert boxes for important messages:

{
  "type": "info",
  "style": "warning",
  "title": "Important",
  "text": "Your session will expire in 5 minutes."
}

Styles: info (blue), success (green), warning (amber), error (red).

File Attachments

Users can attach files when enable_attachments is true in the widget configuration. Supported file types:

Category	Extensions	Max Size
Images	png, jpg, jpeg, gif, webp	10 MB
Documents	pdf, docx, txt	10 MB
Audio	mp3, wav	10 MB
Video	mp4, webm	50 MB

WARNING

Files exceeding the size limit are rejected before upload. File uploads are stored in Cloud Storage with tenant-level isolation.

Analytics

All rich content interactions are tracked. The widget sends analytics events when users interact with elements — button clicks, carousel scrolls, form submissions, rating selections, video playback milestones, and more. See the Widget Guide: Rich Content for the full event list.