docs
This commit is contained in:
Pete Matsyburka
@@ -0,0 +1,513 @@
|
||||
# Angular Form Builder
|
||||
|
||||
### Example Code
|
||||
|
||||
```angular
|
||||
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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```javascript
|
||||
const jwt = require('jsonwebtoken');
|
||||
|
||||
const token = jwt.sign({
|
||||
user_email: '{{admin_user_email}}',
|
||||
integration_email: '{{signer_email}}',
|
||||
external_id: 'TestForm123',
|
||||
name: 'Integration W-9 Test Form',
|
||||
document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
|
||||
}, '{{api_key}}');
|
||||
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
```json
|
||||
{
|
||||
"token": {
|
||||
"type": "string",
|
||||
"doc_type": "object",
|
||||
"description": "JSON Web Token (JWT HS256) with a payload signed using the API key. <br><b>Ensure that the JWT token is generated on the backend to prevent unauthorized access to your documents</b>.",
|
||||
"required": true,
|
||||
"properties": {
|
||||
"user_email": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Email of the owner of the API signing key - admin user email."
|
||||
},
|
||||
"integration_email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Email of the user to create a template for.",
|
||||
"example": "signer@example.com"
|
||||
},
|
||||
"template_id": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "ID of the template to open in the form builder. Optional when `document_urls` are specified."
|
||||
},
|
||||
"external_id": {
|
||||
"type": "string",
|
||||
"description": "Your application-specific unique string key to identify this template within your app.",
|
||||
"required": false
|
||||
},
|
||||
"folder_name": {
|
||||
"type": "string",
|
||||
"description": "The folder name in which the template should be created.",
|
||||
"required": false
|
||||
},
|
||||
"document_urls": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "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": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "New template name when creating a template with document_urls specified.",
|
||||
"example": "Integration W-9 Test Form"
|
||||
},
|
||||
"extract_fields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Pass `false` to disable automatic PDF form fields extraction. PDF fields are automatically added by default."
|
||||
}
|
||||
}
|
||||
},
|
||||
"host": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "DocuSeal host domain name. Only use this attribute if you are using the on-premises DocuSeal installation or docuseal.eu Cloud.",
|
||||
"example": "yourdomain.com"
|
||||
},
|
||||
"customButton": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Custom button will be displayed on the top right corner of the form builder.",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Custom button title."
|
||||
},
|
||||
"url": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Custom button URL. Only absolute URLs are supported."
|
||||
}
|
||||
}
|
||||
},
|
||||
"roles": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Submitter role names to be used by default in the form."
|
||||
},
|
||||
"fieldTypes": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field type names to be used in the form builder. All field types are used by default."
|
||||
},
|
||||
"drawFieldType": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "text",
|
||||
"description": "Field type to be used by default with the field drawing tool.",
|
||||
"example": "signature"
|
||||
},
|
||||
"fields": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "An array of default custom field properties with `name` to be added to the document.",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Field name."
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field type.",
|
||||
"enum": [
|
||||
"heading",
|
||||
"text",
|
||||
"signature",
|
||||
"initials",
|
||||
"date",
|
||||
"number",
|
||||
"image",
|
||||
"checkbox",
|
||||
"multiple",
|
||||
"file",
|
||||
"radio",
|
||||
"select",
|
||||
"cells",
|
||||
"stamp",
|
||||
"payment",
|
||||
"phone",
|
||||
"verification"
|
||||
]
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter role name for the field."
|
||||
},
|
||||
"default_value": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Default value of the field."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown."
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field description displayed on the signing form. Supports Markdown."
|
||||
},
|
||||
"width": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field width in pixels."
|
||||
},
|
||||
"height": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field height in pixels."
|
||||
},
|
||||
"format": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field format. Depends on the field type."
|
||||
},
|
||||
"options": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field options. Required for the select field type."
|
||||
},
|
||||
"validation": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Field validation rules.",
|
||||
"properties": {
|
||||
"pattern": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field pattern.",
|
||||
"example": "^[0-9]{5}$"
|
||||
},
|
||||
"message": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Validation error message."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"submitters": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "An array of default submitters with `role` name to be added to the document.",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter email."
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Submitter role name."
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter name."
|
||||
},
|
||||
"phone": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter phone number, formatted according to the E.164 standard."
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"requiredFields": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "An array of default required custom field properties with `name` that should be added to the document.",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Field name."
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field type.",
|
||||
"enum": [
|
||||
"heading",
|
||||
"text",
|
||||
"signature",
|
||||
"initials",
|
||||
"date",
|
||||
"number",
|
||||
"image",
|
||||
"checkbox",
|
||||
"multiple",
|
||||
"file",
|
||||
"radio",
|
||||
"select",
|
||||
"cells",
|
||||
"stamp",
|
||||
"payment",
|
||||
"phone",
|
||||
"verification"
|
||||
]
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter role name for the field."
|
||||
},
|
||||
"default_value": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Default value of the field."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown."
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field description displayed on the signing form. Supports Markdown."
|
||||
},
|
||||
"width": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field width in pixels."
|
||||
},
|
||||
"height": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field height in pixels."
|
||||
},
|
||||
"format": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field format. Depends on the field type."
|
||||
},
|
||||
"options": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field options. Required for the select field type."
|
||||
},
|
||||
"validation": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Field validation rules.",
|
||||
"properties": {
|
||||
"pattern": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field pattern.",
|
||||
"example": "^[0-9]{5}$"
|
||||
},
|
||||
"message": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Validation error message."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"emailMessage": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Email subject and body for the signature request.",
|
||||
"properties": {
|
||||
"subject": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Email subject for the signature request."
|
||||
},
|
||||
"body": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Email body for the signature request."
|
||||
}
|
||||
}
|
||||
},
|
||||
"withTitle": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove document title from the builder."
|
||||
},
|
||||
"withSendButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Send\" button."
|
||||
},
|
||||
"withUploadButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Upload\" button."
|
||||
},
|
||||
"withAddPageButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show the \"Add Blank Page\" button."
|
||||
},
|
||||
"withSignYourselfButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Sign Yourself\" button."
|
||||
},
|
||||
"withDocumentsList": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to now show the documents list on the left. Documents list is displayed by default."
|
||||
},
|
||||
"withFieldsList": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to now show the fields list on the right. Fields list is displayed by default."
|
||||
},
|
||||
"withFieldPlaceholder": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display field name placeholders instead of the field type icons."
|
||||
},
|
||||
"onlyDefinedFields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Allow to add fields only defined in the `fields` prop."
|
||||
},
|
||||
"preview": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show template in preview mode without ability to edit it."
|
||||
},
|
||||
"autosave": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disable form changes autosaving."
|
||||
},
|
||||
"language": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "en",
|
||||
"description": "UI language, 'en', 'es', 'de', 'fr', 'pt', 'he', 'ar' languages are available."
|
||||
},
|
||||
"i18n": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"default": "{}",
|
||||
"description": "Object that contains i18n keys to replace the default UI text with custom values. See <a href=\"https://github.com/docusealco/docuseal/blob/master/app/javascript/template_builder/i18n.js\" class=\"link\" target=\"_blank\" rel=\"nofollow\">template_builder/i18n.js</a> for available i18n keys."
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "The form builder background color. Only HEX color codes are supported.",
|
||||
"example": "#ffffff"
|
||||
},
|
||||
"customCss": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Custom CSS styles to be applied to the form builder.",
|
||||
"example": "#sign_yourself_button { background-color: #FFA500; }"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Callback
|
||||
|
||||
```json
|
||||
{
|
||||
"onLoad": {
|
||||
"type": "event emitter",
|
||||
"required": false,
|
||||
"description": "Event emitted on loading the form builder template data.",
|
||||
"example": "handleLoad($event)"
|
||||
},
|
||||
"onUpload": {
|
||||
"type": "event emitter",
|
||||
"required": false,
|
||||
"description": "Event emitted on uploading a document to the template.",
|
||||
"example": "handleUpload($event)"
|
||||
},
|
||||
"onSend": {
|
||||
"type": "event emitter",
|
||||
"required": false,
|
||||
"description": "Event emitted on sending documents for signature to recipients.",
|
||||
"example": "handleSend($event)"
|
||||
},
|
||||
"onChange": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called when changes are made to the template form.",
|
||||
"example": "handleChange($event)"
|
||||
},
|
||||
"onSave": {
|
||||
"type": "event emitter",
|
||||
"required": false,
|
||||
"description": "Event emitted on saving changes of the template form.",
|
||||
"example": "handleSave($event)"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,477 @@
|
||||
# JavaScript Form Builder
|
||||
|
||||
### Example Code
|
||||
|
||||
```javascript
|
||||
<script src="https://docuseal.com/js/builder.js"></script>
|
||||
|
||||
<docuseal-builder
|
||||
data-token="<%= JWT.encode({
|
||||
user_email: '{{admin_user_email}}',
|
||||
integration_email: '{{signer_email}}',
|
||||
name: 'Integration W-9 Test Form',
|
||||
document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
|
||||
}, '{{api_key}}') %>">
|
||||
</docuseal-builder>
|
||||
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
```json
|
||||
{
|
||||
"data-token": {
|
||||
"type": "string",
|
||||
"doc_type": "object",
|
||||
"description": "JSON Web Token (JWT HS256) with a payload signed using the API key. <br><b>Ensure that the JWT token is generated on the backend to prevent unauthorized access to your documents</b>.",
|
||||
"required": true,
|
||||
"properties": {
|
||||
"user_email": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Email of the owner of the API signing key - admin user email."
|
||||
},
|
||||
"integration_email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Email of the user to create a template for.",
|
||||
"example": "signer@example.com"
|
||||
},
|
||||
"template_id": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "ID of the template to open in the form builder. Optional when `document_urls` are specified."
|
||||
},
|
||||
"external_id": {
|
||||
"type": "string",
|
||||
"description": "Your application-specific unique string key to identify this template within your app.",
|
||||
"required": false
|
||||
},
|
||||
"folder_name": {
|
||||
"type": "string",
|
||||
"description": "The folder name in which the template should be created.",
|
||||
"required": false
|
||||
},
|
||||
"document_urls": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "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": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "New template name when creating a template with document_urls specified.",
|
||||
"example": "Integration W-9 Test Form"
|
||||
},
|
||||
"extract_fields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Pass `false` to disable automatic PDF form fields extraction. PDF fields are automatically added by default."
|
||||
}
|
||||
}
|
||||
},
|
||||
"data-host": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "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": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Comma separated submitter role names to be used by default in the form.",
|
||||
"example": "Company,Customer"
|
||||
},
|
||||
"data-fields": {
|
||||
"type": "string",
|
||||
"doc_type": "array",
|
||||
"required": false,
|
||||
"description": "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\" }]",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Field name."
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field type.",
|
||||
"enum": [
|
||||
"heading",
|
||||
"text",
|
||||
"signature",
|
||||
"initials",
|
||||
"date",
|
||||
"number",
|
||||
"image",
|
||||
"checkbox",
|
||||
"multiple",
|
||||
"file",
|
||||
"radio",
|
||||
"select",
|
||||
"cells",
|
||||
"stamp",
|
||||
"payment",
|
||||
"phone",
|
||||
"verification"
|
||||
]
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter role name for the field."
|
||||
},
|
||||
"default_value": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Default value of the field."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown."
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field description displayed on the signing form. Supports Markdown."
|
||||
},
|
||||
"width": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field width in pixels."
|
||||
},
|
||||
"height": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field height in pixels."
|
||||
},
|
||||
"format": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field format. Depends on the field type."
|
||||
},
|
||||
"options": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field options. Required for the select field type."
|
||||
},
|
||||
"validation": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Field validation rules.",
|
||||
"properties": {
|
||||
"pattern": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field pattern.",
|
||||
"example": "^[0-9]{5}$"
|
||||
},
|
||||
"message": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Validation error message."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"data-submitters": {
|
||||
"type": "string",
|
||||
"doc_type": "array",
|
||||
"required": false,
|
||||
"description": "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\" }]",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter email."
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Submitter role name."
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter name."
|
||||
},
|
||||
"phone": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter phone number, formatted according to the E.164 standard."
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"data-required-fields": {
|
||||
"type": "string",
|
||||
"doc_type": "array",
|
||||
"required": false,
|
||||
"description": "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\" }]",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Field name."
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field type.",
|
||||
"enum": [
|
||||
"heading",
|
||||
"text",
|
||||
"signature",
|
||||
"initials",
|
||||
"date",
|
||||
"number",
|
||||
"image",
|
||||
"checkbox",
|
||||
"multiple",
|
||||
"file",
|
||||
"radio",
|
||||
"select",
|
||||
"cells",
|
||||
"stamp",
|
||||
"payment",
|
||||
"phone",
|
||||
"verification"
|
||||
]
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter role name for the field."
|
||||
},
|
||||
"default_value": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Default value of the field."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown."
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field description displayed on the signing form. Supports Markdown."
|
||||
},
|
||||
"width": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field width in pixels."
|
||||
},
|
||||
"height": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field height in pixels."
|
||||
},
|
||||
"format": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field format. Depends on the field type."
|
||||
},
|
||||
"options": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field options. Required for the select field type."
|
||||
},
|
||||
"validation": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Field validation rules.",
|
||||
"properties": {
|
||||
"pattern": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field pattern.",
|
||||
"example": "^[0-9]{5}$"
|
||||
},
|
||||
"message": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Validation error message."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"data-field-types": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "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": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "text",
|
||||
"description": "Field type to be used by default with the field drawing tool.",
|
||||
"example": "signature"
|
||||
},
|
||||
"data-custom-button-title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Custom button title. This button will be displayed on the top right corner of the form builder."
|
||||
},
|
||||
"data-custom-button-url": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Custom button URL. Only absolute URLs are supported."
|
||||
},
|
||||
"data-with-title": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove document title from the builder."
|
||||
},
|
||||
"email-subject": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Email subject for the signature request. Required if `email-body` specified"
|
||||
},
|
||||
"email-body": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Email body for the signature request. Required if `email-subject` specified"
|
||||
},
|
||||
"data-with-send-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Recipients\" button."
|
||||
},
|
||||
"data-with-upload-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Upload\" button."
|
||||
},
|
||||
"data-with-add-page-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show the \"Add Blank Page\" button."
|
||||
},
|
||||
"data-with-sign-yourself-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Sign Yourself\" button."
|
||||
},
|
||||
"data-with-documents-list": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to now show the documents list on the left. Documents list is displayed by default."
|
||||
},
|
||||
"data-with-fields-list": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to now show the fields list on the right. Fields list is displayed by default."
|
||||
},
|
||||
"data-with-field-placeholder": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display field name placeholders instead of the field type icons."
|
||||
},
|
||||
"data-preview": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show template in preview mode without ability to edit it."
|
||||
},
|
||||
"data-only-defined-fields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Allow to add fields only defined in the `data-fields` attribute."
|
||||
},
|
||||
"data-autosave": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disable form changes autosaving."
|
||||
},
|
||||
"data-i18n": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "{}",
|
||||
"description": "JSON encoded string that contains i18n keys to replace the default UI text with custom values. See <a href=\"https://github.com/docusealco/docuseal/blob/master/app/javascript/template_builder/i18n.js\" class=\"link\" target=\"_blank\" rel=\"nofollow\">template_builder/i18n.js</a> for available i18n keys."
|
||||
},
|
||||
"data-language": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "en",
|
||||
"description": "UI language, 'en', 'es', 'de', 'fr', 'pt', 'he', 'ar' languages are available."
|
||||
},
|
||||
"data-background-color": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "The form builder background color. Only HEX color codes are supported.",
|
||||
"example": "#ffffff"
|
||||
},
|
||||
"data-custom-css": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Custom CSS styles to be applied to the form builder.",
|
||||
"example": "#sign_yourself_button { background-color: #FFA500; }"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Callback
|
||||
|
||||
```json
|
||||
{
|
||||
"load": {
|
||||
"type": "event",
|
||||
"required": false,
|
||||
"description": "Custom event to be triggered on loading the form builder template data.",
|
||||
"example": "document.querySelector('docuseal-builder').addEventListener('load', (e) => e.detail)"
|
||||
},
|
||||
"upload": {
|
||||
"type": "event",
|
||||
"required": false,
|
||||
"description": "Custom event to be triggered on uploading a document to the template.",
|
||||
"example": "document.querySelector('docuseal-builder').addEventListener('upload', (e) => e.detail)"
|
||||
},
|
||||
"send": {
|
||||
"type": "event",
|
||||
"required": false,
|
||||
"description": "Custom event to be triggered on sending documents for signature to recipients.",
|
||||
"example": "document.querySelector('docuseal-builder').addEventListener('send', (e) => e.detail)"
|
||||
},
|
||||
"change": {
|
||||
"type": "event",
|
||||
"required": false,
|
||||
"description": "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": {
|
||||
"type": "event",
|
||||
"required": false,
|
||||
"description": "Custom event to be triggered on saving changes of the template form.",
|
||||
"example": "document.querySelector('docuseal-builder').addEventListener('save', (e) => e.detail)"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,504 @@
|
||||
# React Form Builder
|
||||
|
||||
### Example Code
|
||||
|
||||
```react
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { DocusealBuilder } from '@docuseal/react'
|
||||
|
||||
const App = () => {
|
||||
const [token, setToken] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/docuseal/builder_token', {
|
||||
method: 'POST',
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setToken(data.token);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return token && <DocusealBuilder token={token} />;
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
```javascript
|
||||
const jwt = require('jsonwebtoken');
|
||||
|
||||
const token = jwt.sign({
|
||||
user_email: '{{admin_user_email}}',
|
||||
integration_email: '{{signer_email}}',
|
||||
external_id: 'TestForm123',
|
||||
name: 'Integration W-9 Test Form',
|
||||
document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
|
||||
}, '{{api_key}}');
|
||||
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
```json
|
||||
{
|
||||
"token": {
|
||||
"type": "string",
|
||||
"doc_type": "object",
|
||||
"description": "JSON Web Token (JWT HS256) with a payload signed using the API key. <br><b>Ensure that the JWT token is generated on the backend to prevent unauthorized access to your documents</b>.",
|
||||
"required": true,
|
||||
"properties": {
|
||||
"user_email": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Email of the owner of the API signing key - admin user email."
|
||||
},
|
||||
"integration_email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Email of the user to create a template for.",
|
||||
"example": "signer@example.com"
|
||||
},
|
||||
"template_id": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "ID of the template to open in the form builder. Optional when `document_urls` are specified."
|
||||
},
|
||||
"external_id": {
|
||||
"type": "string",
|
||||
"description": "Your application-specific unique string key to identify this template within your app.",
|
||||
"required": false
|
||||
},
|
||||
"folder_name": {
|
||||
"type": "string",
|
||||
"description": "The folder name in which the template should be created.",
|
||||
"required": false
|
||||
},
|
||||
"document_urls": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "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": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "New template name when creating a template with document_urls specified.",
|
||||
"example": "Integration W-9 Test Form"
|
||||
},
|
||||
"extract_fields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Pass `false` to disable automatic PDF form fields extraction. PDF fields are automatically added by default."
|
||||
}
|
||||
}
|
||||
},
|
||||
"host": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "DocuSeal host domain name. Only use this attribute if you are using the on-premises DocuSeal installation or docuseal.eu Cloud.",
|
||||
"example": "yourdomain.com"
|
||||
},
|
||||
"customButton": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Custom button will be displayed on the top right corner of the form builder.",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Custom button title."
|
||||
},
|
||||
"url": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Custom button URL. Only absolute URLs are supported."
|
||||
}
|
||||
}
|
||||
},
|
||||
"roles": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Submitter role names to be used by default in the form."
|
||||
},
|
||||
"fieldTypes": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field type names to be used in the form builder. All field types are used by default."
|
||||
},
|
||||
"drawFieldType": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "text",
|
||||
"description": "Field type to be used by default with the field drawing tool.",
|
||||
"example": "signature"
|
||||
},
|
||||
"fields": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "An array of default custom field properties with `name` to be added to the document.",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Field name."
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field type.",
|
||||
"enum": [
|
||||
"heading",
|
||||
"text",
|
||||
"signature",
|
||||
"initials",
|
||||
"date",
|
||||
"number",
|
||||
"image",
|
||||
"checkbox",
|
||||
"multiple",
|
||||
"file",
|
||||
"radio",
|
||||
"select",
|
||||
"cells",
|
||||
"stamp",
|
||||
"payment",
|
||||
"phone",
|
||||
"verification"
|
||||
]
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter role name for the field."
|
||||
},
|
||||
"default_value": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Default value of the field."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown."
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field description displayed on the signing form. Supports Markdown."
|
||||
},
|
||||
"width": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field width in pixels."
|
||||
},
|
||||
"height": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field height in pixels."
|
||||
},
|
||||
"format": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field format. Depends on the field type."
|
||||
},
|
||||
"options": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field options. Required for the select field type."
|
||||
},
|
||||
"validation": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Field validation rules.",
|
||||
"properties": {
|
||||
"pattern": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field pattern.",
|
||||
"example": "^[0-9]{5}$"
|
||||
},
|
||||
"message": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Validation error message."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"submitters": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "An array of default submitters with `role` name to be added to the document.",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter email."
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Submitter role name."
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter name."
|
||||
},
|
||||
"phone": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter phone number, formatted according to the E.164 standard."
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"requiredFields": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "An array of default required custom field properties with `name` that should be added to the document.",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Field name."
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field type.",
|
||||
"enum": [
|
||||
"heading",
|
||||
"text",
|
||||
"signature",
|
||||
"initials",
|
||||
"date",
|
||||
"number",
|
||||
"image",
|
||||
"checkbox",
|
||||
"multiple",
|
||||
"file",
|
||||
"radio",
|
||||
"select",
|
||||
"cells",
|
||||
"stamp",
|
||||
"payment",
|
||||
"phone",
|
||||
"verification"
|
||||
]
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter role name for the field."
|
||||
},
|
||||
"default_value": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Default value of the field."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown."
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field description displayed on the signing form. Supports Markdown."
|
||||
},
|
||||
"width": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field width in pixels."
|
||||
},
|
||||
"height": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field height in pixels."
|
||||
},
|
||||
"format": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field format. Depends on the field type."
|
||||
},
|
||||
"options": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field options. Required for the select field type."
|
||||
},
|
||||
"validation": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Field validation rules.",
|
||||
"properties": {
|
||||
"pattern": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field pattern.",
|
||||
"example": "^[0-9]{5}$"
|
||||
},
|
||||
"message": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Validation error message."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"emailMessage": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Email subject and body for the signature request.",
|
||||
"properties": {
|
||||
"subject": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Email subject for the signature request."
|
||||
},
|
||||
"body": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Email body for the signature request."
|
||||
}
|
||||
}
|
||||
},
|
||||
"withTitle": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove document title from the builder."
|
||||
},
|
||||
"withSendButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Send\" button."
|
||||
},
|
||||
"withUploadButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Upload\" button."
|
||||
},
|
||||
"withAddPageButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show the \"Add Blank Page\" button."
|
||||
},
|
||||
"withSignYourselfButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Sign Yourself\" button."
|
||||
},
|
||||
"withDocumentsList": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to now show the documents list on the left. Documents list is displayed by default."
|
||||
},
|
||||
"withFieldsList": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to now show the fields list on the right. Fields list is displayed by default."
|
||||
},
|
||||
"withFieldPlaceholder": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display field name placeholders instead of the field type icons."
|
||||
},
|
||||
"onlyDefinedFields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Allow to add fields only defined in the `fields` prop."
|
||||
},
|
||||
"preview": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show template in preview mode without ability to edit it."
|
||||
},
|
||||
"autosave": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disable form changes autosaving."
|
||||
},
|
||||
"language": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "en",
|
||||
"description": "UI language, 'en', 'es', 'de', 'fr', 'pt', 'he', 'ar' languages are available."
|
||||
},
|
||||
"i18n": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"default": "{}",
|
||||
"description": "Object that contains i18n keys to replace the default UI text with custom values. See <a href=\"https://github.com/docusealco/docuseal/blob/master/app/javascript/template_builder/i18n.js\" class=\"link\" target=\"_blank\" rel=\"nofollow\">template_builder/i18n.js</a> for available i18n keys."
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "The form builder background color. Only HEX color codes are supported.",
|
||||
"example": "#ffffff"
|
||||
},
|
||||
"customCss": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Custom CSS styles to be applied to the form builder.",
|
||||
"example": "#sign_yourself_button { background-color: #FFA500; }"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Callback
|
||||
|
||||
```json
|
||||
{
|
||||
"onLoad": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on loading the form builder template data.",
|
||||
"example": "(data) => { console.log(data) }"
|
||||
},
|
||||
"onUpload": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on uploading a document to the template.",
|
||||
"example": "(data) => { console.log(data) }"
|
||||
},
|
||||
"onSend": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on sending documents for signature to recipients.",
|
||||
"example": "(data) => { console.log(data) }"
|
||||
},
|
||||
"onChange": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called when changes are made to the template form.",
|
||||
"example": "(data) => { console.log(data) }"
|
||||
},
|
||||
"onSave": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on saving changes of the template form.",
|
||||
"example": "(data) => { console.log(data) }"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,513 @@
|
||||
# Vue Form Builder
|
||||
|
||||
### Example Code
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<DocusealBuilder
|
||||
v-if="token"
|
||||
:token="token"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DocusealBuilder } from '@docuseal/vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: { DocusealBuilder },
|
||||
data () {
|
||||
return { token: '' }
|
||||
},
|
||||
mounted () {
|
||||
fetch('/api/docuseal/builder_token', {
|
||||
method: 'POST'
|
||||
}).then(async (resp) => {
|
||||
const data = await resp.json()
|
||||
|
||||
this.token = data.token
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
```javascript
|
||||
const jwt = require('jsonwebtoken');
|
||||
|
||||
const token = jwt.sign({
|
||||
user_email: '{{admin_user_email}}',
|
||||
integration_email: '{{signer_email}}',
|
||||
external_id: 'TestForm123',
|
||||
name: 'Integration W-9 Test Form',
|
||||
document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
|
||||
}, '{{api_key}}');
|
||||
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
```json
|
||||
{
|
||||
"token": {
|
||||
"type": "string",
|
||||
"doc_type": "object",
|
||||
"description": "JSON Web Token (JWT HS256) with a payload signed using the API key. <br><b>Ensure that the JWT token is generated on the backend to prevent unauthorized access to your documents</b>.",
|
||||
"required": true,
|
||||
"properties": {
|
||||
"user_email": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Email of the owner of the API signing key - admin user email."
|
||||
},
|
||||
"integration_email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Email of the user to create a template for.",
|
||||
"example": "signer@example.com"
|
||||
},
|
||||
"template_id": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "ID of the template to open in the form builder. Optional when `document_urls` are specified."
|
||||
},
|
||||
"external_id": {
|
||||
"type": "string",
|
||||
"description": "Your application-specific unique string key to identify this template within your app.",
|
||||
"required": false
|
||||
},
|
||||
"folder_name": {
|
||||
"type": "string",
|
||||
"description": "The folder name in which the template should be created.",
|
||||
"required": false
|
||||
},
|
||||
"document_urls": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "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": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "New template name when creating a template with document_urls specified.",
|
||||
"example": "Integration W-9 Test Form"
|
||||
},
|
||||
"extract_fields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Pass `false` to disable automatic PDF form fields extraction. PDF fields are automatically added by default."
|
||||
}
|
||||
}
|
||||
},
|
||||
"host": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "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": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Custom button will be displayed on the top right corner of the form builder.",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Custom button title."
|
||||
},
|
||||
"url": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Custom button URL. Only absolute URLs are supported."
|
||||
}
|
||||
}
|
||||
},
|
||||
"only-defined-fields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Allow to add fields only defined in the `:fields` prop."
|
||||
},
|
||||
"with-send-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Recipients\" button."
|
||||
},
|
||||
"roles": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Submitter role names to be used by default in the form."
|
||||
},
|
||||
"field-types": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field type names to be used in the form builder. All field types are used by default."
|
||||
},
|
||||
"draw-field-type": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "text",
|
||||
"description": "Field type to be used by default with the field drawing tool.",
|
||||
"example": "signature"
|
||||
},
|
||||
"fields": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "An array of default custom field properties with `name` to be added to the document.",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Field name."
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field type.",
|
||||
"enum": [
|
||||
"heading",
|
||||
"text",
|
||||
"signature",
|
||||
"initials",
|
||||
"date",
|
||||
"number",
|
||||
"image",
|
||||
"checkbox",
|
||||
"multiple",
|
||||
"file",
|
||||
"radio",
|
||||
"select",
|
||||
"cells",
|
||||
"stamp",
|
||||
"payment",
|
||||
"phone",
|
||||
"verification"
|
||||
]
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter role name for the field."
|
||||
},
|
||||
"default_value": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Default value of the field."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown."
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field description displayed on the signing form. Supports Markdown."
|
||||
},
|
||||
"width": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field width in pixels."
|
||||
},
|
||||
"height": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field height in pixels."
|
||||
},
|
||||
"format": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field format. Depends on the field type."
|
||||
},
|
||||
"options": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field options. Required for the select field type."
|
||||
},
|
||||
"validation": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Field validation rules.",
|
||||
"properties": {
|
||||
"pattern": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field pattern.",
|
||||
"example": "^[0-9]{5}$"
|
||||
},
|
||||
"message": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Validation error message."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"submitters": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "An array of default submitters with `role` name to be added to the document.",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter email."
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Submitter role name."
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter name."
|
||||
},
|
||||
"phone": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter phone number, formatted according to the E.164 standard."
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"required-fields": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "An array of default required custom field properties with `name` that should be added to the document.",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Field name."
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field type.",
|
||||
"enum": [
|
||||
"heading",
|
||||
"text",
|
||||
"signature",
|
||||
"initials",
|
||||
"date",
|
||||
"number",
|
||||
"image",
|
||||
"checkbox",
|
||||
"multiple",
|
||||
"file",
|
||||
"radio",
|
||||
"select",
|
||||
"cells",
|
||||
"stamp",
|
||||
"payment",
|
||||
"phone",
|
||||
"verification"
|
||||
]
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Submitter role name for the field."
|
||||
},
|
||||
"default_value": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Default value of the field."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field title displayed to the user instead of the name, shown on the signing form. Supports Markdown."
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field description displayed on the signing form. Supports Markdown."
|
||||
},
|
||||
"width": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field width in pixels."
|
||||
},
|
||||
"height": {
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"description": "Field height in pixels."
|
||||
},
|
||||
"format": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field format. Depends on the field type."
|
||||
},
|
||||
"options": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "Field options. Required for the select field type."
|
||||
},
|
||||
"validation": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Field validation rules.",
|
||||
"properties": {
|
||||
"pattern": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Field pattern.",
|
||||
"example": "^[0-9]{5}$"
|
||||
},
|
||||
"message": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Validation error message."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"email-message": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Email subject and body for the signature request.",
|
||||
"properties": {
|
||||
"subject": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Email subject for the signature request."
|
||||
},
|
||||
"body": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Email body for the signature request."
|
||||
}
|
||||
}
|
||||
},
|
||||
"with-title": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove document title from the builder."
|
||||
},
|
||||
"with-upload-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Upload\" button."
|
||||
},
|
||||
"with-add-page-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show the \"Add Blank Page\" button."
|
||||
},
|
||||
"with-sign-yourself-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Show the \"Sign Yourself\" button."
|
||||
},
|
||||
"with-documents-list": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to now show the documents list on the left. Documents list is displayed by default."
|
||||
},
|
||||
"with-fields-list": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to now show the fields list on the right. Fields list is displayed by default."
|
||||
},
|
||||
"with-field-placeholder": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display field name placeholders instead of the field type icons."
|
||||
},
|
||||
"autosave": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disable form changes autosaving."
|
||||
},
|
||||
"preview": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show template in preview mode without ability to edit it."
|
||||
},
|
||||
"language": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "en",
|
||||
"description": "UI language, 'en', 'es', 'de', 'fr', 'pt', 'he', 'ar' languages are available."
|
||||
},
|
||||
"i18n": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"default": "{}",
|
||||
"description": "Object that contains i18n keys to replace the default UI text with custom values. See <a href=\"https://github.com/docusealco/docuseal/blob/master/app/javascript/template_builder/i18n.js\" class=\"link\" target=\"_blank\" rel=\"nofollow\">template_builder/i18n.js</a> for available i18n keys."
|
||||
},
|
||||
"background-color": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "The form builder background color. Only HEX color codes are supported.",
|
||||
"example": "#ffffff"
|
||||
},
|
||||
"custom-css": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Custom CSS styles to be applied to the form builder.",
|
||||
"example": "#sign_yourself_button { background-color: #FFA500; }"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Callback
|
||||
|
||||
```json
|
||||
{
|
||||
"@load": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on loading the form builder template data.",
|
||||
"example": "onBuilderLoad"
|
||||
},
|
||||
"@upload": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on uploading a document to the template.",
|
||||
"example": "onBuilderUpload"
|
||||
},
|
||||
"@send": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on sending documents for signature to recipients.",
|
||||
"example": "onBuilderSend"
|
||||
},
|
||||
"@change": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called when changes are made to the template form.",
|
||||
"example": "onBuilderChange"
|
||||
},
|
||||
"@save": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on saving changes of the template form.",
|
||||
"example": "onBuilderSave"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,295 @@
|
||||
# Angular Signing Form
|
||||
|
||||
### Example Code
|
||||
|
||||
```angular
|
||||
import { Component } from '@angular/core';
|
||||
import { DocusealFormComponent } from '@docuseal/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [DocusealFormComponent],
|
||||
template: `
|
||||
<div class="app">
|
||||
<docuseal-form
|
||||
[src]="'https://docuseal.com/d/{{template_slug}}'"
|
||||
[email]="'{{signer_email}}'">
|
||||
</docuseal-form>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
```json
|
||||
{
|
||||
"src": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Public URL of the document signing form. There are two types of URLs: <li><code>/d/{slug}</code> - template form signing URL can be copied from the template page in the admin dashboard. Also template \"slug\" key can be obtained via the <code>/templates</code> API.</li><li><code>/s/{slug}</code> - individual signer URL. Signer \"slug\" key can be obtained via the <code>/submissions</code> API which is used to initiate signature requests for a template form with recipients.</li>"
|
||||
},
|
||||
"email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Email address of the signer. Additional email form step will be displayed if the email attribute is not specified."
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Name of the signer."
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "The role name or title of the signer.",
|
||||
"example": "First Party"
|
||||
},
|
||||
"expand": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Expand form on open.",
|
||||
"default": true
|
||||
},
|
||||
"minimize": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Set to `true` to always minimize form fields. Requires to click on the field to expand the form.",
|
||||
"default": false
|
||||
},
|
||||
"orderAsOnPage": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Order form fields based on their position on the pages."
|
||||
},
|
||||
"externalId": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Your application-specific unique string key to identify signer within your app."
|
||||
},
|
||||
"logo": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Public logo image URL to use in the signing form."
|
||||
},
|
||||
"language": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "UI language: en, es, it, de, fr, nl, pl, uk, cs, pt, he, ar, kr, ja languages are available. Be default the form is displayed in the user browser language automatically."
|
||||
},
|
||||
"i18n": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"default": "{}",
|
||||
"description": "Object that contains i18n keys to replace the default UI text with custom values. See <a href=\"https://github.com/docusealco/docuseal/blob/master/app/javascript/submission_form/i18n.js\" class=\"link\" target=\"_blank\" rel=\"nofollow\">submission_form/i18n.js</a> for available i18n keys."
|
||||
},
|
||||
"preview": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show form in preview mode without ability to submit it."
|
||||
},
|
||||
"goToLast": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Navigate to the last unfinished step."
|
||||
},
|
||||
"withFieldNames": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to hide field name. Hidding field names can be useful for when they are not in the human readable format. Field names are displayed by default."
|
||||
},
|
||||
"withFieldPlaceholder": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display field name placeholders instead of the field type icons."
|
||||
},
|
||||
"skipFields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Allow skipping form fields."
|
||||
},
|
||||
"autoscrollFields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disable auto-scrolling to the next document field."
|
||||
},
|
||||
"sendCopyEmail": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Set `false` to disable automatic email sending with signed documents to the signers. Emails with signed documents are sent to the signers by default."
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Form background color. Only HEX color codes are supported.",
|
||||
"example": "#d9d9d9"
|
||||
},
|
||||
"completedRedirectUrl": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "URL to redirect to after the submission completion.",
|
||||
"example": "https://docuseal.com/success"
|
||||
},
|
||||
"completedMessage": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Message displayed after the form completion.",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Message title.",
|
||||
"example": "Documents have been signed!"
|
||||
},
|
||||
"body": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Message content.",
|
||||
"example": "If you have any questions, please contact us."
|
||||
}
|
||||
}
|
||||
},
|
||||
"completedButton": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Customizable button after form completion.",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Button label.",
|
||||
"example": "Go Back"
|
||||
},
|
||||
"url": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Button link. Only absolute URLs are supported.",
|
||||
"example": "https://example.com"
|
||||
}
|
||||
}
|
||||
},
|
||||
"withTitle": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the document title from the form."
|
||||
},
|
||||
"withDecline": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display the decline button in the form."
|
||||
},
|
||||
"withDownloadButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the signed document download button from the completed form card."
|
||||
},
|
||||
"withSendCopyButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the signed document send email button from the completed form card."
|
||||
},
|
||||
"withCompleteButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display the complete button in the form header."
|
||||
},
|
||||
"allowToResubmit": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disallow user to re-submit the form."
|
||||
},
|
||||
"signature": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Allows pre-filling signature fields. The value can be a base64 encoded image string, a public URL to an image, or plain text that will be rendered as a typed signature using a standard font."
|
||||
},
|
||||
"rememberSignature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Allows to specify whether the signature should be remembered for future use. Remembered signatures are stored in the signer's browser local storage and can be automatically reused to prefill signature fields in new forms for the signer when the value is set to `true`."
|
||||
},
|
||||
"reuseSignature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to not reuse the signature in the second signature field and collect a new one."
|
||||
},
|
||||
"allowTypedSignature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disallow users to type their signature."
|
||||
},
|
||||
"values": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Pre-assigned values for form fields.",
|
||||
"example": "{ 'First Name': 'Jon', 'Last Name': 'Doe' }"
|
||||
},
|
||||
"metadata": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Metadata object with additional signer information.",
|
||||
"example": "{ customData: 'custom value' }"
|
||||
},
|
||||
"readonlyFields": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "List of read-only fields.",
|
||||
"example": "['First Name','Last Name']"
|
||||
},
|
||||
"customCss": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Custom CSS styles to be applied to the form.",
|
||||
"example": "#submit_form_button { background-color: #d9d9d9; }"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Callback
|
||||
|
||||
```json
|
||||
{
|
||||
"onInit": {
|
||||
"type": "event emitter",
|
||||
"required": false,
|
||||
"description": "Event emitted on initializing the form component.",
|
||||
"example": "handleInit($event)"
|
||||
},
|
||||
"onLoad": {
|
||||
"type": "event emitter",
|
||||
"required": false,
|
||||
"description": "Event emitted on loading the form data.",
|
||||
"example": "handleLoad($event)"
|
||||
},
|
||||
"onComplete": {
|
||||
"type": "event emitter",
|
||||
"required": false,
|
||||
"description": "Event emitted the form completion.",
|
||||
"example": "handleComplete($event)"
|
||||
},
|
||||
"onDecline": {
|
||||
"type": "event emitter",
|
||||
"required": false,
|
||||
"description": "Event emitted after the form decline.",
|
||||
"example": "handleDecline($event)"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,275 @@
|
||||
# JavaScript Signing Form
|
||||
|
||||
### Example Code
|
||||
|
||||
```javascript
|
||||
<script src="https://cdn.docuseal.com/js/form.js"></script>
|
||||
|
||||
<docuseal-form
|
||||
id="docusealForm"
|
||||
data-src="https://docuseal.com/d/{{template_slug}}"
|
||||
data-email="{{signer_email}}">
|
||||
</docuseal-form>
|
||||
|
||||
<script>
|
||||
window.docusealForm.addEventListener('completed', (e) => e.detail)
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
```json
|
||||
{
|
||||
"data-src": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Public URL of the document signing form. There are two types of URLs: <li><code>/d/{slug}</code> - template form signing URL can be copied from the template page in the admin dashboard. Also template \"slug\" key can be obtained via the <code>/templates</code> API.</li><li><code>/s/{slug}</code> - individual signer URL. Signer \"slug\" key can be obtained via the <code>/submissions</code> API which is used to initiate signature requests for a template form with recipients.</li>"
|
||||
},
|
||||
"data-email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Email address of the signer. Additional email form step will be displayed if the email attribute is not specified."
|
||||
},
|
||||
"data-name": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Name of the signer."
|
||||
},
|
||||
"data-role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "The role name or title of the signer.",
|
||||
"example": "First Party"
|
||||
},
|
||||
"data-expand": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Expand form on open.",
|
||||
"default": true
|
||||
},
|
||||
"data-minimize": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Set to `true` to always minimize form fields. Requires to click on the field to expand the form.",
|
||||
"default": false
|
||||
},
|
||||
"data-order-as-on-page": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Order form fields based on their position on the pages."
|
||||
},
|
||||
"data-preview": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show form in preview mode without ability to submit it."
|
||||
},
|
||||
"data-logo": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Public logo image URL to use in the signing form."
|
||||
},
|
||||
"data-language": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "UI language: en, es, it, de, fr, nl, pl, uk, cs, pt, he, ar, kr, ja languages are available. Be default the form is displayed in the user browser language automatically."
|
||||
},
|
||||
"data-i18n": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "{}",
|
||||
"description": "JSON encoded string that contains i18n keys to replace the default UI text with custom values. See <a href=\"https://github.com/docusealco/docuseal/blob/master/app/javascript/submission_form/i18n.js\" class=\"link\" target=\"_blank\" rel=\"nofollow\">submission_form/i18n.js</a> for available i18n keys."
|
||||
},
|
||||
"data-go-to-last": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Navigate to the last unfinished step."
|
||||
},
|
||||
"data-skip-fields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Allow skipping form fields."
|
||||
},
|
||||
"data-autoscroll-fields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disable auto-scrolling to the next document field."
|
||||
},
|
||||
"data-send-copy-email": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disable automatic email sending with signed documents to the signers. Emails with signed documents are sent to the signers by default."
|
||||
},
|
||||
"data-with-title": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the document title from the form."
|
||||
},
|
||||
"data-with-decline": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display the decline button in the form."
|
||||
},
|
||||
"data-with-field-names": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to hide field name. Hidding field names can be useful for when they are not in the human readable format. Field names are displayed by default."
|
||||
},
|
||||
"data-with-field-placeholder": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display field name placeholders instead of the field type icons."
|
||||
},
|
||||
"data-with-download-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the signed document download button from the completed form card."
|
||||
},
|
||||
"data-with-send-copy-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the signed document send email button from the completed form card."
|
||||
},
|
||||
"data-with-complete-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display the complete button in the form header."
|
||||
},
|
||||
"data-allow-to-resubmit": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disallow users to re-submit the form."
|
||||
},
|
||||
"data-allow-typed-signature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disallow users to type their signature."
|
||||
},
|
||||
"data-signature": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Allows pre-filling signature fields. The value can be a base64 encoded image string, a public URL to an image, or plain text that will be rendered as a typed signature using a standard font."
|
||||
},
|
||||
"data-remember-signature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Allows to specify whether the signature should be remembered for future use. Remembered signatures are stored in the signer's browser local storage and can be automatically reused to prefill signature fields in new forms for the signer when the value is set to `true`."
|
||||
},
|
||||
"data-reuse-signature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to not reuse the signature in the second signature field and collect a new one."
|
||||
},
|
||||
"data-background-color": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Form background color. Only HEX color codes are supported.",
|
||||
"example": "#d9d9d9"
|
||||
},
|
||||
"data-values": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Pre-assigned values for form fields.",
|
||||
"example": "{\"First Name\":\"Jon\",\"Last Name\":\"Doe\"}"
|
||||
},
|
||||
"data-external-id": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Your application-specific unique string key to identify signer within your app."
|
||||
},
|
||||
"data-metadata": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Signer metadata Object in JSON format. ",
|
||||
"example": "{\"customData\":\"customValue\"}"
|
||||
},
|
||||
"data-readonly-fields": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Comma separated read-only field names",
|
||||
"example": "First Name,Last Name"
|
||||
},
|
||||
"data-completed-redirect-url": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "URL to redirect to after the submission completion.",
|
||||
"example": "https://docuseal.com/success"
|
||||
},
|
||||
"data-completed-message-title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Message title displayed after the form completion.",
|
||||
"example": "Documents have been completed"
|
||||
},
|
||||
"data-completed-message-body": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Message body displayed after the form completion.",
|
||||
"example": "If you have any questions, please contact us."
|
||||
},
|
||||
"data-completed-button-title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Button title displayed after the form completion.",
|
||||
"example": "Go Back"
|
||||
},
|
||||
"data-completed-button-url": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "URL of the button displayed after the form completion.",
|
||||
"example": "https://example.com"
|
||||
},
|
||||
"data-custom-css": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Custom CSS styles to be applied to the form.",
|
||||
"example": "#submit_form_button { background-color: #d9d9d9; }"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Callback
|
||||
|
||||
```json
|
||||
{
|
||||
"init": {
|
||||
"type": "event",
|
||||
"required": false,
|
||||
"description": "Custom event to be triggered on initializing the form component.",
|
||||
"example": "document.querySelector('docuseal-form').addEventListener('init', () => console.log('init'))"
|
||||
},
|
||||
"load": {
|
||||
"type": "event",
|
||||
"required": false,
|
||||
"description": "Custom event to be triggered on loading the form data.",
|
||||
"example": "document.querySelector('docuseal-form').addEventListener('load', (e) => e.detail)"
|
||||
},
|
||||
"completed": {
|
||||
"type": "event",
|
||||
"required": false,
|
||||
"description": "Custom event to be triggered after form completion.",
|
||||
"example": "document.querySelector('docuseal-form').addEventListener('completed', (e) => e.detail)"
|
||||
},
|
||||
"declined": {
|
||||
"type": "event",
|
||||
"description": "Custom event to be triggered after form decline.",
|
||||
"example": "document.querySelector('docuseal-form').addEventListener('declined', (e) => e.detail)"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,292 @@
|
||||
# React Signing Form
|
||||
|
||||
### Example Code
|
||||
|
||||
```react
|
||||
import React from "react"
|
||||
import { DocusealForm } from '@docuseal/react'
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<DocusealForm
|
||||
src="https://docuseal.com/d/{{template_slug}}"
|
||||
email="{{signer_email}}"
|
||||
onComplete={(data) => console.log(data)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
```json
|
||||
{
|
||||
"src": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Public URL of the document signing form. There are two types of URLs: <li><code>/d/{slug}</code> - template form signing URL can be copied from the template page in the admin dashboard. Also template \"slug\" key can be obtained via the <code>/templates</code> API.</li><li><code>/s/{slug}</code> - individual signer URL. Signer \"slug\" key can be obtained via the <code>/submissions</code> API which is used to initiate signature requests for a template form with recipients.</li>"
|
||||
},
|
||||
"email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Email address of the signer. Additional email form step will be displayed if the email attribute is not specified."
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Name of the signer."
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "The role name or title of the signer.",
|
||||
"example": "First Party"
|
||||
},
|
||||
"expand": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Expand form on open.",
|
||||
"default": true
|
||||
},
|
||||
"minimize": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Set to `true` to always minimize form fields. Requires to click on the field to expand the form.",
|
||||
"default": false
|
||||
},
|
||||
"orderAsOnPage": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Order form fields based on their position on the pages."
|
||||
},
|
||||
"externalId": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Your application-specific unique string key to identify signer within your app."
|
||||
},
|
||||
"logo": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Public logo image URL to use in the signing form."
|
||||
},
|
||||
"language": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "UI language: en, es, it, de, fr, nl, pl, uk, cs, pt, he, ar, kr, ja languages are available. Be default the form is displayed in the user browser language automatically."
|
||||
},
|
||||
"i18n": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"default": "{}",
|
||||
"description": "Object that contains i18n keys to replace the default UI text with custom values. See <a href=\"https://github.com/docusealco/docuseal/blob/master/app/javascript/submission_form/i18n.js\" class=\"link\" target=\"_blank\" rel=\"nofollow\">submission_form/i18n.js</a> for available i18n keys."
|
||||
},
|
||||
"preview": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show form in preview mode without ability to submit it."
|
||||
},
|
||||
"goToLast": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Navigate to the last unfinished step."
|
||||
},
|
||||
"withFieldNames": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to hide field name. Hidding field names can be useful for when they are not in the human readable format. Field names are displayed by default."
|
||||
},
|
||||
"withFieldPlaceholder": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display field name placeholders instead of the field type icons."
|
||||
},
|
||||
"skipFields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Allow skipping form fields."
|
||||
},
|
||||
"autoscrollFields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disable auto-scrolling to the next document field."
|
||||
},
|
||||
"sendCopyEmail": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Set `false` to disable automatic email sending with signed documents to the signers. Emails with signed documents are sent to the signers by default."
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Form background color. Only HEX color codes are supported.",
|
||||
"example": "#d9d9d9"
|
||||
},
|
||||
"completedRedirectUrl": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "URL to redirect to after the submission completion.",
|
||||
"example": "https://docuseal.com/success"
|
||||
},
|
||||
"completedMessage": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Message displayed after the form completion.",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Message title.",
|
||||
"example": "Documents have been signed!"
|
||||
},
|
||||
"body": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Message content.",
|
||||
"example": "If you have any questions, please contact us."
|
||||
}
|
||||
}
|
||||
},
|
||||
"completedButton": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Customizable button after form completion.",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Button label.",
|
||||
"example": "Go Back"
|
||||
},
|
||||
"url": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Button link. Only absolute URLs are supported.",
|
||||
"example": "https://example.com"
|
||||
}
|
||||
}
|
||||
},
|
||||
"withTitle": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the document title from the form."
|
||||
},
|
||||
"withDecline": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display the decline button in the form."
|
||||
},
|
||||
"withDownloadButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the signed document download button from the completed form card."
|
||||
},
|
||||
"withSendCopyButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the signed document send email button from the completed form card."
|
||||
},
|
||||
"withCompleteButton": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display the complete button in the form header."
|
||||
},
|
||||
"allowToResubmit": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disallow user to re-submit the form."
|
||||
},
|
||||
"allowTypedSignature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disallow users to type their signature."
|
||||
},
|
||||
"signature": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Allows pre-filling signature fields. The value can be a base64 encoded image string, a public URL to an image, or plain text that will be rendered as a typed signature using a standard font."
|
||||
},
|
||||
"rememberSignature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Allows to specify whether the signature should be remembered for future use. Remembered signatures are stored in the signer's browser local storage and can be automatically reused to prefill signature fields in new forms for the signer when the value is set to `true`."
|
||||
},
|
||||
"reuseSignature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to not reuse the signature in the second signature field and collect a new one."
|
||||
},
|
||||
"values": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Pre-assigned values for form fields.",
|
||||
"example": "{ 'First Name': 'Jon', 'Last Name': 'Doe' }"
|
||||
},
|
||||
"metadata": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Metadata object with additional signer information.",
|
||||
"example": "{ customData: 'custom value' }"
|
||||
},
|
||||
"readonlyFields": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "List of read-only fields.",
|
||||
"example": "['First Name','Last Name']"
|
||||
},
|
||||
"customCss": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Custom CSS styles to be applied to the form.",
|
||||
"example": "#submit_form_button { background-color: #d9d9d9; }"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Callback
|
||||
|
||||
```json
|
||||
{
|
||||
"onInit": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on initializing the form component.",
|
||||
"example": "() => { console.log(\"Loaded\") }"
|
||||
},
|
||||
"onLoad": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on loading the form data.",
|
||||
"example": "(data) => { console.log(data) }"
|
||||
},
|
||||
"onComplete": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called after the form completion.",
|
||||
"example": "(data) => { console.log(data) }"
|
||||
},
|
||||
"onDecline": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called after the form decline.",
|
||||
"example": "(data) => { console.log(data) }"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,302 @@
|
||||
# Vue Signing Form
|
||||
|
||||
### Example Code
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<DocusealForm
|
||||
:src="'https://docuseal.com/d/{{template_slug}}'"
|
||||
:email="'{{signer_email}}'"
|
||||
@complete="onFormComplete"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DocusealForm } from '@docuseal/vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
DocusealForm
|
||||
},
|
||||
methods: {
|
||||
onFormComplete (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
```json
|
||||
{
|
||||
"src": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Public URL of the document signing form. There are two types of URLs: <li><code>/d/{slug}</code> - template form signing URL can be copied from the template page in the admin dashboard. Also template \"slug\" key can be obtained via the <code>/templates</code> API.</li><li><code>/s/{slug}</code> - individual signer URL. Signer \"slug\" key can be obtained via the <code>/submissions</code> API which is used to initiate signature requests for a template form with recipients.</li>"
|
||||
},
|
||||
"email": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Email address of the signer. Additional email form step will be displayed if the email attribute is not specified."
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Name of the signer."
|
||||
},
|
||||
"role": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "The role name or title of the signer.",
|
||||
"example": "First Party"
|
||||
},
|
||||
"external-id": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Your application-specific unique string key to identify signer within your app."
|
||||
},
|
||||
"expand": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Expand form on open.",
|
||||
"default": true
|
||||
},
|
||||
"minimize": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Set to `true` to always minimize form fields. Requires to click on the field to expand the form.",
|
||||
"default": false
|
||||
},
|
||||
"order-as-on-page": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Order form fields based on their position on the pages."
|
||||
},
|
||||
"logo": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Public logo image URL to use in the signing form."
|
||||
},
|
||||
"language": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "UI language: en, es, it, de, fr, nl, pl, uk, cs, pt, he, ar, kr, ja languages are available. Be default the form is displayed in the user browser language automatically."
|
||||
},
|
||||
"i18n": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"default": "{}",
|
||||
"description": "Object that contains i18n keys to replace the default UI text with custom values. See <a href=\"https://github.com/docusealco/docuseal/blob/master/app/javascript/submission_form/i18n.js\" class=\"link\" target=\"_blank\" rel=\"nofollow\">submission_form/i18n.js</a> for available i18n keys."
|
||||
},
|
||||
"preview": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Show form in preview mode without ability to submit it."
|
||||
},
|
||||
"go-to-last": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Navigate to the last unfinished step."
|
||||
},
|
||||
"skip-fields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Allow skipping form fields."
|
||||
},
|
||||
"autoscroll-fields": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disable auto-scrolling to the next document field."
|
||||
},
|
||||
"with-field-names": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to hide field name. Hidding field names can be useful for when they are not in the human readable format. Field names are displayed by default."
|
||||
},
|
||||
"with-field-placeholder": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display field name placeholders instead of the field type icons."
|
||||
},
|
||||
"send-copy-email": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disable automatic email sending with signed documents to the signers. Emails with signed documents are sent to the signers by default."
|
||||
},
|
||||
"background-color": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Form background color. Only HEX color codes are supported.",
|
||||
"example": "#d9d9d9"
|
||||
},
|
||||
"with-title": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the document title from the form."
|
||||
},
|
||||
"with-decline": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display the decline button in the form."
|
||||
},
|
||||
"with-download-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the signed document download button from the completed form card."
|
||||
},
|
||||
"with-send-copy-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to remove the signed document send email button from the completed form card."
|
||||
},
|
||||
"with-complete-button": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": false,
|
||||
"description": "Set `true` to display the complete button in the form header."
|
||||
},
|
||||
"allow-to-resubmit": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disallow user to re-submit the form."
|
||||
},
|
||||
"signature": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Allows pre-filling signature fields. The value can be a base64 encoded image string, a public URL to an image, or plain text that will be rendered as a typed signature using a standard font."
|
||||
},
|
||||
"remember-signature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"description": "Allows to specify whether the signature should be remembered for future use. Remembered signatures are stored in the signer's browser local storage and can be automatically reused to prefill signature fields in new forms for the signer when the value is set to `true`."
|
||||
},
|
||||
"reuse-signature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to not reuse the signature in the second signature field and collect a new one."
|
||||
},
|
||||
"allow-typed-signature": {
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": true,
|
||||
"description": "Set `false` to disallow users to type their signature."
|
||||
},
|
||||
"completed-redirect-url": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "URL to redirect to after the submission completion.",
|
||||
"example": "https://docuseal.com/success"
|
||||
},
|
||||
"completed-message": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Message displayed after the form completion.",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Message title.",
|
||||
"example": "Documents have been signed!"
|
||||
},
|
||||
"body": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Message content.",
|
||||
"example": "If you have any questions, please contact us."
|
||||
}
|
||||
}
|
||||
},
|
||||
"completed-button": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Customizable button after form completion.",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Button label.",
|
||||
"example": "Go Back"
|
||||
},
|
||||
"url": {
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Button link. Only absolute URLs are supported.",
|
||||
"example": "https://example.com"
|
||||
}
|
||||
}
|
||||
},
|
||||
"values": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Pre-assigned values for form fields.",
|
||||
"example": "{ 'First Name': 'Jon', 'Last Name': 'Doe' }"
|
||||
},
|
||||
"metadata": {
|
||||
"type": "object",
|
||||
"required": false,
|
||||
"description": "Metadata object with additional signer information.",
|
||||
"example": "{ customData: 'custom value' }"
|
||||
},
|
||||
"readonly-fields": {
|
||||
"type": "array",
|
||||
"required": false,
|
||||
"description": "List of read-only fields.",
|
||||
"example": "['First Name','Last Name']"
|
||||
},
|
||||
"custom-css": {
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"description": "Custom CSS styles to be applied to the form.",
|
||||
"example": "#submit_form_button { background-color: #d9d9d9; }"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Callback
|
||||
|
||||
```json
|
||||
{
|
||||
"@init": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on initializing the form component.",
|
||||
"example": "onFormLoad"
|
||||
},
|
||||
"@load": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called on loading the form data.",
|
||||
"example": "onFormLoad"
|
||||
},
|
||||
"@complete": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called after the form completion.",
|
||||
"example": "onFormComplete"
|
||||
},
|
||||
"@decline": {
|
||||
"type": "function",
|
||||
"required": false,
|
||||
"description": "Function to be called after the form decline.",
|
||||
"example": "onFormDecline"
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user