Enhancing the Bold Agent Chat Widget Using Custom CSS and JavaScript

Bold Agent allows advanced customization of the Chat Widget through custom CSS and JavaScript. This enables you to tailor the widget’s visual appearance (colors, text styling, layout) and behavior to align with your website’s branding and functional requirements.

This article explains how to add, configure, and manage custom CSS and JavaScript for the Bold Agent Chat Widget.

Important: All custom CSS and JavaScript added to the widget are customer-managed. Ensure your code is valid, secure, and tested before deploying to production. Incorrect or conflicting code may impact widget functionality, performance, or user experience.

Prerequisites

• Access to Agent Builder in the Bold Agent platform
• A chat widget created for the selected agent

Accessing Advanced Customization Settings

To add custom CSS or JavaScript to a chat widget:

1. Sign in to Bold Agent.
2. Open Agent Builder and select the required agent.
3. Navigate to Configuration > Widget.
4. If a widget does not exist, create one and complete the basic setup.
5. Scroll down to the Advanced Customization section.
6. Click Add Custom CSS or Add Custom JS.
7. Click Update to apply the changes.

Adding Custom CSS

Custom CSS allows you to modify the visual appearance of the Chat Widget, including colors, fonts, spacing, and layout.

Steps to Add Custom CSS

1. In the Advanced Customization section, click Add Custom CSS.

2. Enter your CSS inside the <style> tag.
3. Click Add to save the customization.

Example: Customizing the Widget Header Text

.chat-header .header-text {
  color: #FFFF00 !important;
}

Adding Custom JavaScript

Custom JavaScript allows you to extend or control widget behavior using the Bold Agent Widget JavaScript interface.

Steps to Add Custom JavaScript

1. In the Advanced Customization section, click Add Custom JS.

2. Enter your JavaScript inside the <script> tag.
3. Click Update to save the script.

Example: Adding a “Close Widget” Option to the Widget Menu

window.$boldAgent = window.$boldAgent || [];
window.$boldAgent.push(["do:addOption", "Close widget"]);
window.$boldAgent.push(["on:moreOptionClick", onMoreOptionClick]);

function onMoreOptionClick(item) {
  if (item.name === "Close widget") {
    window.$boldAgent.push(["do:setIsOpen", false]);
  }
}

Managing Custom CSS and JavaScript

After adding custom CSS or JavaScript, all configurations are listed under Advanced Customization, where you can:

• Edit existing custom code
• Delete custom code when it is no longer required

Note: All changes are applied immediately after saving.