Embedded | DocuSeal Docs

Signing Form

This component enables seamless integration of a signing form within any section of your website or application. It offers compatibility with JS+HTML, Vue, and React, providing you with versatile options for integration.

JavaScript
React
Vue

Copy

<script src="https://cdn.docuseal.co/js/form.js"></script>

<docuseal-form
  id="docusealForm"
  data-src="https://docuseal.co/d/LEVGR9rhZYf86M"
  data-email="signer@example.com">
</docuseal-form>

<script>
  window.docusealForm.addEventListener('completed', (e) => e.detail)
</script>

Attributes

data-src required String

Public URL of the document template. Can be copied from the template page of the admin dashboard.

data-email optional String

Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.

data-role optional String

The role name or title of the submitter.

Example: First Submitter

data-expand optional Boolean

Expand form on open.

Default: true

data-logo optional String

Public logo image URL to use in the signing form.

data-go-to-last optional Boolean

Navigate to the last unfinished step.

Default: true

data-skip-fields optional Boolean

Allow skipping form fields.

Default: true

data-with-title optional Boolean

Set `false` to remove document title from the builder.

Default: true

data-background-color optional String

Form background color. Only HEX color codes are supported.

Example: #d9d9d9

data-values optional Object

Pre-assigned values for form fields.

Example: {"First Name":"Jon","Last Name":"Doe"}

data-application-key optional String

Your application-specific unique string key to identify submitter within your app.

data-readonly-fields optional String

Comma separated read-only field names

Example: First Name,Last Name

data-completed-button-title optional String

Button title displayed after the form completion.

Example: Go Back

data-completed-button-url optional String

URL of the button displayed after the form completion.

Example: https://example.com

Callbacks

completed optional Event type

Custom event to be triggered after form completion.

Example: document.querySelector('docuseal-form').addEventListener('completed', (e) => e.detail)

Copy

import React from "react"
import { DocusealForm } from '@docuseal/react'

export function App() {
  return (
    <div className="app">
      <DocusealForm
        src="https://docuseal.co/d/LEVGR9rhZYf86M"
        email="signer@example.com"
        onComplete={(data) => console.log(data)}
      />
    </div>
  );
}

Attributes

src required String

Public URL of the document template. Can be copied from the template page of the admin dashboard.

email optional String

Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.

role optional String

The role name or title of the submitter.

Example: First Submitter

expand optional Boolean

Expand form on open.

Default: true

goToLast optional Boolean

Navigate to the last unfinished step.

Default: true

skipFields optional Boolean

Allow skipping form fields.

Default: true

backgroundColor optional String

Form background color. Only HEX color codes are supported.

Example: #d9d9d9

completedButton optional Object

Customizable button after form completion.

Example: { title: 'Go Back', url: 'https://example.com' }

Child parameters

title required String

Button label.

url required String

Button link. Only absolute URLs are supported.

values optional Object

Pre-assigned values for form fields.

Example: { 'First Name': 'Jon', 'Last Name': 'Doe' }

applicationKey optional String

Your application-specific unique string key to identify submitter within your app.

readonlyFields String

List of read-only fields.

Example: ['First Name','Last Name']

Callbacks

onComplete optional Function

Function to be called after the form completion.

Example: (data) => { console.log(data) }

Copy

<template>
  <DocusealForm
    :src="'https://docuseal.co/d/LEVGR9rhZYf86M'"
    :email="'signer@example.com'"
    @complete="onFormComplete"
  />
</template>

<script>
import { DocusealForm } from '@docuseal/vue'

export default {
  name: 'App',
  components: {
    DocusealForm
  },
  methods: {
    onFormComplete (data) {
      console.log(data)
    }
  }
}
</script>

Attributes

src required String

Public URL of the document template. Can be copied from the template page of the admin dashboard.

email optional String

Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.

role optional String

The role name or title of the submitter.

Example: First Submitter

expand optional Boolean

Expand form on open.

Default: true

go-to-last optional Boolean

Navigate to the last unfinished step.

Default: true

skip-fields optional Boolean

Allow skipping form fields.

Default: true

background-color optional String

Form background color. Only HEX color codes are supported.

Example: #d9d9d9

completed-button optional Object

Customizable button after form completion.

Example: { title: 'Go Back', url: 'https://example.com' }

Child parameters

title required String

Button label.

url required String

Button link. Only absolute URLs are supported.

values optional Object

Pre-assigned values for form fields.

Example: { 'First Name': 'Jon', 'Last Name': 'Doe' }

readonly-fields Array

List of read-only fields.

Example: ['First Name','Last Name']

Callbacks

@complete optional Function

Function to be called after the form completion.

Example: onFormComplete

Live Example

Form Builder

This component allows you to seamlessly integrate an entire document creation and signing form anywhere on your website or application. It supports JS+HTML, Vue, and React.

JavaScript
React
Vue

Copy

<script src="https://cdn.docuseal.co/js/builder.js"></script>

<docuseal-builder
  data-token="<%= JWT.encode({
    user_email: 'admin_user@example.com',
    integration_email: 'signer@example.com',
    name: 'Integration W-9 Test Form',
    document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
  }, 'API_KEY') %>">
</docuseal-builder>

Attributes

data-token required String

JWT Token (data-token).
Ensure that the JWT token is generated on the backend to prevent unauthorized access to your documents.

Child parameters

user_email required String

