Customizing the Web Messenger

This guide covers all the ways you can customize the appearance and behavior of your web messenger. It walks through every setting in the bot editor, from top to bottom, starting with the root editor fields and then each of the grouped settings sections below them.

For a quick-start walkthrough of creating your first bot, see Creating a Web Messenger.

Basic Settings

When you open the bot editor, the first settings you see are the basic customization fields. These control the core identity and behavior of your messenger.

Below these fields, you'll see grouped settings sections — Header, Appearance, Widget & Launcher, Messages, Attention Getter, Features, and Privacy & Security — each with an Edit button that opens detailed settings.

Header

The Header section controls what appears at the top of the chat window.

Appearance

The Appearance section controls colors, theming, attribution, the composer prompt, and custom CSS.

Attribution

On paid plans, you can customize or hide the "Powered by" attribution at the bottom of the chat.

Composer Prompt

The Composer Prompt field lets you set custom placeholder text in the message input area. Supports translations — click "Edit translations" to add localized versions.

Custom CSS

For advanced styling, enter CSS directly into the Custom CSS field. This CSS is injected into the widget.

/* Example: Use a custom font */
.fxo-widget {
  --fxo-font-family: 'Inter', system-ui, sans-serif;
}

For the full reference of CSS variables, class selectors, and ready-to-use recipes, see Customizing with CSS.

Widget & Launcher

The Widget & Launcher section controls how the messenger is displayed on your page and how the launcher button looks and behaves.

When you upload a Launcher Icon, additional settings appear:

URL Filtering

Control which pages the widget appears on:

Examples:

Launcher Offsets

Use offsets when you need to avoid overlapping with other elements on your page (like a cookie banner or another chat widget).

Messages

The Messages section controls avatars and bubble colors for each message role.

Bot Messages

Live Agent Messages

User Messages

Attention Getter

The Attention Getter is a notification that appears alongside the widget to encourage visitors to start a conversation.

Example: Set the text to "Have a question? We're here to help!" with a 10-second delay and moderate intensity to gently prompt visitors without being intrusive.

Features

The Features section controls the composer input, attachment handling, sounds, and other behavioral settings.

Composer

Attachments

Notifications & Other

Privacy & Security

The Privacy & Security section controls data collection, conversation persistence, and domain restrictions.

Privacy

Zero footprint mode is useful for kiosks, shared computers, avoiding GDPR requirements, or any scenario where you don't want conversation data persisting on the device.

Security

Allowed domains is an important security feature. If you set this, the widget will refuse to load on any domain not in the list, preventing unauthorized sites from embedding your bot.

Example: example.com, app.example.com, staging.example.com

Next Steps

• Customizing with CSS — CSS variables, class selectors, and advanced styling recipes
• Installation & Embedding Options — Learn about all the ways to deploy the messenger
• JavaScript API — Control the messenger programmatically
• Using Metadata — Identify users, pass custom data, and collect visitor information
• Internationalization and Translation — Support multiple languages