Widget Overview

The OmniBots chat widget is a fully embeddable conversational interface that can be added to any website with a single script tag. It connects visitors to AI-powered bots and live agents through a responsive, accessible, and highly customizable chat experience. This guide covers everything developers and end users need to know about the widget's capabilities.

Key Features

The widget provides a complete conversational experience out of the box, with support for advanced interactions that go well beyond simple text chat.

Conversational AI

The core of the widget is its integration with OmniBots' LLM-first orchestration engine. Visitors interact with AI bots that can understand natural language, call tools, query knowledge bases, and route conversations through visual flows designed in Bot Studio.

Rich Content

Bots can send structured content beyond plain text, including:

• Cards and carousels for presenting products, options, or information
• Embedded forms for collecting structured data in-chat
• Star ratings for gathering feedback
• Buttons, chips, and lists for guided navigation
• Images, video, and audio for media-rich conversations
• Location maps with embedded Google Maps
• Info alerts for important notices and warnings

File Uploads

Users can attach files directly within the chat. The widget supports drag-and-drop and click-to-browse, with image thumbnail previews, upload progress bars, and file type validation. Allowed types include images, documents, audio, and video files up to 10 MB (50 MB for video).

Voice Input and Output

When enabled, the widget displays a microphone button that lets users record voice messages. Audio is sent to the backend for speech-to-text transcription and the bot can respond with synthesized speech (TTS) that plays inline.

Video Calls

Live agents can initiate video calls from the Agent Desktop. The visitor receives an invite banner with Accept and Decline buttons. During the call, controls include mute, camera toggle, background blur (via MediaPipe), screen share, and end call. Video is powered by the Telnyx Video SDK.

Live Agent Escalation

Conversations can be escalated to live agents through CCaaS integrations (Genesys, 8x8, Amazon Connect, Google CCAI). The widget displays connection status, queue position, and agent identity, with the ability to disconnect and return to the bot.

Multi-Agent Hub

In hub mode, the widget presents an agent selector that lets users choose a department or specialist bot. Agents can be displayed in grid, list, or dropdown layouts. The bot can also route users automatically based on conversation context.

Multilingual Support

The widget supports over 100 languages through server-side translation and includes 24 bundled UI translations for instant localization without a network round-trip. Language detection modes include automatic detection, browser preference, and user selection. RTL layouts are supported for Arabic, Hebrew, Persian, and Urdu.

Accessibility (WCAG 2.1 AA)

The widget is built to meet WCAG 2.1 AA compliance requirements, including:

• Full keyboard navigation with visible focus indicators
• ARIA roles, labels, and live regions for screen reader support
• Color contrast ratios of 4.5:1 for text and 3:1 for UI components
• Resizable text up to 200%
• Reduced motion support via prefers-reduced-motion
• Safe area insets for notched mobile devices

Responsive Design

The widget adapts to any screen size:

Breakpoint	Behavior
Desktop	Floating window (default 380 x 600 px)
Tablet	Adaptive sizing with configurable max height
Mobile (< 480px)	Fullscreen overlay with safe-area insets

imageWidget displayed on three screen sizes: desktop floating window, tablet adaptive layout, and mobile fullscreen overlay with safe area insets

Responsive widget on different screen sizes

imageWidget feature showcase displaying rich content elements including a product carousel, star rating, quick reply buttons, and an inline form within a chat conversation

Widget rich content capabilities

Customizable Theme

Over 40 CSS properties can be configured to match any brand identity. Theming covers the header, message bubbles, buttons, fonts, widget size, launcher appearance, and info message (teaser bubble). All theme properties are configured per-bot in the Operations Portal and delivered to the widget at runtime.

Architecture

The widget is built with Vue 3 and compiled into a standalone JavaScript bundle that can be loaded on any web page. It communicates with the OmniBots backend over a WebSocket connection, which handles real-time messaging, typing indicators, escalation events, audio streaming, and video signaling.

Host Page
  |
  +-- <script src="omnibots-widget.js">
  |
  +-- omnibot.init({ deploymentKey: "..." })
        |
        +-- WebSocket connection to OmniBots backend
              |
              +-- Bot orchestrator (flow execution, LLM, RAG)
              +-- CCaaS integration (live agent escalation)
              +-- Voice service (STT/TTS)
              +-- Video service (Telnyx)

Audience

This guide is intended for two audiences:

• Developers who need to embed the widget, configure its behavior via the JavaScript API, and customize its appearance
• End users (via administrator documentation) who want to understand the chat experience, including how to interact with rich content, escalate to agents, and use video calling

Next Steps

Topic	Description
Embedding & JavaScript API	Add the widget to your site, configure options, and control it programmatically
Pre-Chat Forms	Collect visitor information before starting a conversation
Chatting	Text input, file attachments, emoji, voice, menus, and message feedback
Rich Content	Cards, carousels, forms, ratings, and all 15 element types
Video Calls	Accept and manage video calls with live agents
Live Agent Escalation	Connection states, queue position, and multi-agent hub
Accessibility	WCAG 2.1 AA compliance, keyboard navigation, and internationalization