BoldDesk enables administrators to enhance the Live Chat widget launcher using Custom JavaScript, including the ability to make the launcher draggable on the website. By default, the launcher remains fixed in its configured position (for example, bottom-right). However, when it overlaps important page elements, this customization allows visitors to reposition it to a more convenient location.

This approach improves usability without altering the default settings in BoldDesk.

The script works by:

• enabling drag functionality for the chat launcher button
• dynamically updating the launcher’s position as it is moved
• aligning the widget popup based on the launcher’s new position

Use Case

When to Use This Approach

Use this approach when the chat launcher overlaps important UI elements such as forms, buttons, or navigation components, and you want to give visitors the ability to reposition it without modifying the default launcher placement configured in BoldDesk.

Key Use Cases

• Prevent launcher overlap: Enable visitors to move the launcher when it covers forms, buttons, or other critical page elements, ensuring uninterrupted interaction.
• Improve page usability: Provide flexibility for users to adjust the Live Chat widget position based on their preference, without changing the default configuration in BoldDesk.
• Support different screen layouts: Ensure the launcher remains accessible and usable across various page designs and screen sizes where the default fixed position may not be ideal.

Prerequisites

Before proceeding, ensure the following:

• To make the BoldDesk Live Chat widget draggable, the agent’s role must include the permission to Manage settings.
• You know which Live Chat widget is embedded on your website, so the script is added to the correct widget.
• You are comfortable using Custom JS, because this is a front-end customization workaround.

Script to Make the BoldDesk Live Chat Launcher Draggable

Use the following script to make the BoldDesk Live Chat launcher draggable and reposition the chat popup relative to the launcher’s new location.

(function () {

  function initDraggableLauncher() {
    const host = document.getElementById("boldchat-host");
    if (!host || !host.shadowRoot) return false;

    const launcher = host.shadowRoot.getElementById("bc-launcher-btn");
    const widget = host.shadowRoot.getElementById("bc-widget");

    if (!launcher) return false;

    let isDragging = false;
    let offsetX = 0, offsetY = 0;

    launcher.style.cursor = "grab";
    launcher.style.position = "fixed";

    function onMouseDown(e) {
      if (e.button !== 0) return; // Only LEFT button

      isDragging = true;
      launcher.style.cursor = "grabbing";

      const rect = launcher.getBoundingClientRect();
      offsetX = e.clientX - rect.left;
      offsetY = e.clientY - rect.top;

      document.addEventListener("mousemove", onMouseMove, true);
      document.addEventListener("mouseup", onMouseUp, true);

      e.preventDefault();
      e.stopPropagation();
    }

    function onMouseMove(e) {
      if (!isDragging) return;

      const x = e.clientX - offsetX;
      const y = e.clientY - offsetY;

      launcher.style.left = x + "px";
      launcher.style.top = y + "px";

      if (widget) {
        widget.style.position = "fixed";
        widget.style.left = x + "px";
        widget.style.right = "auto";

        const bottom = window.innerHeight - y + 10;
        widget.style.bottom = bottom + "px";
        widget.style.top = "auto";
      }
    }

    function onMouseUp() {
      isDragging = false;
      launcher.style.cursor = "grab";

      document.removeEventListener("mousemove", onMouseMove, true);
      document.removeEventListener("mouseup", onMouseUp, true);
    }

    launcher.addEventListener("mousedown", onMouseDown, true);

    return true;
  }

  // Re-run until widget loads
  const interval = setInterval(() => {
    if (initDraggableLauncher()) clearInterval(interval);
  }, 500);

})();

Pasting the Custom JS code

To apply this script, paste it into the Custom JS section of the relevant Live Chat widget. Use the following navigation path:

Agent Portal → Admin → Live Chat → Open the widget → Appearance → Advanced Customization → Custom JS

After pasting the script, click Update to save the widget.

Verify the Draggable Launcher After Saving

1. Open the website page where the widget is embedded.

2. Perform a hard refresh (or clear browser cache) so the latest Custom JS is loaded:

   • Windows: Ctrl + F5
   • Mac: Cmd + Shift + R

3. Verify that the chat launcher can be dragged to a new position on the page.

4. Click the launcher to open the chat and confirm that the widget popup still opens relative to the launcher’s new position.

   
   
   

Troubleshooting Common Errors

1. Launcher opens chat instead of dragging

This can happen if the launcher is clicked quickly instead of dragged.

What to do: Click and hold the launcher, then drag it deliberately to a new position.

2. Widget popup opens in the wrong position after dragging

The script repositions the popup based on the launcher’s new location. On some layouts, the popup may not align exactly as expected.

What to do:

• Drag the launcher to another location and test again.
• If needed, review the positioning behaviour before using the customisation broadly in production.

3. Nothing changes after saving the script

1. Confirm that the script was pasted into:
   Appearance → Advanced Customization → Custom JS
2. Verify that the widget updated successfully.
3. Test the widget in an incognito/private window to rule out caching issues.

Frequently Asked Questions

1. Can I make the BoldDesk Live Chat launcher draggable on my website?
   Yes. You can make the BoldDesk Live Chat launcher draggable by adding the provided Custom JS to the widget’s Appearance → Advanced Customization → Custom JS section.

2. Does making the BoldDesk Live Chat launcher draggable change the default launcher position saved in BoldDesk?
   No. This customisation does not change the default launcher position configured in BoldDesk. It only changes the launcher behaviour for visitors when the widget loads on the page.

3. Does the Custom JS also move the BoldDesk Live Chat popup after the launcher is dragged?
   Yes. The provided Custom JS repositions the BoldDesk Live Chat popup based on the launcher’s new location so that the popup opens relative to where the launcher was moved.

4. Do I need to add the draggable launcher script to each BoldDesk Live Chat widget separately?
   Yes. Custom JS is saved per widget, so if your website uses more than one BoldDesk Live Chat widget, you must add the script to each widget individually.

Related Articles

1. How to Set Up a Live Chat Widget in BoldDesk
2. How to Install BoldDesk Live Chat
3. Customizing the BoldDesk Customer Portal