How to Enhance 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.
Use Cases
- Customize the chat widget to match your brand colours and design.
- Add custom features and behaviours using JavaScript.
- Create a more personalised customer chat experience.
- Add custom menu options and actions within the chat widget.
- Show, hide, or style widget elements based on business needs.
- Hide system notifications to keep conversations cleaner.
- Adapt the widget for specific workflows, campaigns, or websites.
- Fine-tune the chat experience beyond the default settings.
Accessing Advanced Customization
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 behaviour 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.
Customising 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; } }
Customising 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.
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;
}
Permission
For live chat advanced customization, an agent must have the Manage settings permission in the Admin Module assigned to their role. Explore Managing Roles and Permissions in BoldDesk for more insights.
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 organization. -
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.
