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:
- Go to Admin > Chat > Live Chat.
- Select an existing widget to edit or click Add Widget to create a new one.
- Navigate to 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 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]);
}
}
- 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.
FAQs
Q1: Can I revert back to default widget settings?
Yes. You can remove or disable your custom CSS/JS entries using the delete icon.
Q2: 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.
Q3: 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.
Q4: Do CSS or JS updates take effect immediately?
Changes usually apply immediately after saving and refreshing the page.
Q5: Does BoldDesk provide an API for advanced JS customization?
Yes. The BoldDesk Live Chat Web SDK supports extended widget control and event handling.
