How to Customize the Chat Widget in Bold Agent

The Chat Widget in Bold Agent allows to configure the widget’s appearance, launcher behavior, chat experience, and sharing options to ensure seamless alignment with their website’s branding and user experience.

All customization is performed at the widget level and managed directly from the agent’s configuration page.

Accessing the Chat Widget Settings

1. Navigate to Agent Builder.
2. Select the desired agent.
3. Open the Agent Configuration page.
4. From the left panel, click Widget under Channels.

You will see the following tabs:

• Widget Appearance
• Chat Experience
• Preference
• Share

Widget Appearance

This section controls the visual identity and behavior of the chat widget. It is divided into four configurable sections:

• Header Appearance – Customize branding elements such as logo, title, and description
• Brand Color – Define the primary color and theme of the widget
• Launcher – Configure how the chat launcher appears and behaves
• Advanced Customization – Apply custom CSS or JavaScript for deeper control

Header Appearance

The Header Appearance section allows you to configure branding elements displayed at the top of the chat widget.

Header Logo

• Enable the toggle to display a logo.
• Upload a custom logo for your brand.
• Supported formats: .jpeg, .jpg, .png, .svg, .gif, .ico
• Max file size: 2MB
• Recommended size: 32 × 32 pixels

Options available:

• Change logo
• Remove logo

Header Title

• Enter the main title displayed in the widget header.

Header Description

• Add a short description below the title.

Preview of the configured header as it will appear in the chat widget.

Brand Color Configuration

The brand color defines the primary visual identity of your chat widget. It is applied across key elements such as buttons, headers, highlights, and interactive states to ensure a consistent look and feel aligned with your brand.

Brand Color

Set the primary color for the widget.

• Choose from predefined colors or enter a custom hex value.
• The selected brand color is applied to buttons, highlights, and key UI elements.

Widget Display Theme

• Light Theme – Bright interface
• Dark Theme – Darker interface

Preview of how the selected brand color and theme will appear in the chat widget.

Launcher Configuration

The launcher is the button that opens the chat widget.

Launcher Type

Choose how the launcher appears:

• Icon and Text – Displays both icon and text
• Text Only – Displays only text
• Image Only – Displays only an icon/image

Launcher Text

• Define the text shown on the launcher.
• Available when using Icon and Text or Text Only.

Upload Launcher Icon

• Upload a custom icon for the launcher.
• A URL is automatically generated after upload.
• Used in Icon and Text and Image Only modes.

Launcher Position

Select where the launcher appears on the screen:

• Right (default)
• Left

Advanced Customization

The Advanced Customization section allows further control over the widget’s appearance and behavior using custom code.

Available options:

• Custom CSS
• Custom JS

Any custom code added to the widget is your responsibility. Incorrect CSS or JavaScript may result in unexpected behavior or impact the user experience. It is recommended to test all changes before deploying them in a production environment.

For more information about to use the advanced customization, please refer to the KB Enhancing the Bold Agent Chat Widget Using Custom CSS and JavaScript

Chat Experience

The Chat Experience tab allows you to customize the messages and prompts presented to users during interaction.

Welcome Text

Defines the message displayed when a user opens the chat widget.

Placeholder Text

Customizes the placeholder text shown in the message input field.

Suggested Prompts

Suggested prompts help users quickly initiate conversations with the agent.

• Click Add/Edit prompt to manage prompts.
• Each prompt includes a title and a description.

For more information about how to add suggested prompts, please refer to KB How to add Suggested Prompts in Bold Agent

Preview of the chat widget reflecting your configured chat experience settings.

Saving Changes

After completing the configuration:

• Click Save to apply the changes.
• Click Discard to cancel any unsaved updates.

These updates provide greater flexibility to align the chat widget with your brand identity and user experience goals.

Complete Integration: Chat Widget on Your Website

After saving your configuration, the chat widget will be ready to integrate into your website or platform. Once embedded, the widget appears as a fully functional, AI‑powered assistant that users can interact with directly on your site.

The image below shows how the chat widget renders when integrated into a website