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.

Prerequisites

Ensure you have a configured live chat widget in BoldDesk.
Confirm AI Agent settings if you plan to use AI-powered responses.
Verify that the Manage Settings permission is activated in the admin module.

Use Cases

Enable real-time support directly in the customer portal.
Let customers chat with support without leaving the portal.
Auto-authenticate logged-in users for a seamless experience.
Use brand-specific chat widgets for different portals.
Pre-fill customer details and customize chat with JS.
Improve response times with live chat and AI assistance.

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.

Troubleshooting

The Live Chat widget does not appear in the Customer Portal (automatic embed)
- Confirm Automatically embed chat widget in the customer portal is enabled in Admin > Customer Portal > General.
- Confirm a widget is selected in the dropdown.
- If the widget is not listed, confirm the Customer Portal brand matches the widget’s brand context in Admin > Chat > Live Chat.
Custom JS loads but the widget does not render
- Verify the script URL is correct: https://{{yourdomain}}/chatwidget-api/widget/v1/{{chatwidgetId}}
- Verify {{chatwidgetId}} is copied correctly from the widget URL.
Cannot edit portal settings or add the widget
Confirm the admin user has Manage Settings permission enabled in the admin module.

Frequently Asked Questions

What do I need before embedding a Live Chat widget in the Customer Portal?
You need a configured Live Chat widget in Admin > Chat > Live Chat and permission to manage portal settings (Manage Settings). AI Agent settings are required only if AI responses are used.
What is the fastest way to add Live Chat to the Customer Portal?
Use Admin > Customer Portal > General and enable Automatically embed chat widget in the customer portal, then select the widget from the dropdown.
Where do I paste the Custom JS code for the Customer Portal?
Paste the JavaScript in Admin > Customer Portal > Customization in the Custom JS section. See: How to Configure Customer Portal Settings
Where can I find the widget ID required for Custom JS?
Go to Admin > Chat > Live Chat, open the widget, and copy the ID from the URL.
Does automatic embedding support authenticating logged-in portal users?
Yes. Enable Enable chat widget authentication in Admin > Customer Portal > General to automatically authenticate logged-in users without additional configuration.
Why is my Live Chat widget not showing in the dropdown during automatic embedding?
The Customer Portal configuration is brand-specific. Confirm you are editing the correct Customer Portal brand and that the Live Chat widget was created/configured for the same brand context.
Can I pre-fill customer details like email when using Custom JS?
Yes. Use window['boldChatSettings'] and set the email property (for example, from localStorage.getItem('loggedUserEmail')).
Can I use different widgets for different Customer Portal brands?
Yes. Each live chat widget can be mapped to a preferred customer portal brand. Configure automatic embedding per brand and select the widget that matches each brand’s context.

Was this article useful?

Dislike

Comments (0)