How to Embed the BoldDesk Live Chat Widget in 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.
Check out this video for more details
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.
The Automatically embed chat widget in the customer portal setting is configured from Admin → Customer Portal → General and is applied in the context of the selected Customer Portal brand.
When using multiple brands, select the Live Chat widget that matches the brand you are configuring (Live Chat widgets are created/managed under Admin → Chat → Live Chat and are set up with a brand context).
If a widget is not available in the dropdown, confirm that:
- You are configuring the correct brand in Customer Portal settings.
- The Live Chat widget you want to use was created/configured for the same brand context in Admin → Chat → Live Chat.
Repeat the automatic embed selection per brand if you want each brand’s Customer Portal to show its own Live Chat widget.
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 know more about pasting a custom JS code in BoldDesk, learn more on How to Configure Customer Portal Settings.
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
-
What do I need before I can embed the BoldDesk live chat widget into my customer portal?
Before embedding, make sure you have:- A configured live chat widget in BoldDesk
- AI Agent settings confirmed (only if you want AI-powered responses)
- Access to Admin → Customer Portal settings
-
What is the easiest way to add the live chat widget to the BoldDesk customer portal?
The simplest method is automatic embedding:- Go to Admin → Customer Portal → General
- Enable “Automatically embed chat widget in the customer portal”
- Select the widget from the dropdown
-
Where exactly do I paste the custom JS code to embed the BoldDesk live chat widget in the customer portal?
- Go to Admin → Customer Portal → Customization
- Paste the widget embed JS into the Custom JS section. Learn more on How to Configure Customer Portal Settings.
-
Where do I find the BoldDesk live chat widget ID required for the custom JS code?
To locate the widget ID:- Navigate to Admin → Chat → Live Chat
- Click the widget
- Copy the ID from the URL
That ID is what you use in{{chatwidgetId}}.
