Embedding 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.
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 (FAQs)
Q1: 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
Q2: 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
Q3: 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.
Q4: 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}}.
