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.com/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 String required
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.
user_email String required
Email of the owner of the API signing key - admin user email.
integration_email String
Email of the user to create a template for.
Example: signer@example.com
template_id Number
ID of the template to open in the form builder. Optional when `document_urls` are specified.
external_id String
Your application-specific unique string key to identify this template within your app.
folder_name String
The folder name in which the template should be created.
document_urls 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 String
New template name when creating a template with document_urls specified.
Example: Integration W-9 Test Form
extract_fields Boolean
Pass `false` to disable automatic PDF form fields extraction. PDF fields are automatically added by default.
data-host String
DocuSeal host domain name. Only use this attribute if you are using the on-premises DocuSeal installation or docuseal.eu Cloud.
Example: yourdomain.com
data-roles String
Comma separated submitter role names to be used by default in the form.
Example: Company,Customer
data-fields String
A list of default custom fields with `name` to be added to the document. Should contain an array of field properties as a JSON encoded string.
Example: [{ "name": "FIELD_1", "type": "date", "role": "Customer", "default_value": "2021-01-01" }]
Child parameters
name String required
Field name.
type String
Field type.
Possible values: heading, text, signature, initials, date, number, image, checkbox, multiple, file, radio, select, cells, stamp, payment, phone, verification, kba, strikethrough
role String
Submitter role name for the field.
default_value String
Default value of the field.
title String
Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown.
description String
Field description displayed on the signing form. Supports Markdown.
width Number
Field width in pixels.
height Number
Field height in pixels.
format String
Field format. Depends on the field type.
options Array
Field options. Required for the select field type.
validation Object
Field validation rules.
pattern String
Field pattern.
Example: ^[0-9]{5}$
message String
Validation error message.
data-submitters String
A list of default submitters with `role` name to be added to the document. Should contain an array of field properties as a JSON encoded string.
Example: [{ "email": "example@company.com", "name": "John Doe", "phone": "+1234567890", "role": "Customer" }]
Child parameters
email String
Submitter email.
role String required
Submitter role name.
name String
Submitter name.
phone String
Submitter phone number, formatted according to the E.164 standard.
data-required-fields String
A list of required default custom fields with `name` 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", "role": "Customer", "default_value": "2021-01-01" }]
Child parameters
name String required
Field name.
type String
Field type.
Possible values: heading, text, signature, initials, date, number, image, checkbox, multiple, file, radio, select, cells, stamp, payment, phone, verification, kba, strikethrough
role String
Submitter role name for the field.
default_value String
Default value of the field.
title String
Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown.
description String
Field description displayed on the signing form. Supports Markdown.
width Number
Field width in pixels.
height Number
Field height in pixels.
format String
Field format. Depends on the field type.
options Array
Field options. Required for the select field type.
validation Object
Field validation rules.
pattern String
Field pattern.
Example: ^[0-9]{5}$
message String
Validation error message.
data-field-types String
Comma separated field type names to be used in the form builder. All field types are used by default.
Possible values: heading, text, signature, initials, date, datenow, number, image, checkbox, multiple, file, radio, select, cells, stamp, payment, phone, verification, kba, strikethrough
Example: text,date
data-date-formats String
Comma separated list of formats to be used for the date field. Formats may include date ('YYYY', 'MM', 'DD'), time ('HH', 'hh', 'mm', 'ss', 'A') and timezone ('z') parts. The first format in the list is used as the default.
Example: MM/DD/YYYY,YYYY-MM-DD HH:mm:ss z
data-draw-field-type String
Field type to be used by default with the field drawing tool.
Default: text
Example: signature
Custom button title. This button will be displayed on the top right corner of the form builder.
Custom button URL. Only absolute URLs are supported.
data-with-title Boolean
Set `false` to remove document title from the builder.
Default: true
email-subject String
Email subject for the signature request. Required if `email-body` specified
email-body String
Email body for the signature request. Required if `email-subject` specified
Show the "Recipients" button.
Default: true
Show the "Upload" button.
Default: true
Show the "Add Blank Page" button.
Default: false
Show the "Sign Yourself" button.
Default: true
data-with-documents-list Boolean
Set `false` to not show the documents list on the left. Documents list is displayed by default.
Default: true
data-with-dynamic-documents Boolean
Set `true` to allow converting DOCX files to editable dynamic documents.
Default: false
data-with-fields-list Boolean
Set `false` to not show the fields list on the right. Fields list is displayed by default.
Default: true
data-with-fields-detection Boolean
Display a button to automatically detect and add fields to the document with AI.
Default: false
data-with-custom-fields-tab Boolean
Set `true` to display a separate "Custom" fields tab in the fields list. Custom fields can be configured using the `data-fields` or `data-required-fields` attribute.
Default: false
data-with-field-placeholder Boolean
Set `true` to display field name placeholders instead of the field type icons.
Default: false
data-with-signature-id Boolean
Set to `true` to enable Signature ID by default for newly added fields. If set to `false`, the Signature ID toggle will be displayed under field settings, with the Signature ID turned off by default.
data-preview Boolean
Show template in preview mode without ability to edit it.
Default: false
data-input-mode Boolean
Open template in data input mode to prefill fields with default values.
Default: false
data-only-defined-fields Boolean
Allow to add fields only defined in the `data-fields` attribute.
Default: false
data-autosave Boolean
Set `false` to disable form changes autosaving.
Default: true
data-i18n 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 String
UI language, 'en', 'es', 'de', 'fr', 'pt', 'nl', 'he', 'ar' languages are available.
Default: en
data-background-color String
The form builder background color. Only HEX color codes are supported.
Example: #ffffff
data-custom-css String
Custom CSS styles to be applied to the form builder.
Example: #sign_yourself_button { background-color: #FFA500; }
load Event
Custom event to be triggered on loading the form builder template data.
Example: document.querySelector('docuseal-builder').addEventListener('load', (e) => e.detail)
upload Event
Custom event to be triggered on uploading a document to the template.
Example: document.querySelector('docuseal-builder').addEventListener('upload', (e) => e.detail)
send Event
Custom event to be triggered on sending documents for signature to recipients.
Example: document.querySelector('docuseal-builder').addEventListener('send', (e) => e.detail)
change Event
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 Event
Custom event to be triggered on saving changes of the template form.
Example: document.querySelector('docuseal-builder').addEventListener('save', (e) => e.detail)