How to Add a Web Widget to the Customer Portal

The Custom JS option in BoldDesk allows you to embed a widget directly into your Customer Portal. This guide explains how to:

Insert custom JavaScript code.
Locate your widget ID.
Apply advanced customization.
Resize the embedded widget using CSS.

1. Steps to Add a Widget Using Custom JS

Follow the steps below;

Navigate to Customization Settings

Go to Admin → Customer Portal → Customization.
Paste the following Custom JS code in the designated section:

(function () {
    var v = document.createElement('script');
    v.src = "https://{{yourdomain}}/widget/{{widgetId}}";
    v.type = "text/javascript";
    document.head.append(v);
})();

You can add your domain in place of {{yourdomain}}. For example: support.bolddesk.com
Replace the placeholder with the widget ID in the code.

2. How to Find the Widget ID

To locate your widget ID:

Navigate to Admin → Web Widgets.
Click the widget you want to add.
Copy the widget ID from the URL.

3. Where to Paste the Custom JS Code

Paste the code under Advanced Customization in the Customer Portal settings. To learn where to paste the above custom JS code, refer to Advanced customization.

4. Preview After Customization

Once the code is added, the widget will appear on your Customer Portal interface.

5. How to Resize the Embedded Widget

To adjust widget dimensions:

Go to Admin → Customer Portal → Customization → Custom CSS.

Add the following CSS:

.widget-popup-iframe-container {
  width: 600px !important;
  max-height: 800px !important;
  min-height: 700px !important;
}

You can modify width, max-height, and min-height values based on your layout requirements. For detailed guidance on adding custom CSS, please check the GIF below.

Resize Widget Using CSS.gif

Frequently Asked Questions (FAQs)

Q1: Can I add multiple web widgets using Custom JS?
No, you can only add one web widget using the Custom JS.

Q2: Will resizing affect widget functionality?
No, resizing only changes the display dimensions, not the widget’s core functionality.

Q3: Where do I find advanced customization options?
Under Admin → Customer Portal → Customization → Advanced Customization.

Was this article useful?

Dislike

Comments (0)