Web Widget

The OmniBots Web Widget is an embeddable chat interface that you can add to any website with a few lines of code. It provides a full-featured conversational experience directly on your pages.

Key Features

Feature	Description
Lightweight	Under 50 KB gzipped, loads asynchronously
Responsive	Adapts to desktop and mobile viewports
Rich Content	Buttons, cards, carousels, images, forms, quick replies
Multilingual	24 bundled languages with RTL support
Customizable	Colors, position, avatar, welcome message, branding
Accessible	WCAG 2.1 AA compliant with keyboard navigation
Secure	All communication over HTTPS with session encryption

How It Works

1. You add the widget CSS, JS, and initialization snippet to your website
2. The widget loads asynchronously (does not block page rendering)
3. A launcher button appears in the configured position (default: bottom-right)
4. Users click to open the chat window and begin a conversation
5. The widget connects to your published bot via WebSocket for real-time messaging

imageOmniBots web widget open on a sample e-commerce website, showing the chat window with bot messages and a launcher button in the bottom-right corner

Web widget embedded on a website

TIP

The widget maintains conversation history across page navigations within the same session. Users can continue where they left off.

Quick Start

Add this snippet before your closing </body> tag:

<link rel="stylesheet" href="https://omnibots-widget.web.app/widget.css">
<script src="https://omnibots-widget.web.app/widget.iife.js"></script>
<script>
  window.omnibot.init({
    deploymentKey: 'your-deployment-key'
  });
</script>

Replace your-deployment-key with the deployment key from your dashboard (Deploying > Publishing). That is all you need for a working chat widget with default styling.

Sections

• Installation -- Script tag, React, Vue, iframe setup, all init options, and JavaScript API
• Page Context -- Pass page labels, user info, and metadata from your site to the bot flow
• Customization -- Colors, position, avatar, branding, CSS overrides
• Rich Content -- Buttons, cards, carousels, forms, file uploads
• Multilingual Support -- 24 languages, RTL support, custom translations

imageSide-by-side comparison of the web widget on desktop (floating window in bottom-right) and mobile (fullscreen overlay)

Widget on desktop vs mobile

WARNING

The web widget requires a published bot. Draft bots are only accessible in the Flow Builder preview.