[Feature Request] Ability 'docuseal-form' being customized from outside

[afomchenkov]

Context

Vue.js application, using '@docuseal/vue' wrapper, DocusealForm, to render the submission embedding.

It appears that the wrapper creates a Web Component docuseal-form (the same approach for other libs/frameworks), it's possible to pass as a param custom CSS via data-custom-css, but there is no proper open way to add custom DOM elements inside the form. The WebComponent creates a shadow root (open), so technically it possible to do something like:

var form = document.querySelector('docuseal-form');
form.shadowRoot.appendChild(
  document.createElement('button')
);

But this does not seem to be the best choice/idea.

Please recommend any way to customize the submission form inner part if I'm missing something.

Thank you.

[omohokcoj]

@afomchenkov there are no easy ways to customize inner DOM of the embedded form since Vue uses virtual DOM and manipulating Vue-rendered DOM can break embedding

[afomchenkov]

Any idea for exposing API from inside WebComponent for injecting custom elements like Portal, or root floating absolute element to be able to add custom labels/hints/etc.? Could be like a customizable layer above the main canvas, I believe the source code of the Web Component itself is not open source?

[omohokcoj]

@afomchenkov could you please elaborate a bit more exactly on which part you'd like to extend or customize? This will help us find the best solution to the problem, whether that involves adding DOM elements or something else.

[afomchenkov]

Hey @omohokcoj, thanks, sure, the "simple" idea is to provide the API to access/hook into the submission form so that it could be possible to customize it with other dynamic elements from outside: hints, buttons, labels, notifications, timers, etc.

As I can see the "docuseal-form" WebComponent definition is not in a public repo, maybe somewhere else but I could not find it. Anyways, just from a quick look from the source code repo it appears that there is the definition of “submission-form” and its structural parts, which is in its turn a core and low level definition for "docuseal-form".

JS/Vue form src (“submission-form” Web Component):

https://github.com/docusealco/docuseal/blob/master/app/javascript/form.js#L25
https://github.com/docusealco/docuseal/blob/master/app/javascript/submission_form/form.vue#L739

It defines different parts like:
id="form_container” - signature request form container
https://github.com/docusealco/docuseal/blob/master/app/javascript/submission_form/form.vue#L176

id="steps_form” - signing form container
https://github.com/docusealco/docuseal/blob/master/app/javascript/submission_form/form.vue#L201

id="submit_form_button”
https://github.com/docusealco/docuseal/blob/master/app/javascript/submission_form/form.vue#L592

and component parts like signature form etc.:
https://github.com/docusealco/docuseal/blob/master/app/javascript/submission_form/signature_step.vue#L199

It also looks like for a free version there is a stub in the controller to render "docuseal-form", embed controller:
https://github.com/docusealco/docuseal/blob/master/app/controllers/embed_scripts_controller.rb#L3


By building and starting the app locally, only “submission-form” is available, the controller returns the form.js stub (screenshot below):

bundle install

RAILS_ENV=production NODE_ENV=production ./bin/shakapacker

It would be nice to have the injections of elements from host applications, maybe like slots:

<docuseal-form src="...">

  <div slot="header-actions">
    <button>Help</button>
  </div>

  <div slot="sidebar">
    Custom sidebar
  </div>

  <div slot="footer">
    Need assistance? Contact support.
  </div>

</docuseal-form>

Or maybe some Teleport solutions like:

<DocusealForm @init="ready=true" />

<Teleport to="#my-toolbar">
  <MyToolbar />
</Teleport>

And docuseal exposes robust anchors/placeholders: <div id="my-toolbar"></div>

As the Docuseal Form itself is not an Iframe, this should be fairly possible, I understand that all structural parts are organized that way for being re-used in other apps and wrapped by some private wrappers or for easy customization, but there is not too much flexibility now in how the submission form can be extended.

At the moment the only way to append the elements is via DOM selectors, via existing IDs for example: 'form_container', 'steps_form', 'submit_form_button', or by other means like referencing shadow root, which is not too handy, as we are not sure how often, if ever, the elements inside the web component change or change the structural parts and IDs, Selectors etc.
Feel free to share your ideas or concerns, or if it's open for proposals in code for customization.

Thanks a lot!

---

---

---

[omohokcoj]

@afomchenkov it's possible to use field description for custom hints: https://www.docuseal.com/resources/add-description-to-fields
Also it's possible to place footer/header elements outside of the embedded component.

[afomchenkov]

Yep, but this is not the same, what if I want to add dynamic text from my app regarding a certain user behavior, let's say based on the role, change/append/prepend some dynamic text/elements inside the form, highlight the info etc.

Also a side question, right now it appears that all the translations come in the same bundle: https://cdn.docuseal.com/js/form.js
Could it be more convenient and less code to already have the internalized builds like (without all translations in the same script):

• https://cdn.docuseal.com/js/form.js - default one
• https://cdn.docuseal.com/js/de/form.js -German
• https://cdn.docuseal.com/js/es/form.js - Spanish
• https://cdn.docuseal.com/js/ch/form.js - Chinese
• etc.