Embed document signing into web app with JavaScript


Document signing form for specified email

First, add the DocuSeal functionality to your webpage by including the script. Copy and paste the following line into the <head> or <body> section of your HTML page:

To integrate a DocuSeal form, add the <docuseal-form> element to your webpage with the necessary attributes specifying the form's unique URL and, optionally, a default email address for the signer:

  • data-src: This attribute specifies the URL of the DocuSeal form that you want to embed. Each template form on DocuSeal has a unique URL with slug key. "Slug" key can be obtained via the /templates API or copied from the template page in the web UI.
  • data-email: This attribute is used to initialize the form for a specified email address for the signer.

Signing forms initialized via template URL and email work only if the template contains a single signing party. For signing forms with multiple parties all signers should be initiated via the API.

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


Document signing form initiated via API


Sign Up and Obtain API Key: Visit DocuSeal API Console to obtain your API key.

Template ID: Identify the template ID you want to use for the form.

POST request to https://api.docuseal.co/submissions. Include the obtained API key in the headers along with the content type ('application/json'). Specify the template_id and submitter details:

  • send_email: set to false to disable automated emails form the platform.
  • email: pass email address of each individual party in the document signing process.
  • role: specifies the designated role of each participant (e.g., 'Director', 'Contractor'). Pass role names defined in the template form.

Upon a successful request, the API will respond with a an array of submitters with slug keys to be used in the embed form.

When utilizing the {{ slug }} within the <docuseal-form> element, ensure that you replace {{ slug }} with the actual key obtained from the DocuSeal API response. This "slug" key acts as a reference point to link the embedded form in your HTML to the specific document or workflow created through the DocuSeal platform.

import axios from "axios";


  method: 'POST',
  url: 'https://api.docuseal.co/submissions',
  headers: {
    'X-Auth-Token': API_KEY,
    'content-type': 'application/json'
  data: {
    template_id: 123,
    send_email: false,
    submitters: [
        email: 'john.doe@example.com',
        role: 'Director'
        email: 'roe.moe@example.com',
        role: 'Contractor'
}).then((response) => {
<script src="https://cdn.docuseal.co/js/form.js"></script>

  data-src="https://docuseal.co/s/{{ slug }}">

Styling form with custom CSS

Styling certain elements of the form is achievable using custom CSS. Adding custom styles is possible via the <style> tag nested in the from HTML element:

For customizing the form, use the following id-selectors:

  • #form_container
  • #minimize_form_button
  • #submit_form_button

Learn more:

Embed API Reference

REST API Reference

PHP Example Project

Embedded Demo App

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

    #form_container {
      background-color: #ededed;
    #minimize_form_button {
      color: #FFA500;
    #submit_form_button {
      background-color: #FFA500;
      border-color: #F28C28;