This component allows you to seamlessly integrate an entire document creation and signing form anywhere on your website or application. It supports JS+HTML, Vue, Angular and React.
<script src="https://cdn.docuseal.co/js/builder.js"></script>
<docuseal-builder
data-token="<%= JWT.encode({
user_email: 'admin_user@example.com',
integration_email: 'signer@example.com',
name: 'Integration W-9 Test Form',
document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
}, 'API_KEY') %>">
</docuseal-builder>
data-token required String
JSON Web Token (JWT HS256) with a payload signed using the API key.
Ensure that the JWT token is generated on the backend to prevent unauthorized access to your documents.
Child parameters
user_email required String
Email of the owner of the API signing key - admin user email.
integration_email optional String
Email of the user to create a template for.
Example: signer@example.com
template_id optional Number
ID of the template to open in the form builder. Optional when `document_urls` are specified.
external_id optional String
Your application-specific unique string key to identify this template within your app.
folder_name optional String
The folder name in which the template should be created.
document_urls optional Array
An Array of URLs with PDF files to open in the form builder. Optional when `template_id` is specified.
Example: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf']
name optional String
New template name when creating a template with document_urls specified.
Example: Integration W-9 Test Form
data-host optional String
DocuSeal host domain name. Only use this attribute if you are using the on-premises DocuSeal installation.
Example: yourdomain.com
data-roles optional String
Comma separated submitter role names to be used by default in the form.
Example: Company,Customer
data-fields optional String
A list of default custom fields with name and type to be added to the document. Should contain an array of field properties as a JSON encoded string.
Example: [{ "name": "FIELD_1", "type": "date" }]
data-required-fields optional String
A list of required default custom fields with name and type that should be added to the document. Should contain an array of field properties as a JSON encoded string.
Example: [{ "name": "FIELD_1", "type": "date" }]
data-field-types optional String
Comma separated field type names to be used in the form builder. All field types are used by default.
Example: text,date
data-draw-field-type optional String
Field type to be used by default with the field drawing tool.
Default: text
Example: signature
data-custom-button-title optional String
Custom button title. This button will be displayed on the top right corner of the form builder.
data-custom-button-url optional String
Custom button URL. Only absolute URLs are supported.
data-with-title optional Boolean
Set `false` to remove document title from the builder.
Default: true
data-with-send-button optional Boolean
Show the "Recipients" button.
Default: true
data-with-upload-button optional Boolean
Show the "Upload" button.
Default: true
data-with-sign-yourself-button optional Boolean
Show the "Sign Yourself" button.
Default: true
data-with-documents-list optional Boolean
Set `false` to now show the documents list on the left. Documents list is displayed by default.
Default: true
data-with-fields-list optional Boolean
Set `false` to now show the fields list on the right. Fields list is displayed by default.
Default: true
data-preview optional Boolean
Show template in preview mode without ability to edit it.
data-only-defined-fields optional Boolean
Allow to add fields only defined in the `data-fields` attribute.
data-autosave optional Boolean
Set `false` to disable form changes autosaving.
Default: true
data-i18n optional String
JSON encoded string that contains i18n keys to replace the default UI text with custom values. See template_builder/i18n.js for available i18n keys.
Default: {}
data-language optional String
UI language, 'en', 'es', 'de', 'fr', 'pt', 'he', 'ar' languages are available.
Default: en
data-background-color optional String
The form builder background color. Only HEX color codes are supported.
Example: #ffffff
data-custom-css optional String
Custom CSS styles to be applied to the form builder.
Example: #sign_yourself_button { background-color: #FFA500; }
load optional Event type
Custom event to be triggered on loading the form builder template data.
Example: document.querySelector('docuseal-builder').addEventListener('load', (e) => e.detail)
upload optional Event type
Custom event to be triggered on uploading a document to the template.
Example: document.querySelector('docuseal-builder').addEventListener('upload', (e) => e.detail)
send optional Event type
Custom event to be triggered on sending documents for signature to recipients.
Example: document.querySelector('docuseal-builder').addEventListener('send', (e) => e.detail)
change optional Event type
Custom event to be triggered every time a change to the template is made.
Example: document.querySelector('docuseal-builder').addEventListener('change', (e) => e.detail)
save optional Event type
Custom event to be triggered on saving changes of the template form.
Example: document.querySelector('docuseal-builder').addEventListener('save', (e) => e.detail)