Widget Customization

OmniBots provides extensive customization options to match the widget appearance and behavior to your brand. Some options are set in the embed code on your website, while others are configured in the Operations Portal.

Init Options (Embed Code)

These options are passed to window.omnibot.init() in your website's embed code. They control the widget's position, behavior, and page context.

<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',
    position: 'bottom-right',
    autoOpen: false,
    offset: { x: 20, y: 20 },
    zIndex: 9999,
    metadata: {
      page_label: 'pricing',
      user_id: 'user_123'
    }
  });
</script>

Option	Type	Default	Description
deploymentKey	string	—	Required. The deployment key from Deploying > Publishing
position	string	'bottom-right'	Launcher position: 'bottom-right' or 'bottom-left'
autoOpen	boolean	false	Open the chat window automatically on page load
offset	object	{ x: 20, y: 20 }	Pixel offset from screen edge (x = horizontal, y = vertical)
zIndex	number	9999	CSS z-index for the widget container
metadata	object	{}	Page context passed to the bot flow as variables. See Page Context

For the full JavaScript API (open(), close(), sendMessage(), setContext(), events, etc.), see Installation > JavaScript API.

imageOperations Portal theme customization panel showing color pickers for primary color, header, bubbles, and font settings with a live widget preview

Theme customization panel in the Operations Portal

Theme Configuration (Operations Portal)

Visual styling is configured in the Operations Portal under Bot Settings > Widget > Theme. These settings are delivered to the widget automatically from the server — you do not need to set them in the embed code.

Appearance Options

Option	Default	Description
Primary Color	#6366F1	Accent color for buttons, links, and header
Header Text	"Chat with us"	Title displayed in the widget header
Welcome Message	"Hello! How can I help?"	First message shown when the widget opens
Bot Avatar	Platform default	Bot avatar image URL
Launcher Icon	Chat bubble	Custom icon for the launcher button
Border Radius	16px	Corner rounding for the chat window
Font Family	inherit	Font family (inherits from your site by default)
Font Size	14px	Base font size for messages

Message Bubble Styling

Option	Default	Description
User Bubble Color	Primary color	Background color for user messages
User Text Color	#FFFFFF	Text color for user messages
Bot Bubble Color	#FFFFFF	Background color for bot messages
Bot Text Color	#1F2937	Text color for bot messages
Bubble Border Radius	16px	Corner rounding for message bubbles

Widget Size

Option	Default	Description
Width	380px	Chat window width
Height	600px	Chat window height
Max Height	90%	Maximum height as a percentage of the viewport

Launcher Button

Option	Default	Description
Size	60px	Launcher button diameter
Icon Type	default	'default', 'custom', or 'text'
Custom Icon URL	—	Image URL when using custom icon type
Text Icon	—	Emoji or character when using text icon type
Border Radius	30px	Corner rounding (30px = circle)
Shadow	true	Whether to show a drop shadow

Feature Toggles

Option	Default	Description
Enable Launcher	true	Whether to show the floating launcher button
Enable Attachments	true	Whether to show the file attachment button
Enable Emoji	false	Whether to show the emoji picker button
Enable Escalation	true	Whether live agent escalation is allowed
Enable Notification Sound	false	Whether to play a sound on new messages
Enable Popup Menu	false	Whether to show the hamburger menu in the header
Show AI Disclaimer	false	Whether to show an AI disclaimer below the input field

Branding

Remove OmniBots branding and replace it with your own under the White Label plan:

Configure in Bot Settings > Widget > Branding:

• Powered By — Show or hide the "Powered by OmniBots" footer
• Logo URL — Your company logo
• Company Name — Displayed in the footer

TIP

White-label branding is available on the Business and Enterprise plans. Contact your account manager to enable it.

CSS Overrides

The widget exposes CSS custom properties that you can override on your page:

:root {
  --ob-primary: #7C3AED;
  --ob-widget-bg: #FFFFFF;
  --ob-bot-bubble-text: #1F2937;
  --ob-user-bubble-bg: #7C3AED;
  --ob-user-bubble-text: #FFFFFF;
  --ob-bot-bubble-bg: #FFFFFF;
  --ob-header-bg: #7C3AED;
  --ob-header-text: #FFFFFF;
  --ob-bubble-radius: 16px;
  --ob-font-family: 'Inter', sans-serif;
  --ob-message-area-bg: #F9FAFB;
}

The full list of CSS custom properties uses the --ob- prefix. See the Embedding & JavaScript API page for a complete reference of all theme properties.

TIP

CSS overrides take precedence over the Operations Portal theme settings. Use them when you need pixel-perfect control that the portal options don't cover.

Dark Mode

Enable dark mode in the Operations Portal under Bot Settings > Widget > Theme:

• Light — Always light theme
• Dark — Always dark theme
• Auto — Follow the user's system preference (prefers-color-scheme)

imageSide-by-side comparison of the widget in light mode (white background, dark text) and dark mode (dark background, light text)

Widget light vs dark mode

WARNING

When using Auto mode, the widget respects the prefers-color-scheme media query. Ensure your CSS overrides cover both light and dark values if you use custom properties.

Info Message (Teaser Bubble)

Show a teaser bubble above the launcher button to prompt engagement:

Configure in Bot Settings > Widget > Info Message:

Option	Default	Description
Enabled	false	Whether to show the teaser bubble
Message	—	The text to display (e.g., "Need help? Chat with us!")
Delay	3 seconds	How long to wait before showing
Show Once Per Session	true	Only display once per browser session

imageThree launcher button variations: default chat bubble icon, custom logo icon, and text emoji icon, each with a teaser bubble message above

Launcher button styles and teaser bubble