Category

Creating Static Embedded BoldDesk Web Widget with Only Required Fields

Updated:

This article explains how to configure a static, embedded BoldDesk web form that creates tickets using only the fields required for your workflow. It also shows how to exclude default fields (such as the Phone Number) that are not relevant to your process. This approach is ideal when you want a clean, controlled form layout that matches an external sample form and avoids unnecessary inputs.

Use Case

In some workflows, users expect:

  • A static embedded Web Widget (not dynamic or auto-changing),
  • Only specific fields to be visible,
  • No default fields such as Phone Number, Category, Priority, or Type,
  • Tickets to be created automatically upon form submission.

BoldDesk supports this requirement through custom ticket fields and Advanced Web Form Customization.

Prerequisites

Before configuring the web form, ensure:

Step-by-Step Configuration

Create the Required Custom Ticket Fields

  1. Navigate to Admin → Ticket Fields.
  2. Create all workflow-specific fields (for example):
    • Organization
    • Reason for Contacting TJ Tours & Travels
  3. Save and add the fields to the relevant ticket form.

Configure the Web Widget

  1. Go to Channels → Web Widgets & Ai Agent.
  2. Create or edit your form.
  3. Select Contact Form with Ticket Fields as the form type and select the preferred AI Agent.
  4. Add the required default ticket form.

Hide Unnecessary Default Fields (Custom CSS)

To remove default fields that should not appear (Category, Type, Priority, Phone Number), add the following under Advanced Customization → Custom CSS:

.widget-feedback-form-container{
  .categoryId,
  .typeId,
  .priorityId,
  .phone-number-field{
     display: none !important;
  }
}

This ensures only explicitly required fields are visible to end users. You may also modify the field names in the forms and fields to your preferred titles. For example, you can change “category” to “departments.”

Renaming Field Labels (Custom JavaScript)

If you need to rename a default field label (for example, changing “How can we help?” to “Message”), add the following under Advanced Customization → Custom JS:

var container = document.querySelector('.widget-feedback-form-container');

var helpLabel = container && (
  container.querySelector('.product-header.description-field .custom-field-label[data-title="How can we help?"]') ||
  Array.from(container.querySelectorAll('.custom-field-label'))
    .find(function (el) { 
      return el.textContent.trim().startsWith('How can we help?'); 
    })
);

if (helpLabel) {
  helpLabel.textContent = 'Message ';
  helpLabel.setAttribute('data-title', 'Message');
}

Check out this visual for more insights.

Configuring Web Widget and AI Agent CSS & JSS.gif

For a complete walkthrough on adding Custom CSS and JS, explore Advanced Settings for Configuring Contact Us Web Form. This script updates the label without impacting ticket creation or field mapping.
For guidance on embedding your web form in the customer portal, explore Embedding Web Widgets in BoldDesk Customer Portal Using Custom JS.

Final Result

After completing these steps:

  • The web widget is fully static and embedded.
  • Only the required workflow fields are displayed.
  • Unwanted default fields are hidden.
  • Ticket submissions behave normally and are created in BoldDesk.

Troubleshooting

A hidden field is still visible in the widget

  • Confirm the CSS was added under Advanced Customization → Custom CSS for the correct web widget.
  • Confirm the selectors match the current widget markup (.categoryId, .typeId, .priorityId, .phone-number-field).

Ticket routing or automation behaves unexpectedly after hiding fields

  • Check whether any automation rules depend on Category, Priority, Type, or Phone Number values being supplied via the form.
  • Re-enable the field display (remove the selector from CSS) if the workflow requires the field to be user-provided.

The “How can we help?” label did not change to “Message”

  • Confirm the script was added under Advanced Customization → Custom JS.
  • If the widget UI changed, the selector targeting data-title="How can we help?" may require adjustment (source notes that UI updates can require selector changes).

Frequently Asked Questions (FAQs)

1) Can I completely remove default fields instead of hiding them?
No. Default system fields cannot be deleted, but they can be hidden safely using Custom CSS, which does not affect ticket creation.

2) Will hiding fields affect ticket routing or automation?
No. Hidden fields do not interfere with workflows unless those fields are required by an automation rule. Ensure automations do not depend on hidden inputs.

3) Can this Web Widget be embedded on any website?
Yes. Once configured, the BoldDesk web widget can be embedded on the customer portal and any external website using the provided embed code.

4) Is JavaScript required for field customization?
JavaScript is optional and only needed for label updates or advanced UI behavior. Field visibility can be managed with CSS alone.

5) What happens if BoldDesk updates the widget UI?
Custom CSS and JS rely on widget class names. If the widget UI changes in the future, minor adjustments to selectors may be required.

Related Articles

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied
Access denied
Access denied

No articles or sections found
No articles or sections found