Category

How to Hide Default Web Widget Fields

Updated:

BoldDesk allows administrators to customize the Web Widget interface to align with specific ticketing workflows. By using Custom CSS and Custom JavaScript, you can control the visibility of default fields such as Subject, Phone Number, and the Information Banner, while still maintaining required ticket data.

This customization is configured directly within Admin Settings for the Web Widget.

Accessing Web Widget Customization Settings

To modify field visibility:

  1. Go to Admin
  2. Navigate to Web Widget
  3. Select your Web Widget
  4. Open Advanced Customization
  5. Use the Custom JS and Custom CSS sections

Access point.png

Hiding subject field

As the subject field is mandatory, use custom JS to prefill the value and then hide it with custom CSS. Copy and paste the following codes in the widget’s advanced customization.

Custom JS code

setTimeout(() => {
 var sub = document.querySelector('.widget-form-body-container').querySelector('.subject-field').querySelector('#subject-field');
   if (sub && sub.ej2_instances && sub.ej2_instances[0]) {
     sub.ej2_instances[0].value = 'New request';
   }
}, 2000); 

Here, the subject value is filled as ‘New request’. You can fill the subject according to your needs.

Custom CSS code

.widget-form-body-container {
  .subject-field {
     display: none !important;
  }
} 

image.png

Hiding phone number field

Copy and paste the following codes in the widget’s advanced customization section to hide the phone number field.

Custom CSS code

.widget-form-body-container {
  .phone-number-field {
   display: none !important;
  }
} 

Hiding the Information Banner in the Web Widget

In BoldDesk, you can hide the information banner displayed in the Web Widget by applying custom CSS. This is useful when you want a cleaner interface or need to remove the informational icon from the widget view.

To achieve this, navigate to AdminWeb WidgetSelect Web WidgetCustom CSS and add the following CSS snippet:

.blue-information-icon-info {
   display: none !important;
} 

Custom CSS.png

Use Cases

  • Simplified Ticket Forms: Hide unnecessary fields to reduce friction during ticket creation.
  • Standardized Ticket Subjects: Automatically assign subject values for consistent reporting and automation.
  • Optimized Customer Experience: Remove visual clutter from the Web Widget interface.
  • Workflow Alignment: Ensure only relevant fields are visible based on your support process.

Frequently Asked Questions

  1. Can the Subject field be removed without using JavaScript in BoldDesk?
    No. The Subject field is mandatory in BoldDesk. It must be pre-filled using Custom JS before it can be hidden with CSS.

  2. Will hiding fields affect ticket creation in BoldDesk?
    No. As long as required fields (like Subject) are programmatically populated, ticket creation will continue to function normally.

  3. Is there a built-in toggle in Admin Settings to disable default Web Widget fields?
    No. BoldDesk does not provide native toggles for hiding default fields. This customization is only possible through Custom CSS and JS.

  4. Does hiding the information banner impact any functionality?
    No. The information banner is purely visual, and hiding it does not affect ticket submission or system workflows.

Related Articles

  1. How to Embed BoldDesk Web Widgets in Multiple Languages Using Language Codes
  2. Embedding Web Widgets in BoldDesk Customer Portal Using Custom JS
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