How to Embed a Webform into the BoldDesk Customer Portal

BoldDesk allows administrators to customize a Webform in the Customer Portal by adding Custom JS. In this case, the customization loads a BoldDesk Webform as a floating widget across Customer Portal pages. The script places the form in a fixed position and keeps it visible as users move between portal pages.

Prerequisites

Before proceeding, ensure the following:

Your role includes the permission to Manage settings.
The BoldDesk Webform you want to display is already created.
You have the Webform URL that will be used in the script.

Script to Show a Webform as a Floating Widget in the Customer Portal

Use the following script to load a BoldDesk Webform in the Customer Portal as a floating widget.

(function () {
  const WIDGET_WRAP_ID = "bd-feedback-wrap";
  const SCRIPT_ID = "bd-feedback-embed-script";
  const IFRAME_ID = "bdfeedbackwidgetframe";

  const IFRAME_SRC =
    "https://<your-domain>.bolddesk.com/webform/<webform-id>/<webform-slug>";
  const SCRIPT_SRC =
    "https://<your-domain>.bolddesk.com/webform/embedcode";

  function ensureWidget() {
    // 1) Ensure wrapper exists (this is your persistent container)
    let wrap = document.getElementById(WIDGET_WRAP_ID);
    if (!wrap) {
      wrap = document.createElement("div");
      wrap.id = WIDGET_WRAP_ID;

      // Fixed placement so it appears across the portal
      wrap.style.position = "fixed";
      wrap.style.right = "16px";
      wrap.style.bottom = "60px";
      wrap.style.width = "360px";
      wrap.style.maxWidth = "calc(100vw - 32px)";
      wrap.style.zIndex = "999999";
      wrap.style.borderRadius = "12px";
      wrap.style.overflow = "hidden";
      wrap.style.boxShadow = "0 10px 30px rgba(0,0,0,.2)";
      wrap.style.background = "#fff";

      document.body.appendChild(wrap);
    }

    // 2) Ensure embed script is loaded (only once)
    if (!document.getElementById(SCRIPT_ID)) {
      const s = document.createElement("script");
      s.id = SCRIPT_ID;
      s.src = SCRIPT_SRC;
      s.type = "application/javascript";
      s.async = true;
      s.defer = true;
      (document.head || document.documentElement).appendChild(s);
    }

    // 3) Ensure iframe exists inside wrapper (only once)
    if (!document.getElementById(IFRAME_ID)) {
      const iframe = document.createElement("iframe");
      iframe.id = IFRAME_ID;
      iframe.className = "bolddeskwidgetform";
      iframe.src = IFRAME_SRC;
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("border", "0");
      iframe.setAttribute("allowtransparency", "false");

      iframe.style.width = "100%";
      iframe.style.height = "700px";
      iframe.style.border = "0";
      iframe.style.display = "block";

      wrap.appendChild(iframe);
    }
  }

  // Run once when ready
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", ensureWidget);
  } else {
    ensureWidget();
  }

  // Re-run after SPA route changes (common in portals)
  const _pushState = history.pushState;
  history.pushState = function () {
    _pushState.apply(this, arguments);
    setTimeout(ensureWidget, 50);
  };
  window.addEventListener("popstate", function () {
    setTimeout(ensureWidget, 50);
  });

  // Also re-run if the portal re-renders DOM
  const mo = new MutationObserver(function () {
    // If wrapper/iframe got removed by a re-render, restore it
    if (!document.getElementById(WIDGET_WRAP_ID) || !document.getElementById(IFRAME_ID)) {
      ensureWidget();
    }
  });
  mo.observe(document.documentElement, { childList: true, subtree: true });
})();

Webform details used in the script

The script uses two Webform-related values:

IFRAME_SRC → the Webform URL that will be shown in the Customer Portal
SCRIPT_SRC → the BoldDesk Webform embed script URL

Pasting the Custom JS code

To learn where to paste the Custom JS code, explore How to Customize the BoldDesk Customer Portal.

After pasting the Custom JS code, update the following values in the code to match your Webform:

IFRAME_SRC — Use the URL of the Webform that you want to display.
SCRIPT_SRC — Use the Webform embed script URL from the same BoldDesk domain.

Click Update to save the customization.

