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>
View LIVE DEMO

Attributes

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

extract_fields optional Boolean

Pass `false` to disable automatic PDF form fields extraction. PDF fields are automatically added by default.

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-submitters optional String

A list of default submitters with email and 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", "role": "Customer" }]

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-add-page-button optional Boolean

Show the "Add Blank Page" button.

Default: false

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-with-field-placeholder optional Boolean

Set `true` to display field name placeholders instead of the field type icons.

Default: false

data-preview optional Boolean

Show template in preview mode without ability to edit it.

Default: false

data-only-defined-fields optional Boolean

Allow to add fields only defined in the `data-fields` attribute.

Default: false

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; }

Callbacks

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)

Live Example