mirror of https://github.com/docusealco/docuseal
Alex Turchyn
5 months ago
committed by
GitHub
commit
019222ae40
@ -0,0 +1,24 @@
|
|||||||
|
# frozen_string_literal: true
|
||||||
|
|
||||||
|
# == Schema Information
|
||||||
|
#
|
||||||
|
# Table name: account_accesses
|
||||||
|
#
|
||||||
|
# id :bigint not null, primary key
|
||||||
|
# created_at :datetime not null
|
||||||
|
# updated_at :datetime not null
|
||||||
|
# account_id :bigint not null
|
||||||
|
# user_id :bigint not null
|
||||||
|
#
|
||||||
|
# Indexes
|
||||||
|
#
|
||||||
|
# index_account_accesses_on_account_id_and_user_id (account_id,user_id) UNIQUE
|
||||||
|
#
|
||||||
|
# Foreign Keys
|
||||||
|
#
|
||||||
|
# fk_rails_... (account_id => accounts.id)
|
||||||
|
#
|
||||||
|
class AccountAccess < ApplicationRecord
|
||||||
|
belongs_to :account
|
||||||
|
belongs_to :user
|
||||||
|
end
|
||||||
@ -1,12 +1,52 @@
|
|||||||
<div class="text-center">
|
<% eu_server = request.host == 'docuseal.eu' %>
|
||||||
<div class="join">
|
<server-selector>
|
||||||
<a href="https://docuseal.com<%= request.fullpath.gsub('docuseal.eu', 'docuseal.com') %>" class="btn bg-base-200 join-item w-32 <%= 'bg-base-300' if request.host == 'docuseal.com' %>">
|
<div id="global_server_selector" class="text-center hidden">
|
||||||
<%= svg_icon 'world', class: 'w-5 h-5' %>
|
<div class="join">
|
||||||
Global
|
<a href="https://docuseal.com<%= request.fullpath.gsub('docuseal.eu', 'docuseal.com') %>" class="btn bg-base-200 join-item w-40 <%= 'bg-base-300' unless eu_server %>">
|
||||||
</a>
|
<%= svg_icon 'world', class: 'w-5 h-5' %>
|
||||||
<a href="https://docuseal.eu<%= request.fullpath.gsub('docuseal.com', 'docuseal.eu') %>" class="btn bg-base-200 join-item w-32 <%= 'bg-base-300' if request.host == 'docuseal.eu' %>">
|
Global
|
||||||
<%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
|
</a>
|
||||||
Europe
|
<a href="https://docuseal.eu<%= request.fullpath.gsub('docuseal.com', 'docuseal.eu') %>" class="relative btn bg-base-200 join-item w-40 <%= 'bg-base-300' if eu_server %>">
|
||||||
</a>
|
<%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
|
||||||
|
Europe
|
||||||
|
<% unless eu_server %>
|
||||||
|
<span id="eu_server_alert" class="absolute flex space-x-0.5 hidden" style="top: -1.5rem;">
|
||||||
|
<span class="text-xs font-normal leading-none text-base-content normal-case">
|
||||||
|
<%= t('eu_data_residency') %>
|
||||||
|
</span>
|
||||||
|
<%= svg_icon 'corner_right_down', class: 'w-4 h-5 stroke-1 shrink-0 pt-1' %>
|
||||||
|
</span>
|
||||||
|
<% end %>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="us_server_selector" class="flex justify-center hidden">
|
||||||
|
<div class="dropdown">
|
||||||
|
<label tabindex="0" class="relative btn btn-sm bg-transparent font-medium normal-case border-base-content/20 justify-start" style="width: 141px; padding: 0 20px">
|
||||||
|
<% if eu_server %>
|
||||||
|
<%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
|
||||||
|
<span>EU Cloud</span>
|
||||||
|
<% else %>
|
||||||
|
<%= svg_icon 'usa_flag', class: 'w-5 h-5' %>
|
||||||
|
<span>US Cloud</span>
|
||||||
|
<% end %>
|
||||||
|
<%= svg_icon 'chevron_down', class: 'mr-1 w-4 h-4 absolute right-1' %>
|
||||||
|
</label>
|
||||||
|
<ul tabindex="0" class="dropdown-content z-[1] menu border border-base-content/20 mt-1 bg-base-100 rounded-box w-36">
|
||||||
|
<li>
|
||||||
|
<a href="https://docuseal.com<%= request.fullpath.gsub('docuseal.eu', 'docuseal.com') %>" class="flex items-center space-x-2 <%= 'bg-base-300' unless eu_server %>">
|
||||||
|
<%= svg_icon 'usa_flag', class: 'w-5 h-5' %>
|
||||||
|
US Cloud
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://docuseal.eu<%= request.fullpath.gsub('docuseal.com', 'docuseal.eu') %>" class="flex items-center space-x-2 <%= 'bg-base-300' if eu_server %>">
|
||||||
|
<%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
|
||||||
|
EU Cloud
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</server-selector>
|
||||||
|
<%= render 'scripts/server_selector' %>
|
||||||
|
|||||||
|
After Width: | Height: | Size: 285 B |
|
After Width: | Height: | Size: 671 B |
@ -0,0 +1,22 @@
|
|||||||
|
<script>
|
||||||
|
if (!window.customElements.get('server-selector')) {
|
||||||
|
customElements.define('server-selector', class extends HTMLElement {
|
||||||
|
connectedCallback() {
|
||||||
|
const usServerSelector = this.querySelector('#us_server_selector');
|
||||||
|
const globalServerSelector = this.querySelector('#global_server_selector');
|
||||||
|
const euServerAlert = this.querySelector('#eu_server_alert');
|
||||||
|
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||||
|
const usTimezones = /^(?:America\/(?:New_York|Detroit|Kentucky|Indiana|Chicago|Menominee|North_Dakota|Denver|Boise|Phoenix|Los_Angeles|Anchorage|Juneau|Sitka|Metlakatla|Yakutat|Nome|Adak)|Pacific\/Honolulu)/;
|
||||||
|
|
||||||
|
if (usTimezones.test(timezone)) {
|
||||||
|
usServerSelector.classList.remove('hidden');
|
||||||
|
} else if (timezone.includes('Europe')) {
|
||||||
|
globalServerSelector.classList.remove('hidden');
|
||||||
|
euServerAlert?.classList?.remove('hidden');
|
||||||
|
} else {
|
||||||
|
globalServerSelector.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -1 +1 @@
|
|||||||
<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open' %>
|
<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/30 before:border-base-content/30' %>
|
||||||
|
|||||||
@ -0,0 +1,14 @@
|
|||||||
|
# frozen_string_literal: true
|
||||||
|
|
||||||
|
class AccountAccesses < ActiveRecord::Migration[8.0]
|
||||||
|
def change
|
||||||
|
create_table :account_accesses do |t|
|
||||||
|
t.references :account, null: false, foreign_key: true, index: false
|
||||||
|
t.references :user, null: false, foreign_key: false, index: false
|
||||||
|
|
||||||
|
t.index %i[account_id user_id], unique: true
|
||||||
|
|
||||||
|
t.timestamps
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,247 @@
|
|||||||
|
# Form Webhook
|
||||||
|
|
||||||
|
During the form filling and signing process, 3 types of events may occur and are dispatched at different stages:
|
||||||
|
|
||||||
|
- **'form.viewed'** event is triggered when the submitter first opens the form.
|
||||||
|
- **'form.started'** event is triggered when the submitter initiates filling out the form.
|
||||||
|
- **'form.completed'** event is triggered upon successful form completion and signing by one of the parties.
|
||||||
|
- **'form.declined'** event is triggered when a signer declines the submission.
|
||||||
|
|
||||||
|
It's important to note that each of these events contain information available at the time of dispatch, so some data may be missing or incomplete depending on the specific event. Failed webhook requests (4xx, 5xx) are automatically retried multiple times within 48 hours (every 2^attempt minutes) for all production accounts.
|
||||||
|
**Related Guides**
|
||||||
|
[Download Signed Documents](https://www.docuseal.com/guides/download-signed-documents)
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"event_type": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The event type.",
|
||||||
|
"enum": [
|
||||||
|
"form.viewed",
|
||||||
|
"form.started",
|
||||||
|
"form.completed"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"timestamp": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The event timestamp.",
|
||||||
|
"example": "2023-09-24T11:20:42Z",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Submitted data object.",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "The submitter's unique identifier."
|
||||||
|
},
|
||||||
|
"submission_id": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "The unique submission identifier."
|
||||||
|
},
|
||||||
|
"email": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submitter's email address",
|
||||||
|
"format": "email",
|
||||||
|
"example": "john.doe@example.com"
|
||||||
|
},
|
||||||
|
"ua": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The user agent string that provides information about the submitter's web browser.",
|
||||||
|
"example": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"
|
||||||
|
},
|
||||||
|
"ip": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submitter's IP address."
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submitter's name."
|
||||||
|
},
|
||||||
|
"phone": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submitter's phone number, formatted according to the E.164 standard.",
|
||||||
|
"example": "+1234567890"
|
||||||
|
},
|
||||||
|
"role": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submitter's role name or title.",
|
||||||
|
"example": "First Party"
|
||||||
|
},
|
||||||
|
"external_id": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Your application-specific unique string key to identify submitter within your app."
|
||||||
|
},
|
||||||
|
"application_key": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Your application-specific unique string key to identify submitter within your app. Backward compatibility with the previous version of the API. Use external_id instead."
|
||||||
|
},
|
||||||
|
"decline_reason": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Submitter provided decline message."
|
||||||
|
},
|
||||||
|
"sent_at": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submitter status.",
|
||||||
|
"enum": [
|
||||||
|
"completed",
|
||||||
|
"declined",
|
||||||
|
"opened",
|
||||||
|
"sent",
|
||||||
|
"awaiting"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"opened_at": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"completed_at": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"declined_at": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"submission": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "The submission details.",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "The submission's unique identifier."
|
||||||
|
},
|
||||||
|
"audit_log_url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The audit log PDF URL. Available only if the submission was completed by all submitters."
|
||||||
|
},
|
||||||
|
"combined_document_url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The URL of the combined documents with audit log. Combined documents can be enabled via <a href=\"https://docuseal.com/settings/account\" target=\"_blank\" class=\"link\">/settings/accounts</a>."
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submission status.",
|
||||||
|
"enum": [
|
||||||
|
"completed",
|
||||||
|
"declined",
|
||||||
|
"expired",
|
||||||
|
"pending"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submission URL."
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submission creation date.",
|
||||||
|
"format": "date-time"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"template": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Base template details.",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "The template's unique identifier."
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The template's name."
|
||||||
|
},
|
||||||
|
"external_id": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Your application-specific unique string key to identify template within your app."
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"folder_name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Template folder name."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"preferences": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"send_email": {
|
||||||
|
"type": "boolean",
|
||||||
|
"description": "The flag indicating whether the submitter has opted to receive an email."
|
||||||
|
},
|
||||||
|
"send_sms": {
|
||||||
|
"type": "boolean",
|
||||||
|
"description": "The flag indicating whether the submitter has opted to receive an SMS."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"values": {
|
||||||
|
"type": "array",
|
||||||
|
"description": "List of the filled values passed by the submitter.",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"field": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The field name."
|
||||||
|
},
|
||||||
|
"values": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The field value."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"metadata": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Metadata object with additional submitter information."
|
||||||
|
},
|
||||||
|
"audit_log_url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The audit log PDF URL. Available only if the submission was completed by all submitters."
|
||||||
|
},
|
||||||
|
"submission_url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submission URL."
|
||||||
|
},
|
||||||
|
"documents": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The document file name."
|
||||||
|
},
|
||||||
|
"url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The document file URL."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,317 @@
|
|||||||
|
# Submission Webhook
|
||||||
|
|
||||||
|
Get submission creation, completion, expiration, and archiving notifications using these events:
|
||||||
|
|
||||||
|
- **'submission.created'** event is triggered when the submission is created.
|
||||||
|
- **'submission.completed'** event is triggered when the submission is completed by all signing parties.
|
||||||
|
- **'submission.expired'** event is triggered when the submission expires.
|
||||||
|
- **'submission.archived'** event is triggered when the submission is archived.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"event_type": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The event type.",
|
||||||
|
"enum": [
|
||||||
|
"submission.created",
|
||||||
|
"submission.archived"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"timestamp": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The event timestamp.",
|
||||||
|
"example": "2023-09-24T11:20:42Z",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Submitted data object.",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "The submission's unique identifier."
|
||||||
|
},
|
||||||
|
"archived_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submission archive date."
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submission creation date."
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submission update date."
|
||||||
|
},
|
||||||
|
"source": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submission source.",
|
||||||
|
"enum": [
|
||||||
|
"invite",
|
||||||
|
"bulk",
|
||||||
|
"api",
|
||||||
|
"embed",
|
||||||
|
"link"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"submitters_order": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submitters order.",
|
||||||
|
"enum": [
|
||||||
|
"random",
|
||||||
|
"preserved"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"audit_log_url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Audit log file URL."
|
||||||
|
},
|
||||||
|
"submitters": {
|
||||||
|
"type": "array",
|
||||||
|
"description": "The list of submitters for the submission.",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "The submitter's unique identifier."
|
||||||
|
},
|
||||||
|
"submission_id": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "The unique submission identifier."
|
||||||
|
},
|
||||||
|
"uuid": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submitter UUID."
|
||||||
|
},
|
||||||
|
"email": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The email address of the submitter.",
|
||||||
|
"format": "email",
|
||||||
|
"example": "john.doe@example.com"
|
||||||
|
},
|
||||||
|
"slug": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The unique slug of the document template."
|
||||||
|
},
|
||||||
|
"sent_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The date and time when the signing request was sent to the submitter."
|
||||||
|
},
|
||||||
|
"opened_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The date and time when the submitter opened the signing form."
|
||||||
|
},
|
||||||
|
"completed_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The date and time when the submitter completed the signing form."
|
||||||
|
},
|
||||||
|
"declined_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The date and time when the submitter declined the signing form."
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The date and time when the submitter was created."
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The date and time when the submitter was last updated."
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The name of the submitter."
|
||||||
|
},
|
||||||
|
"phone": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The phone number of the submitter, formatted according to the E.164 standard.",
|
||||||
|
"example": "+1234567890"
|
||||||
|
},
|
||||||
|
"role": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The role name or title of the submitter.",
|
||||||
|
"example": "First Party"
|
||||||
|
},
|
||||||
|
"external_id": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Your application-specific unique string key to identify this submitter within your app."
|
||||||
|
},
|
||||||
|
"metadata": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Metadata object with additional submitter information.",
|
||||||
|
"example": "{ 'customField': 'value' }"
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submitter status.",
|
||||||
|
"enum": [
|
||||||
|
"completed",
|
||||||
|
"declined",
|
||||||
|
"opened",
|
||||||
|
"sent",
|
||||||
|
"awaiting"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"application_key": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Your application-specific unique string key to identify this submitter within your app."
|
||||||
|
},
|
||||||
|
"values": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "An object with pre-filled values for the submission. Use field names for keys of the object. For more configurations see `fields` param."
|
||||||
|
},
|
||||||
|
"documents": {
|
||||||
|
"type": "array",
|
||||||
|
"description": "The list of documents for the submission.",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The document file name."
|
||||||
|
},
|
||||||
|
"url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The document file URL."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"preferences": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "The submitter preferences."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"template": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Base template details.",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "The template's unique identifier."
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The template's name."
|
||||||
|
},
|
||||||
|
"external_id": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Your application-specific unique string key to identify template within your app."
|
||||||
|
},
|
||||||
|
"folder_name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The folder name."
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The date and time when the template was created."
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The date and time when the template was last updated."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"created_by_user": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "integer",
|
||||||
|
"description": "Unique identifier of the user who created the submission."
|
||||||
|
},
|
||||||
|
"first_name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The first name of the user who created the submission."
|
||||||
|
},
|
||||||
|
"last_name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The last name of the user who created the submission."
|
||||||
|
},
|
||||||
|
"email": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The email address of the user who created the submission."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"submission_events": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "integer",
|
||||||
|
"description": "Submission event unique ID number."
|
||||||
|
},
|
||||||
|
"submitter_id": {
|
||||||
|
"type": "integer",
|
||||||
|
"description": "Unique identifier of the submitter that triggered the event."
|
||||||
|
},
|
||||||
|
"event_type": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Event type.",
|
||||||
|
"enum": [
|
||||||
|
"send_email",
|
||||||
|
"bounce_email",
|
||||||
|
"complaint_email",
|
||||||
|
"send_reminder_email",
|
||||||
|
"send_sms",
|
||||||
|
"send_2fa_sms",
|
||||||
|
"open_email",
|
||||||
|
"click_email",
|
||||||
|
"click_sms",
|
||||||
|
"phone_verified",
|
||||||
|
"start_form",
|
||||||
|
"start_verification",
|
||||||
|
"complete_verification",
|
||||||
|
"view_form",
|
||||||
|
"invite_party",
|
||||||
|
"complete_form",
|
||||||
|
"decline_form",
|
||||||
|
"api_complete_form"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"event_timestamp": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Date and time when the event was triggered."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"documents": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Document name."
|
||||||
|
},
|
||||||
|
"url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Document URL."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The status of the submission.",
|
||||||
|
"enum": [
|
||||||
|
"completed",
|
||||||
|
"declined",
|
||||||
|
"expired",
|
||||||
|
"pending"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"completed_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The date and time when the submission was fully completed."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,235 @@
|
|||||||
|
# Template Webhook
|
||||||
|
|
||||||
|
Get template creation and update notifications using these events:
|
||||||
|
|
||||||
|
- **'template.created'** is triggered when the template is created.
|
||||||
|
- **'tempate.updated'** is triggered when the template is updated.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"event_type": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The event type.",
|
||||||
|
"enum": [
|
||||||
|
"template.created",
|
||||||
|
"template.updated"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"timestamp": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The event timestamp.",
|
||||||
|
"example": "2023-09-24T11:20:42Z",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Submitted data object.",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "The template's unique identifier."
|
||||||
|
},
|
||||||
|
"slug": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The template's unique slug."
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The template's name."
|
||||||
|
},
|
||||||
|
"schema": {
|
||||||
|
"type": "array",
|
||||||
|
"description": "The template document files.",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"attachment_uuid": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The attachment UUID."
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The attachment name."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"fields": {
|
||||||
|
"type": "array",
|
||||||
|
"description": "The template fields.",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"uuid": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The field UUID."
|
||||||
|
},
|
||||||
|
"submitter_uuid": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The submitter role UUID."
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "The field name."
|
||||||
|
},
|
||||||
|
"required": {
|
||||||
|
"type": "boolean",
|
||||||
|
"description": "The flag indicating whether the field is required."
|
||||||
|
},
|
||||||
|
"preferences": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "The field preferences."
|
||||||
|
},
|
||||||
|
"areas": {
|
||||||
|
"type": "array",
|
||||||
|
"description": "List of areas where the field is located in the document.",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"x": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "X coordinate of the area where the field is located in the document."
|
||||||
|
},
|
||||||
|
"y": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "Y coordinate of the area where the field is located in the document."
|
||||||
|
},
|
||||||
|
"w": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "Width of the area where the field is located in the document."
|
||||||
|
},
|
||||||
|
"h": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "Height of the area where the field is located in the document."
|
||||||
|
},
|
||||||
|
"attachment_uuid": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Unique identifier of the attached document where the field is located."
|
||||||
|
},
|
||||||
|
"page": {
|
||||||
|
"type": "integer",
|
||||||
|
"description": "Page number of the attached document where the field is located."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"submitters": {
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Submitter name."
|
||||||
|
},
|
||||||
|
"uuid": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Unique identifier of the submitter."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"author_id": {
|
||||||
|
"type": "integer",
|
||||||
|
"description": "Unique identifier of the author of the template."
|
||||||
|
},
|
||||||
|
"account_id": {
|
||||||
|
"type": "integer",
|
||||||
|
"description": "Unique identifier of the account of the template."
|
||||||
|
},
|
||||||
|
"archived_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Date and time when the template was archived."
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Date and time when the template was created."
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Date and time when the template was updated."
|
||||||
|
},
|
||||||
|
"source": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Source of the template.",
|
||||||
|
"enum": [
|
||||||
|
"native",
|
||||||
|
"api",
|
||||||
|
"embed"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"external_id": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Identifier of the template in the external system."
|
||||||
|
},
|
||||||
|
"folder_id": {
|
||||||
|
"type": "integer",
|
||||||
|
"description": "Unique identifier of the folder where the template is placed."
|
||||||
|
},
|
||||||
|
"folder_name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Folder name where the template is placed."
|
||||||
|
},
|
||||||
|
"application_key": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Your application-specific unique string key to identify tempate_id within your app."
|
||||||
|
},
|
||||||
|
"author": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "integer",
|
||||||
|
"description": "Unique identifier of the author."
|
||||||
|
},
|
||||||
|
"first_name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "First name of the author."
|
||||||
|
},
|
||||||
|
"last_name": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Last name of the author."
|
||||||
|
},
|
||||||
|
"email": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Author email."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"documents": {
|
||||||
|
"type": "array",
|
||||||
|
"description": "List of documents attached to the template.",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "integer",
|
||||||
|
"description": "Unique identifier of the document."
|
||||||
|
},
|
||||||
|
"uuid": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Unique identifier of the document."
|
||||||
|
},
|
||||||
|
"url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "URL of the document."
|
||||||
|
},
|
||||||
|
"preview_image_url": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Document preview image URL."
|
||||||
|
},
|
||||||
|
"filename": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Document filename."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
# frozen_string_literal: true
|
||||||
|
|
||||||
|
require 'rails_helper'
|
||||||
|
|
||||||
|
RSpec.describe 'Template Builder' do
|
||||||
|
let(:account) { create(:account) }
|
||||||
|
let(:author) { create(:user, account:) }
|
||||||
|
let(:template) { create(:template, account:, author:, attachment_count: 3, except_field_types: %w[phone payment]) }
|
||||||
|
|
||||||
|
before do
|
||||||
|
sign_in(author)
|
||||||
|
end
|
||||||
|
|
||||||
|
context 'when manage template documents' do
|
||||||
|
before do
|
||||||
|
visit edit_template_path(template)
|
||||||
|
end
|
||||||
|
|
||||||
|
it 'replaces the document' do
|
||||||
|
doc = find("div[id='documents_container'] div[data-document-uuid='#{template.schema[1]['attachment_uuid']}'")
|
||||||
|
doc.click
|
||||||
|
|
||||||
|
expect do
|
||||||
|
doc.find('.replace-document-button').click
|
||||||
|
doc.find('.replace-document-button input[type="file"]', visible: false)
|
||||||
|
.attach_file(Rails.root.join('spec/fixtures/sample-image.png'))
|
||||||
|
|
||||||
|
page.driver.wait_for_network_idle
|
||||||
|
end.to change { template.documents.count }.by(1)
|
||||||
|
|
||||||
|
expect(page).to have_content('sample-image')
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
Loading…
Reference in new issue