Enhancing the Live Chat Widget with Custom CSS and JavaScript

The Advanced Customization feature allows you to tailor the appearance and behavior of your live chat widget to better user experience. Using Custom CSS and Custom JS, you can apply detailed styling and functional enhancements beyond the default settings.

To access and manage Advanced Customization:

1. Go to Admin > Chat > Live Chat.

2. Select an existing widget to edit or click Add Widget to create a new one.
3. Navigate to Widget Customization > Advanced Customization.

How to Add Custom CSS

Custom CSS allows you to modify the visual appearance of the Live Chat Widget. Follow the steps below to add or edit custom CSS styles:

1. Click the Add Custom CSS to open the custom CSS editor.

2. Enter your CSS code and click Add to apply it.

3. Use the edit or delete icons to update or remove existing styles.

How to Add Custom JS

Custom JS allows you to control the behavior and functionality of your live chat widget. Follow the steps below to add or edit custom JS:

1. Click the Add Custom JS to open the custom JS editor.

2. Enter your JS code and click Add to apply it.

3. Use the edit or delete icons to update or remove existing scripts.

Customizing Widget Header with Custom CSS

This example shows how to use custom CSS to change the color of the live chat widget’s title and header description. Likewise, you can customize other parts of the widget with your own styles.

.title-container { .title, .title-desc { color: #800080 !important; } } 

Customizing Widget Menu with Custom JS

This example demonstrates how to use custom JS to add a close button inside the menu popup that triggers the chat widget’s close functionality. Similarly, you can use custom JS to implement other custom features in the widget.

window.$boldChat = window.$boldChat || [];

// Add "Close Widget" option to the menu
window.$boldChat.push(["do:addOption", "Close Widget"]);

// Add event listener for menu option clicks
window.$boldChat.push(["on:moreOptionClick", onMoreOptionClick]);

// Function to handle menu option clicks
function onMoreOptionClick(item) {
 if (item.name === "Close Widget") {
   // Close the chat widget
   window.$boldChat.push(["do:setIsOpen", false]);
 }
}