Category

How to Add Notes Below Subject and Description in the Customer Portal

Updated:

You can improve the ticket submission experience in BoldDesk by displaying helpful notes below the Subject and Description fields. This is achieved using custom JavaScript and CSS in the Customer Portal settings, guiding users to provide clearer and more detailed information.

Script for Adding Notes Below Subject and Description in the Customer Portal

Use the following script to Add Notes Below Subject and Description in the Customer Portal:

// Subject note
const subNote = document.createElement('span');
subNote.textContent = 'Please provide a clear title.';
subNote.className = 'note-style';
document.querySelector('#subject_wrapper').after(subNote);

// Description note
const desNote = document.createElement('span');
desNote.textContent = 'Please provide detailed information.';
desNote.className = 'note-style';
document.querySelector('#descriptions').after(desNote); 

Pasting the Custom JS Code

To apply this script, paste it in the Custom JS section of your portal customization settings. Learn more on Customizing the BoldDesk Customer Portal.

Before Customization

Before Customization.png

After Adding Notes Below Subject and Description in the Customer Portal

Subject and Description Fields.png

Script for Styling Notes Below Subject and Description in the Customer Portal

Apply styling for better visibility using the CSS code below:

.note-style {
    display: block;
    margin-top: 6px !important;
    color: #344054;
    font-size: 14px;
    font-weight: 500;
    line-height: 80px;
}

Before Styling Customization

Subject and Description Fields.png


After Styling Customization

Styling.png

Outcome

  • Displays helpful instructions below input fields
  • Improves ticket clarity and completeness
  • Reduces follow-up queries from agents

Troubleshooting

Notes are not visible

  • Ensure the JavaScript is added in the correct Custom JS section
  • Verify the selectors (#subject_wrapper, #descriptions) are correct

Styling not applied

  • Confirm the CSS is added in the Custom CSS section
  • Clear browser cache and refresh the page

Errors in console

  • Check for JavaScript syntax errors
  • Ensure no conflicting custom scripts are present

Notes appear multiple times
This may happen due to repeated script execution—ensure the script runs only once on page load

Frequently Asked Questions

  1. Where will the notes appear?
    They will be displayed directly below the Subject and Description fields in the Customer Portal ticket form.

  2. Can I customize the note text?
    Yes, you can update the text inside the JavaScript to suit your requirements.

  3. Will this affect existing tickets?
    No, this applies only to the ticket creation form in the Customer Portal.

  4. Can I style the notes differently?
    Yes, you can modify the CSS (font, color, spacing) as needed.

Related Articles

  1. Enhancing the Live Chat Widget with Custom CSS and JavaScript
  2. Customizing the BoldDesk Customer Portal
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