By default, an embedded BoldDesk web form appears in a fixed position within the Customer Portal. If you want users to move the form to a more convenient location on the page, you can add a JavaScript snippet that enables drag-and-drop functionality.

This article explains how to make an already embedded BoldDesk web form draggable and how to customize the draggable header.

Prerequisites

Before making the embedded web form draggable, verify the following:

• The web form is already created and published in BoldDesk. Explore BoldDesk Web Forms: Admin Guide for Creation, Embedding, and Tracking
• The web form is already embedded in the Customer Portal. Learn more on How to Embed a Webform into the BoldDesk Customer Portal.

Script to Make a Webform draggable in the Customer Portal

To make the embedded web form draggable, add the following JavaScript code after the existing web form embed code in the Customer Portal Custom JS section.

(function () {
  const WIDGET_WRAP_ID = "bd-feedback-wrap";
  const WIDGET_HEADER_ID = "bd-feedback-drag-header";

  function makeDraggable(wrap, handle) {
    if (!wrap || !handle || wrap.dataset.draggableInitialized === "true") return;
    wrap.dataset.draggableInitialized = "true";

    let isDragging = false;
    let startX = 0;
    let startY = 0;
    let startLeft = 0;
    let startTop = 0;

    handle.addEventListener("mousedown", function (e) {
      isDragging = true;

      const rect = wrap.getBoundingClientRect();
      startX = e.clientX;
      startY = e.clientY;
      startLeft = rect.left;
      startTop = rect.top;

      wrap.style.left = startLeft + "px";
      wrap.style.top = startTop + "px";
      wrap.style.right = "auto";
      wrap.style.bottom = "auto";

      document.body.style.userSelect = "none";
      handle.style.cursor = "grabbing";

      e.preventDefault();
    });

    document.addEventListener("mousemove", function (e) {
      if (!isDragging) return;

      let newLeft = startLeft + e.clientX - startX;
      let newTop = startTop + e.clientY - startY;

      newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - wrap.offsetWidth));
      newTop = Math.max(0, Math.min(newTop, window.innerHeight - wrap.offsetHeight));

      wrap.style.left = newLeft + "px";
      wrap.style.top = newTop + "px";
    });

    document.addEventListener("mouseup", function () {
      if (!isDragging) return;

      isDragging = false;
      document.body.style.userSelect = "";
      handle.style.cursor = "grab";
    });
  }

  function addDragHeader() {
    const wrap = document.getElementById(WIDGET_WRAP_ID);
    if (!wrap) return;

    let header = document.getElementById(WIDGET_HEADER_ID);

    if (!header) {
      header = document.createElement("div");
      header.id = WIDGET_HEADER_ID;
      header.innerHTML = '<span>Feedback Form</span><span style="font-size:14px;opacity:.7;">Drag</span>';

      header.style.cssText = `
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        background: #4f1fde;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        cursor: grab;
        user-select: none;
      `;

      wrap.insertBefore(header, wrap.firstChild);
    }

    makeDraggable(wrap, header);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", addDragHeader);
  } else {
    addDragHeader();
  }
})();

Add the Script to the Customer Portal

After embedding the web form, add the draggable script as follows: learn more on How to Embed a Webform into the BoldDesk Customer Portal.

To place the draggable code:

1. Go to Admin > Customer Portal.
2. Open the Customisation tab.
3. In the Advanced Customisation section, find Custom JS.
4. Click the edit icon for Custom JS.
5. In the Update Custom JS window, scroll to the end of the existing web form embed code.
6. Paste the draggable code below the existing web form embed code.
7. Click Update.
8. Click Update on the Customer Portal customisation page to save the changes.

Customize the Draggable Web Form

You can update the draggable web form code to change the text displayed on the top bar or adjust the top bar colour.

Change the Top Bar Text

The top bar displays the form name and the drag label. To change this text, update the following line in the code:

header.innerHTML = '<span>Feedback Form</span><span style="font-size:14px;opacity:.7;">Drag</span>';

For example, to show Contact Support instead of Feedback Form, update it as follows:

header.innerHTML = '<span>Contact Support</span><span style="font-size:14px;opacity:.7;">Drag</span>';

Change the Top Bar Colour

The top bar colour is controlled by the background value in the code.

To change the colour, update this line:

background: #4f1fde;

For example, to use a blue colour, update it as follows:

background: #2f6fed;

After making changes to the script, click Update to save the custom JavaScript, then update the Customer Portal customisation page to apply the changes.

Common Customisations

Verify the Configuration

After saving your changes, verify that the web form functions correctly.

1. Open the Customer Portal.
2. Confirm that the embedded web form appears.
3. Drag the header bar to move the form.
4. Navigate to different Customer Portal pages.
5. Verify that the web form remains available.
6. Submit a test entry to confirm that form functionality is unaffected.

Frequently Asked Questions

1. Can this script embed the web form in the Customer Portal?
   No. The script only adds drag-and-drop functionality. The web form must already be embedded before you add this script.

2. Where should I place the draggable script?
   Add it directly below the web form embed code in the Custom JS section of the Customer Portal.

3. What happens if I add the script before the embed code?
   The draggable header may not appear because the script cannot find the web form container during initialization.

4. How do users move the web form?
   Users can drag the header bar added above the form. The form itself remains fully interactive for entering information and submitting responses.

5. Can I customize the header?
   Yes. You can change the header text, labels, colors, dimensions, and other styling properties within the script to match your branding requirements.

6. Does the draggable functionality affect form submissions?
   No. The script only changes the form’s position on the page and does not alter form behavior or submission functionality.