Email of the owner of the API signing key - admin user email.

integration_email optional String

Email of the user to create a template for.

Example: signer@example.com

template_id optional Number

ID of the template to open in the form builder. Optional when document_urls are specified.

application_key optional String

Your application-specific unique string key to identify this template within your app.

folder_name optional String

The folder name in which the template should be created.

document_urls optional Array

An Array of URLs with PDF files to open in the form builder. Optional when template_id is specified.

Example: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf']

name optional String

New template name when creating a template with document_urls specified.

Example: Integration W-9 Test Form

data-host optional String

DocuSeal host domain name. Only use this attribute if you are using the on-premises DocuSeal installation.

Example: yourdomain.com

data-roles optional String

Comma separated submitter role names to be used by default in the form.

Example: Company,Customer

data-fields optional String

JSON string. Should contain an array of default field properties.

Example: [{ "name": "FIELD_1", "type": "date" }]

data-custom-button-title optional String

Custom button title. This button will be displayed on the top right corner of the form builder.

data-custom-button-url optional String

Custom button URL. Only absolute URLs are supported.

data-with-title optional Boolean

Set `false` to remove document title from the builder.

Default: true

data-with-recipients-button optional Boolean

Show the "Recipients" button.

Default: true

data-with-upload-button optional Boolean

Show the "Upload" button.

Default: true

data-with-sign-yourself-button optional Boolean

Show the "Sign Yourself" button.

Default: true

data-preview optional Boolean

Show template in preview mode without ability to edit it.

data-background-color optional String

The form builder background color. Only HEX color codes are supported.

Example: #ffffff

Copy

// Server-Side Rendering example
import jwt from 'jsonwebtoken';
import { DocusealBuilder } from '@docuseal/react'

export default function Home() {
  const token = jwt.sign({
    user_email: 'admin_user@example.com',
    integration_email: 'signer@example.com',
    name: 'Integration W-9 Test Form',
    document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
  }, 'API_KEY');

  return (
    <DocusealBuilder token={token} />
  );
}

Attributes

token required String

JWT Token (data-token). Ensure that the JWT token is generated on the backend to prevent unauthorized access to your documents.

Child parameters

user_email required String

Email of the owner of the API signing key - admin user email.

integration_email optional String

Email of the user to create a template for.

Example: signer@example.com

template_id optional Number

ID of the template to open in the form builder. Optional when document_urls are specified.

application_key optional String

Your application-specific unique string key to identify this template within your app.

document_urls optional Array

An Array of URLs with PDF files to open in the form builder. Optional when template_id is specified.

Example: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf']

name optional String

New template name when creating a template with document_urls specified.

Example: Integration W-9 Test Form

host optional String

DocuSeal host domain name. Only use this attribute if you are using the on-premises DocuSeal installation.

Example: yourdomain.com

customButton optional Object

Custom button will be displayed on the top right corner of the form builder.

Child parameters

title required String

Custom button title.

url required String

Custom button URL. Only absolute URLs are supported.

roles optional Array

Submitter role names to be used by default in the form.

fields optional Array

An array of default field properties that will be displayed in the form builder

withRecipientsButton optional Boolean

Show the "Recipients" button.

Default: true

withUploadButton optional Boolean

Show the "Upload" button.

Default: true

withSignYourselfButton optional Boolean

Show the "Sign Yourself" button.

Default: true

preview optional Boolean

Show template in preview mode without ability to edit it.

backgroundColor optional String

The form builder background color. Only HEX color codes are supported.

Example: #ffffff

Copy

<template>
  <DocusealBuilder
    v-if="token"
    :token="token"
  />
</template>

<script>
import { DocusealBuilder } from '@docuseal/vue'

export default {
  name: 'App',
  components: {
    DocusealBuilder
  },
  mounted () {
    this.loadToken()
  },
  methods: {
    loadToken () {
      fetch('/api/docuseal/builder_token', {
        method: 'POST'
      }).then(async (resp) => {
        const data = await resp.json()

        this.token = data.token
      })
    }
  }

}

Attributes

token required String

JWT Token (data-token). Ensure that the JWT token is generated on the backend to prevent unauthorized access to your documents.

Child parameters

user_email required String

Email of the owner of the API signing key - admin user email.

integration_email optional String

Email of the user to create a template for.

Example: signer@example.com

template_id optional Number

ID of the template to open in the form builder. Optional when document_urls are specified.

application_key optional String

Your application-specific unique string key to identify this template within your app.

document_urls optional Array

An Array of URLs with PDF files to open in the form builder. Optional when template_id is specified.

Example: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf']

name optional String

New template name when creating a template with document_urls specified.

Example: Integration W-9 Test Form

host optional String

DocuSeal host domain name. Only use this attribute if you are using the on-premises DocuSeal installation.

Example: yourdomain.com

custom-button optional Object

Custom button will be displayed on the top right corner of the form builder.

Child parameters

title required String

Custom button title.

url required String

Custom button URL. Only absolute URLs are supported.

with-recipients-button optional Boolean

Show the "Recipients" button.

Default: true

with-upload-button optional Boolean

Show the "Upload" button.

Default: true

with-sign-yourself-button optional Boolean

Show the "Sign Yourself" button.

Default: true

preview optional Boolean

Show template in preview mode without ability to edit it.

background-color optional String

The form builder background color. Only HEX color codes are supported.

Example: #ffffff