This component enables seamless integration of a signing form within any section of your website or application. It offers compatibility with JS+HTML, Vue, Angular and React, providing you with versatile options for integration.
import React from "react"
import { DocusealForm } from '@docuseal/react'
export function App() {
return (
<div className="app">
<DocusealForm
src="https://docuseal.com/d/LEVGR9rhZYf86M"
email="signer@example.com"
onComplete={(data) => console.log(data)}
/>
</div>
);
}
src String required
Public URL of the document signing form. There are two types of URLs:
/d/{slug} - template form signing URL can be copied from the template page in the admin dashboard. Also template "slug" key can be obtained via the /templates API./s/{slug} - individual signer URL. Signer "slug" key can be obtained via the /submissions API which is used to initiate signature requests for a template form with recipients.email String
Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.
name String
Name of the signer.
role String
The role name or title of the signer.
Example: First Party
token String
JSON Web Token (JWT HS256) with a payload signed using the API key. JWT can be generated only on the backend.
slug String required
Template or Submitter slug. When Submitter slug is used no need to pass additional email param.
email String
Email address of the signer. Additional email form step will be displayed if the email attribute is not specified with Template slug.
external_id String
Your application-specific unique string key to identify signer within your app.
preview Boolean
Show form in preview mode without ability to submit it.
Default: false
preview Boolean
Show form in preview mode without ability to submit it. Completed documents embedded in preview mode require `token` authentication.
Default: false
expand Boolean
Expand form on open.
Default: true
minimize Boolean
Set to `true` to always minimize form fields. Requires to click on the field to expand the form.
Default: false
orderAsOnPage Boolean
Order form fields based on their position on the pages.
Default: false
logo String
Public logo image URL to use in the signing form.
language String
UI language: en, es, it, de, fr, nl, pl, uk, cs, pt, he, ar, kr, ja languages are available. By default the form is displayed in the user browser language automatically.
i18n Object
Object that contains i18n keys to replace the default UI text with custom values. See submission_form/i18n.js for available i18n keys.
Default: {}
goToLast Boolean
Navigate to the last unfinished step.
Default: true
withFieldNames Boolean
Set `false` to hide field name. Hiding field names can be useful for when they are not in the human readable format. Field names are displayed by default.
Default: true
withFieldPlaceholder Boolean
Set `true` to display field name placeholders instead of the field type icons.
Default: false
skipFields Boolean
Allow skipping form fields.
Default: false
autoscrollFields Boolean
Set `false` to disable auto-scrolling to the next document field.
Default: true
sendCopyEmail Boolean
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 String
Form background color. Only HEX color codes are supported.
Example: #d9d9d9
completedRedirectUrl String
URL to redirect to after the submission completion.
Example: https://docuseal.com/success
completedMessage Object
Message displayed after the form completion.
title String
Message title.
Example: Documents have been signed!
body String
Message content.
Example: If you have any questions, please contact us.
completedButton Object
Customizable button after form completion.
title String required
Button label.
Example: Go Back
url String required
Button link. Only absolute URLs are supported.
Example: https://example.com
withTitle Boolean
Set `false` to remove the document title from the form.
Default: true
withDecline Boolean
Set `true` to display the decline button in the form.
Default: false
withDownloadButton Boolean
Set `false` to remove the signed document download button from the completed form card.
Default: true
withSendCopyButton Boolean
Set `false` to remove the signed document send email button from the completed form card.
Default: true
withCompleteButton Boolean
Set `true` to display the complete button in the form header.
Default: false
onlyRequiredFields Boolean
Set to `true` to display only required fields in the step-by-step form, hiding all optional fields.
Default: false
allowToResubmit Boolean
Set `false` to disallow user to re-submit the form.
Default: true
allowTypedSignature Boolean
Set `false` to disallow users to type their signature.
Default: true
signature String
Allows pre-filling signature fields. The value can be a base64 encoded data:image/ string, a public URL to an image, or plain text that will be rendered as a typed signature using a standard font.
rememberSignature Boolean
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 Boolean
Set `false` to not reuse the signature in the second signature field and collect a new one.
Default: true
values Object
Pre-assigned values for form fields.
Example: { 'First Name': 'Jon', 'Last Name': 'Doe' }
externalId String
Your application-specific unique string key to identify signer within your app.
metadata Object
Metadata object with additional signer information.
Example: { customData: 'custom value' }
readonlyFields Array
List of read-only fields.
Example: ['First Name','Last Name']
customCss String
Custom CSS styles to be applied to the form.
Example: #submit_form_button { background-color: #d9d9d9; }
onInit Function
Function to be called on initializing the form component.
Example: () => { console.log("Loaded") }
onLoad Function
Function to be called on loading the form data.
Example: (data) => { console.log(data) }
onComplete Function
Function to be called after the form completion.
Example: (data) => { console.log(data) }
onDecline Function
Function to be called after the form decline.
Example: (data) => { console.log(data) }