Where to find the required Webform details used in the script

You can copy both the Webform URL and the embed script URL from the Webform’s Embed Code section.

Go to Admin → Web Forms.
Open the Webform you want to embed.
Scroll to the Embed Code section.
In the embed code:
- copy the script src value and use it as SCRIPT_SRC
  
  $SRC\_script.png$
- copy the iframe src value and use it as IFRAME_SRC
  
  $Iframe\_SRC.png$

Values to copy into the script

SCRIPT_SRC → https://<your-domain>.bolddesk.com/webform/embedcode
IFRAME_SRC → https://<your-domain>.bolddesk.com/webform/<webform-id>/<webform-slug>

How to Customize the Embedded Webform Script

1. Show a different Webform

To use a different Webform, update IFRAME_SRC:

const IFRAME_SRC =
  "https://<your-domain>.bolddesk.com/webform/<new-webform-id>/<new-webform-slug>";

This is the main line you change when switching to another Webform.

2. Keep the domain consistent

If the BoldDesk account/domain changed

Update both:

const IFRAME_SRC =
  "https://<new-domain>.bolddesk.com/webform/<new-webform-id>/<new-webform-slug>";

const SCRIPT_SRC =
  "https://<new-domain>.bolddesk.com/webform/embedcode";

Use the same BoldDesk domain in both SCRIPT_SRC and IFRAME_SRC.

3. Change the Webform position

These lines control where the Webform appears on the page:

wrap.style.right = "16px";
wrap.style.bottom = "60px";

Examples:

move it to the left side by replacing right with left
raise it above a footer by increasing the bottom value

4. Change the Webform size

Webform width:

wrap.style.width = "360px";

Webform height:

iframe.style.height = "700px";

Increase the height if the Webform contains more fields or needs more space.

Verify the Webform is working

After saving the Customer Portal customization:

Open the Customer Portal in an incognito/private window.
Confirm the Webform appears at the bottom-right of the portal.
Move between different portal pages.
Confirm the Webform remains visible across navigation.

Troubleshooting Common Errors

The Webform does not appear in the customer portal after customization
1. Confirm the script was added under Admin → Customer Portal → Customization → Custom JS.
2. Refresh the Customer Portal page or clear browser cache.
3. Check whether the Webform URL in IFRAME_SRC is correct.
The Webform appears in the customer portal, but the form is blank
- Open the URL used in IFRAME_SRC directly in a browser tab.
- Confirm the URL uses the correct BoldDesk domain and Webform path.
The Webform disappears after moving to another portal page in the Customer portal
The script already restores the Webform after portal navigation and page refreshes.
If the portal still removes the Webform:
- increase the restore delay in:
  setTimeout(ensureWidget, 50);
- for example, change 50 to 250

Frequently Asked Questions

1. Can I show a BoldDesk Webform as a floating widget in the Customer Portal?
Yes. You can display a BoldDesk Webform as a floating widget in the Customer Portal by adding the provided Custom JS in Admin → Customer Portal → Customization → Advanced Customization → Custom JS.

2. What do I need before embedding a BoldDesk Webform in the Customer Portal?
Before you add the Webform as a floating widget, make sure that:

your role includes the Manage settings permission,
the Webform is already created, and
you have the correct Webform URL to use in the script.

3. Where do I get the IFRAME_SRC and SCRIPT_SRC values for the script used to show a Webform as a floating widget in the Customer Portal?
You can copy both values from the Webform’s Embed Code section:

IFRAME_SRC → the Webform URL
SCRIPT_SRC → the BoldDesk Webform embed script URL
To find them:
Admin → Web Forms → Open the Webform → Embed Code

4. Which part of the script do I update when I want to show a different Webform?
To display a different Webform, update the IFRAME_SRC value in the script.
If the Webform is from a different BoldDesk domain, update both:

IFRAME_SRC
SCRIPT_SRC
Use the same BoldDesk domain in both values.

5. Will the floating Webform remain visible when users move between Customer Portal pages?
Yes. The script to show a Webform as a floating widget in the Customer Portal is designed to keep the floating Webform visible across Customer Portal navigation by restoring it when the portal refreshes or reloads page content.

Was this article useful?

Dislike

Comments (0)