How to Add BoldDesk Live Chat Widget to the Customer Portal
This guide explains how to integrate the BoldDesk live chat widget into your customer portal for real-time support and seamless communication. You can embed the widget automatically or use custom JavaScript (JS) for advanced customization.
Prerequisites
- Ensure you have a configured live chat widget in BoldDesk.
- Confirm AI Agent settings if you plan to use AI-powered responses.
- Access to Admin → Customer Portal settings.
1. Automatically Embed Chat Widget
To be able to automatically enable the live chat widget in the customer portal, follow the steps below;
-
Navigate to Admin > Customer portal > General
-
Under Live Chat Widget Settings, check the box “Automatically embed chat widget in the customer portal”.
-
From the dropdown, you will be able to select the live chat widget you want to appear in your customer portal. Consequently, the selected widget will appear in the customer portal. If you check the box “Enable chat widget authentication”, logged-in users are automatically authenticated, and no additional configuration is required.
2. Add Live Chat Using Custom JS Code
The custom JS option allows you to add the BoldDesk live chat widget to your BoldDesk customer portal.
Go to Admin > Customer Portal > Customization and paste the following custom JS code.
const script = document.createElement("script");
script.src = `https://{{yourdomain}}/chatwidget-api/widget/v1/{{chatwidgetId}}`;
document.head.appendChild(script);
For pre-filling the user email address, additionally add this block of code
window['boldChatSettings'] = {
email : localStorage.getItem('loggedUserEmail'),
maintainIsOpen : false
};
- You can add your domain in place of {{yourdomain}}. For example: support.bolddesk.com
- Replace {{chatwidgetId}} with the actual widget ID in the code.
Where to Find the Chat Widget ID?
-
Navigate to Admin → Chat → Live Chat.
-
Click the widget and copy the ID from the URL. Refer to the following screenshot.
Pasting the Custom JS codes
To learn where to paste the above custom JS codes, refer to this article.
After Customization
Best Practices
- Use automatic embedding for simplicity.
- Use custom JS for advanced scenarios like pre-filling user data.
- Always verify the widget ID and domain before saving changes.
Frequently Asked Questions (FAQs)
Q1: Can I enable authentication for chat widgets?
Yes, check Enable chat widget authentication in the Agent Portal settings.
Q2: Where do I paste custom JS code?
In Admin → Customer Portal → Customization.
Q3: Can I use multiple widgets?
No, only one widget can be embedded per portal.
Q4: What happens if I enter the wrong widget ID?
The chat widget will fail to load; verify the ID from the widget URL.
