Complete document creation and signing process for your SaaS with JavaScript

1

Generate JWT on your back-end to authorize users

Prerequisites:

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

JWT (JSON Web Token) serves as a secure means to authorize your individual SaaS users with the DocuSeal document form builder. The token is generated with JWT payload parameters to grant access only for your specific SaaS user and only for a specific document:

  • user_email: Email address of the DocuSeal admin user that provided the API_KEY for JWT signing.
  • integration_email: Email address of your SaaS user that opens the document form builder.
  • external_id: Unique string to tag the opened document within the DocuSeal platform and to be able to reopen the form using this unique key.
  • documents_urls[]: An array with public and downloadable document URLs to be opened in the form builder. Pass empty array to allow users to upload their files.
  • template_id: ID of the existing template to open in the form builder - leave empty if `documents_urls[]` is specified. Templates can be created via HTML API or PDF export API.

Ensure you never expose API_KEY on your client side, only generated and signed JWT should be passed to your front-end app.

const jwt = require('jsonwebtoken');

const API_KEY = process.env.DOCUSEAL_API_KEY // Obtain from DocuSeal Console

const token = jwt.sign({
  user_email: 'admin@company.com',
  integration_email: 'saas-user@company.com',
  external_id: 'TestForm123',
  name: 'Integration W-9 Test Form',
  document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
}, API_KEY);
2

Render HTML form element with JWT

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 document form builder, add the <docuseal-builder> element to your webpage with the data-token attribute.

In server-side rendering, the token can be rendered within the initial server-generated HTML, readily available upon page load.

In client-side render apps, it's advisable to fetch the token via an API call after the initial page load.

Learn more:

Embed API Reference

React Example Project

PHP Example Project

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

<docuseal-builder data-token="{ token }">
</docuseal-builder>