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 the 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:
- Go to Admin > Chat > Live Chat.
- Select an existing widget to edit or click Add Widget to create a new one.
- Navigate to the Advanced Customization section in the Appearance tab.
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:
- Click the Add Custom CSS to open the custom CSS editor.
- Enter your CSS code and click Add to apply it.
- 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:
-
Click the Add Custom JS to open the custom JS editor.
-
Enter your JS code and click Add to apply it.
-
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 colour of the live chat widget’s title and header description. Likewise, you can customise other parts of the widget with your own styles.
.title-container { .title, .title-desc { colour: #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]);
}
}
- Any custom code you add to the widget is your responsibility. Please take care when making these modifications because they could impact your customer experience.
- When incorporating CSS or JS, please use proper syntax.
How to hide live chat system notifications using Custom CSS
Some customers may want to hide system-generated messages in the Live Chat widget, such as the notification shown when an agent joins a conversation. This can be done using Custom CSS in the widget Advanced Customization area.
Use case
Hide the join and other system notification messages that appear in the customer chat thread, for example the agent joined conversation message.
How to apply the CSS
Go to Admin → Chat → Live Chat → edit the widget → Appearance → Advanced Customization → Custom CSS and add the required CSS rule.
Option 1. Hide all widget notification messages
Use this rule when you want to hide every notification message in the widget.
.notification-msg {
display: none;
}
Impact
This hides all notification messages, including agent assignment and conversation state updates such as open and reopen.
Option 2. Hide assignee notification independently
Use this rule to hide only the assignee notification.
.assignee-notification {
display: none;
}
Option 3. Customize status notification independently
Use this rule to style or control the status notification separately.
.status-notification {
background: green !important;
}
Frequently Asked Questions
-
Can I revert back to default widget settings?
Yes. You can remove or disable your custom CSS/JS entries using the delete icon. -
Will incorrect code break the widget?
Possibly. Invalid CSS may cause styling issues; invalid JS may prevent the widget from loading properly. Always test changes in a safe environment first. -
Can I combine multiple CSS or JS rules?
Yes. You can add multiple entries, or consolidate all rules into a single entry for better organisation. -
Do CSS or JS updates take effect immediately?
Changes usually apply immediately after saving and refreshing the page. -
Does BoldDesk provide an API for advanced JS customization?
Yes. The BoldDesk Live Chat Web SDK supports extended widget control and event handling.
