Create a custom toolGroupButton in header like quick tools

WebViewer Version:

Do you have an issue with a specific file(s)?
Can you reproduce using one of our samples or online demos?
Are you using the WebViewer server?
Does the issue only happen on certain browsers?
Is your issue related to a front-end framework?
Is your issue related to annotations?

Please give a brief summary of your issue:
(Think of this as an email subject)

I am trying to create a custom tool group in the header and disabling the other (View, Annotations, etc).
I want to add some specific tools like freeText, Add an image, etc. But I am facing a problem in the data element field. Is there any proper list of data elements with tool group names that can be helpful?

|Quick Tools|
||Free Text|
||Undo, Redo, Erase|
||Color selection|
||Add Image|
||File Attachment|
||Add Tick/Cross|
||Add Date/Calendar|

need a data-element list with the tool names of the above tools.

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:


Hi Rikochet007,

Welcome to the PDFTron Community Forum!

The closest we have to a list of data-elements was previously mentioned by the support bot: Hiding/Showing DOM elements in WebViewer UI - List of elements. Unfortunately the list isn’t exactly up-to-date, but we are working on a solution to fix this. The guide also shows how to inspect and read through the DOM to get specific tool names.

As a courtesy here are some of the requested data-element values:

  • Underline - underlineToolGroupButton
  • Highlight - highlightToolGroupButton
  • Free Text - freeTextToolGroupButton
  • Undo - undoButton
  • Redo - redoButton
  • Eraser - eraserToolButton
  • Add Image - stampToolGroupButton
  • File Attachment - fileAttachmentToolGroupButton
  • Add Tick/Cross - countToolGroupButton
  • Date/Calendar - You can use Rubber Stamp tool and create a custom stamp to show date/time - rubberStampToolGroupButton

I may not have provided all tool groups you requested, but follow the above guide to understand how I fetched these names for any other tools you wish to hide/show.

Let me know if you have any further questions!

Best regards,
Adam Sinclair
Web Developer