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.
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DocusealBuilderComponent } from '@docuseal/angular';
@Component({
selector: 'app-root',
standalone: true,
imports: [DocusealBuilderComponent],
template: `
<div class="app">
<ng-container *ngIf="token">
<docuseal-builder [token]="token"></docuseal-builder>
</ng-container>
</div>
`
})
export class AppComponent implements OnInit {
token: string = ''
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.post('/api/docuseal/builder_token', {}).subscribe((data: any) => {
this.token = data.token;
});
}
}
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.
Email of the owner of the API signing key - admin user email.
Email of the user to create a template for.
Example signer@example.com
ID of the template to open in the form builder. Optional when
document_urls
are specified.
Your application-specific unique string key to identify this template within your app.
The folder name in which the template should be created.
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']
New template name when creating a template with document_urls specified.
Example Integration W-9 Test Form
Pass
false
to disable automatic PDF form fields extraction. PDF fields are automatically added by default.
DocuSeal host domain name. Only use this attribute if you are using the on-premises DocuSeal installation or docuseal.eu Cloud.
Example yourdomain.com
Custom button will be displayed on the top right corner of the form builder.
Custom button title.
Custom button URL. Only absolute URLs are supported.
Submitter role names to be used by default in the form.
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
A 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"]
Field type to be used by default with the field drawing tool.
Default text
Example signature
An array of default custom field properties with
name
to be added to the document.
Field name.
Field type.
Possible values heading, text, signature, initials, date, number, image, checkbox, multiple, file, radio, select, cells, stamp, payment, phone, verification, kba, strikethrough
Submitter role name for the field.
Default value of the field.
Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown.
Field description displayed on the signing form. Supports Markdown.
Field width in pixels.
Field height in pixels.
Field format. Depends on the field type.
Field options. Required for the select field type.
Field validation rules.
Field pattern.
Example ^[0-9]{5}$
Validation error message.
An array of default submitters with
role
name to be added to the document.
Submitter email.
Submitter role name.
Submitter name.
Submitter phone number, formatted according to the E.164 standard.
An array of default required custom field properties with
name
that should be added to the document.
Field name.
Field type.
Possible values heading, text, signature, initials, date, number, image, checkbox, multiple, file, radio, select, cells, stamp, payment, phone, verification, kba, strikethrough
Submitter role name for the field.
Default value of the field.
Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown.
Field description displayed on the signing form. Supports Markdown.
Field width in pixels.
Field height in pixels.
Field format. Depends on the field type.
Field options. Required for the select field type.
Field validation rules.
Field pattern.
Example ^[0-9]{5}$
Validation error message.
Email subject and body for the signature request.
Email subject for the signature request.
Email body for the signature request.
Set
false
to remove document title from the builder.
Default true
Show the "Send" button.
Default true
Show the "Upload" button.
Default true
Show the "Add Blank Page" button.
Default false
Show the "Sign Yourself" button.
Default true
Set
false
to not show the documents list on the left. Documents list is displayed by default.
Default true
Set
true
to allow converting DOCX files to editable dynamic documents.
Default false
Set
false
to not show the fields list on the right. Fields list is displayed by default.
Default true
Display a button to automatically detect and add fields to the document with AI.
Default false
Set
true
to display a separate "Custom" fields tab in the fields list. Custom fields can be configured using the
fields
or
requiredFields
prop.
Default false
Set
true
to display field name placeholders instead of the field type icons.
Default false
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.
Set
true
to save revisions and display a dropdown next to the Save button that provides access to the template revisions history.
Default false
Allow to add fields only defined in the
fields
prop.
Default false
Show template in preview mode without ability to edit it.
Default false
Open template in data input mode to prefill fields with default values.
Default false
Set
false
to disable form changes autosaving.
Default true
UI language, 'en', 'es', 'de', 'fr', 'pt', 'nl', 'he', 'ar' languages are available.
Default en
Object that contains i18n keys to replace the default UI text with custom values. See template_builder/i18n.js for available i18n keys.
Default {}
The form builder background color. Only HEX color codes are supported.
Example #ffffff
Custom CSS styles to be applied to the form builder.
Example #sign_yourself_button { background-color: #FFA500; }
Event emitted on loading the form builder template data.
Example handleLoad($event)
Event emitted on uploading a document to the template.
Example handleUpload($event)
Event emitted on sending documents for signature to recipients.
Example handleSend($event)
Function to be called when changes are made to the template form.
Example handleChange($event)
Event emitted on saving changes of the template form.
Example handleSave($event)