Complete document creation and signing process for your SaaS with JavaScript

Generate JWT on your back-end to authorize users
Render HTML form element with JWT
Styling the Builder with custom CSS

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 the 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.

JS PHP Ruby Python C#

Copy

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);

use Firebase\JWT\JWT;

$apiToken = getenv('DOCUSEAL_API_KEY'); // Obtain from DocuSeal Console

$payload = [
  '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'],
];

$token = JWT::encode($payload, $apiToken, 'HS256'); // Encode the payload into a JWT

require 'jwt'

api_key = ENV['DOCUSEAL_API_KEY'] # Obtain from DocuSeal Console

payload = {
  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']
}

token = JWT.encode(payload, api_key) # Encode the payload into a JWT

import jwt
import os

api_key = os.getenv('DOCUSEAL_API_KEY') # Obtain from DocuSeal Console

payload = {
  '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']
}

token = jwt.encode(payload, api_key, algorithm='HS256') # Encode the payload into a JWT

using System;
using System.Security.Cryptography;
using System.Text;

class Program
{
  static void Main()
  {
    var secretKey = Encoding.UTF8.GetBytes("Put API token from ENV here");

    var token = GenerateJwt(secretKey);

    Console.WriteLine(token);
  }

  static string GenerateJwt(byte[] secretKey)
  {
    var payload = @"{
        ""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""
        ]
    }";
    var header = Base64UrlEncode(Encoding.UTF8.GetBytes("{\"alg\":\"HS256\",\"typ\":\"JWT\"}"));

    var payloadJson = Base64UrlEncode(Encoding.UTF8.GetBytes(payload));

    var headerPayload = $"{header}.{payloadJson}";

    using (var hmac = new HMACSHA256(secretKey))
    {
      var signatureBytes = hmac.ComputeHash(Encoding.UTF8.GetBytes(headerPayload));
      var signature = Base64UrlEncode(signatureBytes);

      return $"{headerPayload}.{signature}";
    }
  }

  static string Base64UrlEncode(byte[] data)
  {
    var base64 = Convert.ToBase64String(data);
    return base64.TrimEnd('=').Replace('+', '-').Replace('/', '_');
  }
}

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.

Copy

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

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

Styling the Builder with custom CSS

The Template Builder consists of a main section that has both a desktop and a mobile version. Element classes that are displayed only in the mobile version have the -mobile suffix. Additionally, the builder includes a modal window for configuring recipients, which opens when the Send button is clicked. This modal window is displayed only if the with-send-button attribute is not set to false (by default, it is set to true).

Main UI

The main section of the Template Builder contains all the elements required for creating and configuring a template. Customization of this section is essential. Elements that are displayed only in the mobile version have the -mobile suffix. CSS classes for this section:

.main-container
.title-container
.template-name
.document-preview-name
.add-document-button
.sign-yourself-button
.replace-document-button
.add-blank-page-button
.send-button
.document-control-button
.fields-list-container
.roles-dropdown
.fields-list-item
.field-payment-dropdown
.field-settings-dropdown
.field-remove-button
.fields-grid
.fields-grid-item
.draw-field-container
.roles-dropdown-label-mobile
.draw-field-container-mobile
.roles-dropdown-mobile
.fields-dropdown-mobile
.cancel-draw-button
.field-types-dropdown
.field-area-container
.field-area
.field-area-controls
.field-area-settings-dropdown

Base Modal

The base modal is a generic modal window that can be used for various purposes. CSS classes for this section:

.modal-container
.modal-title
.modal-close-button
.modal-save-button
.modal-field-font-dropdown
.modal-field-font-preview

Recipients Modal

The recipient configuration modal opens when the Send button is clicked. Its appearance slightly changes when there is more than one recipient. This modal is not displayed if the with-send-button attribute is set to false. CSS classes for this section:

.recipients-modal
.recipients-modal-title
.recipients-modal-close-button
.recipients-modal-form
.recipients-modal-send-button
.recipients-modal-form-submitters
.recipients-modal-form-email-message
.recipients-modal-form-edit-email-message-link
.recipients-modal-submission
.recipients-modal-submission-status-sent-label
.recipients-modal-submission-status-awaiting-label
.recipients-modal-submission-status-opened-label
.recipients-modal-submission-status-completed-label
.recipients-modal-submission-status-declined-label
.recipients-modal-submission-download-button
.recipients-modal-submission-remove-button
.recipients-modal-submission-submitter-email

Copy

<script src="https://cdn.docuseal.com/js/bulder.js"></script>

<docuseal-builder data-token="<TOKEN>">
  <style>
    <!-- YOUR BUILDER CSS THEME -->
  </style>
</docuseal-form>

Copy

/* DOCUSEAL TEMPLATE BUILDER DARK THEME */
/*
  This theme is provided as a demonstration of Template Builder customization capabilities.
  Some selectors may need adjustments based on your website's structure.
  The code is not optimized for production to enhance readability.
*/

/* COLORS */
/*
  #101828: gray-900
  #495565: gray-800
  #1E2839: gray-700
  #364153: gray-600
  #E5E8EB: gray-200
  #700DE7: violet-600
  #8022FE: violet-700
  #A806B7: fuchsia-600
  #C809DE: fuchsia-700
  #C10006: red-600
  #E70009: red-700
  #432DD7: indigo-700
  #5039F6: indigo-600
*/

/* GENERAL STYLES */
.tooltip:before {
  background-color: #364153;
}

/* TEMPLATE BUILDER */
/*
  Main container for all Template Builder elements, excluding the header (#title-container).
*/
.main-container {
  background-color: #101828;
}

/* Header container for the template title and control buttons. */
.title-container {
  background-color: #1E2839;
}

/* Template name displayed at the top of the builder */
.template-name {
  color: #ffffff;
}

/* Document title displayed in the left column under each added document. */
.document-preview-name {
  color: #ffffff;
}

/* Template control buttons */
.save-button,
.add-document-button,
.sign-yourself-button,
.document-control-button,
.replace-document-button {
  background-color: #364153;
  border: 0;
  border-radius: 0.25rem;
  color: #ffffff;
}

.save-button:hover,
.add-document-button:hover,
.sign-yourself-button:hover,
.document-control-button:hover,
.replace-document-button:hover {
  background-color: #495565;
}

.add-blank-page-button,
.send-button {
  background-color: #700DE7;
  border: 0;
  border-radius: 0.25rem;
  color: #ffffff;
}

.add-blank-page-button:hover,
.send-button:hover {
  background-color: #8022FE;
}

.document-control-button:hover {
  background-color: #8022FE;
}

/* List of fields added to the template */
.fields-list-container input,
.fields-list-container textarea,
.fields-list-container select {
  border-radius: 0.25rem;
  background-color: #101828;
  border: 1px solid #101828;
  color: #ffffff;
}

.fields-list-container input:checked {
  --chkbg: 220 43% 11%;
}

.fields-list-container input::placeholder,
.fields-list-container select::placeholder {
  color: #ffffff;
}

/*
  Individual field item added to the template.
*/
.fields-list-item {
  background-color: #1E2839 !important;
  border-color: #101828;
  color: #ffffff;
}

.field-settings-dropdown hr,
.fields-list-item .border-t {
  border-color: #101828;
}

.fields-list-item:hover .field-remove-button,
.fields-list-item:hover .field-settings-dropdown label {
  color: #ffffff;
}

/* Field settings dropdown */
.field-settings-dropdown ul {
  border-radius: 0.25rem;
  background-color: #364153 !important;
  border: 1px solid #101828;
  color: #ffffff;
}

.field-settings-dropdown ul label,
.field-settings-dropdown .label-text {
  background-color: transparent !important;
  color: #ffffff
}

.field-settings-dropdown li a.active,
.field-settings-dropdown li a:hover,
.field-settings-dropdown li label:hover {
  border-radius: 0.25rem;
  background-color: #1E2839 !important;
  border: none;
  color: #ffffff;
}

 /* Field types dropdown */
.field-types-dropdown ul {
  border-radius: 0.25rem;
  background-color: #364153 !important;
  border: 1px solid #101828;
  color: #ffffff;
}

.field-types-dropdown li a.active,
.field-types-dropdown li a:hover,
.field-types-dropdown li label:hover {
  border-radius: 0.25rem;
  background-color: #1E2839 !important;
  border: none;
  color: #ffffff;
}

/* Field area controls displayed when clicking on a field area */
.field-area-controls {
  border-radius: 0.25rem;
  background-color: #364153;
  color: #ffffff;
}

.field-area-controls input[type="checkbox"] {
  border-color: #ffffff;
}

.field-area-controls input:checked {
  --chkbg: 220 43% 11%;
}

.field-area-controls .border-r {
  border-color: #101828;
}

/* Field area settings dropdown displayed when clicking on 3 dots button */
.field-area-settings-dropdown input,
.field-area-settings-dropdown textarea,
.field-area-settings-dropdown select {
  border-radius: 0.25rem;
  background-color: #101828;
  border: 1px solid #101828;
  color: #ffffff;
}

.field-area-settings-dropdown ul {
  border-radius: 0.25rem;
  background-color: #364153 !important;
  border: 1px solid #101828;
  color: #ffffff !important;
}

.field-area-settings-dropdown ul label,
.field-area-settings-dropdown .label-text {
  background-color: transparent !important;
  color: #ffffff
}

.field-area-settings-dropdown li a.active,
.field-area-settings-dropdown li a:hover,
.field-area-settings-dropdown li label:hover {
  border-radius: 0.25rem;
  background-color: #1E2839 !important;
  border: none;
  color: #ffffff !important;
}

/* Template roles dropdown */
.roles-dropdown label {
  background-color: #364153;
  border-color: #101828;
  color: #ffffff;
}

.roles-dropdown ul {
  border-radius: 0.25rem;
  background-color: #364153 !important;
  border: 1px solid #101828;
  color: #ffffff;
}

.roles-dropdown li a {
  border-radius: 0.25rem;
  border: none;
}

.roles-dropdown li a.active,
.roles-dropdown li a:hover {
  background-color: #1E2839 !important;
  color: #ffffff;
}

.roles-dropdown-label-mobile {
  background-color: #364153;
  color: #ffffff;
}

.draw-field-container-mobile {
  background-color: #364153;
  color: #ffffff;
}

.roles-dropdown-mobile label {
  background-color: #364153;
  border-color: #101828;
  color: #ffffff;
}

.roles-dropdown-mobile ul {
  border-radius: 0.25rem;
  background-color: #364153 !important;
  border: 1px solid #101828;
  color: #ffffff;
}

.roles-dropdown-mobile li a {
  border-radius: 0.25rem;
  border: none;
}

.roles-dropdown-mobile li a.active,
.roles-dropdown-mobile li a:hover {
  background-color: #1E2839;
  color: #ffffff;
}

.fields-dropdown-mobile label {
  background-color: #364153;
  border: none;
  color: #ffffff;
}

.fields-dropdown-mobile ul {
  border-radius: 0.25rem;
  background-color: #364153 !important;
  border: 1px solid #101828;
  color: #ffffff;
}

.fields-dropdown-mobil li a.active,
.fields-dropdown-mobile li a:hover {
  border-radius: 0.25rem;
  background-color: #1E2839 !important;
  border: none;
  color: #ffffff;
}

/* Grid of fields available for adding or dragging into the template */
.fields-grid {
  background-color: #101828;
}

/* Individual field items available for adding to the template */
.fields-grid-item {
  background-color: #1E2839 !important;
  border-color: #101828;
  color: #ffffff;
}

/* Container displayed when drawing a field */
.draw-field-container {
  background-color: #1E2839;
  border-radius: 0.25rem;
  border: 1px solid #101828;
  color: #ffffff;
}

/* Button to cancel field drawing */
.cancel-draw-button {
  background-color: #700DE7;
  border: 0;
  border-radius: 0.25rem;
  color: #ffffff;
}

.cancel-draw-button:hover {
  background-color: #8022FE;
}

/* BASE MODAL */
/* Base styles for all modal windows except the recipients modal */
.modal-container .modal-box {
  background-color: #1E2839;
  border-radius: 0.25rem;
}

.modal-container .modal-box .border-b {
  border-color: #101828;
}

.modal-container a,
.modal-container label,
.modal-container .modal-title,
.modal-container .modal-close-button,
.modal-container .label-text {
  color: #ffffff;
}

.modal-container input,
.modal-container textarea,
.modal-container select {
  border-radius: 0.25rem;
  background-color: #101828;
  border: 1px solid #101828;
  color: #ffffff;
}

.modal-container select + span {
  background-color: #101828;
  color: #ffffff;
}

.modal-container button {
  border-radius: 0.25rem;
  background-color: #364153;
  border: none;
  color: #ffffff;
}

.modal-container button:hover, {
  background-color: #495565;
}

.modal-container button[class*="bg-base-300"] {
  background-color: #6A7282 !important;
  color: #ffffff;
}

.modal-container button:hover {
  background-color: #6A7282;
}

.modal-save-button {
  background-color: #364153;
  border: 0;
  border-radius: 0.25rem;
  color: #ffffff;
}

.modal-save-button:hover {
  background-color: #495565;
}

.modal-field-font-dropdown label {
  background-color: #364153;
  border-color: #101828;
  color: #ffffff;
}

.modal-field-font-dropdown .dropdown-content {
  border-radius: 0.25rem;
  background-color: #364153;
  border: 1px solid #101828;
  color: #ffffff;
}

.modal-field-font-dropdown .dropdown-content div:hover,
.modal-container .modal-field-font-dropdown .bg-base-300 {
  background-color: #6A7282;
  color: #ffffff;
}

.modal-field-font-preview {
  background-color: #E5E8EB;
}

/* RECIPIENTS */
/*
  Modal window for configuring recipients.
  Can be disabled in template settings using the with-send-button parameter.
*/
.recipients-modal {
  background-color: #1E2839;
  border-radius: 0.25rem;
}

/* Text elements in the recipients modal */
.recipients-modal-title,
.recipients-modal-close-button,
.recipients-modal-form label,
.recipients-modal-form .label-text {
  color: #ffffff;
}

/* Input fields in the recipients modal */
.recipients-modal-form input,
.recipients-modal-form textarea,
.recipients-modal-form select {
  border-radius: 0.25rem;
  background-color: #101828;
  border: 1px solid #101828;
  color: #ffffff;
}

.recipients-modal-form input::placeholder,
.recipients-modal-form textarea::placeholder,
.recipients-modal-form select::placeholder {
  color: #ffffff;
}

.recipients-modal-form input:checked {
  --chkbg: 220 43% 11%;
}

/* Button to send a signing invitation */
.recipients-modal-send-button {
  background-color: #700DE7;
  border: 0;
  border-radius: 0.25rem;
  color: #ffffff;
}

.recipients-modal-send-button:hover {
  background-color: #8022FE;
}

/* Container displaying submission details */
.recipients-modal-submission {
  border-radius: 0.25rem;
  background-color: #101828;
  border: 1px solid #101828;
}

/* Container for submitter information fields */
.recipients-modal-form-submitters {
  border-radius: 0.25rem;
  background-color: #1E2839;
  border: 1px solid #101828;
}

/* Submission status labels */
.recipients-modal-submission-status-sent-label,
.recipients-modal-submission-status-awaiting-label,
.recipients-modal-submission-status-opened-label,
.recipients-modal-submission-status-completed-label,
.recipients-modal-submission-status-declined-label {
  background-color: #ffffff;
  border-radius: 0.25rem;
  border: 1px solid #101828;
}

.recipients-modal-submission-submitter-email {
  color: #ffffff;
}

/* Download button for the document */
.recipients-modal-submission-download-button {
  background-color: #364153;
  border: 0;
  border-radius: 0.25rem;
  color: #ffffff;
}

.recipients-modal-submission-download-button:hover {
  background-color: #495565;
}

/* Button to remove a submission */
.recipients-modal-submission-remove-button {
  background-color: #C10006;
  border: 0;
  border-radius: 0.25rem;
  color: #ffffff;
}

.recipients-modal-submission-remove-button:hover {
  background-color: #E70009;
}

/* Block containing fields for configuring email subject and body */
.recipients-modal-form-email-message {
  border-radius: 0.25rem;
  background-color: #1E2839;
  border: 1px solid #101828;
  color: #ffffff;
}

/* Text button for editing the email message */
.recipients-modal-form-edit-email-message-link {
  color: #ffffff;
}

/* Pagination section in the recipients modal */
.recipients-modal-pagination-label {
  color: #ffffff;
}

.recipients-modal-pagination-buttons-container {
  border-radius: 0.25rem;
}

.recipients-modal-pagination-prev-button,
.recipients-modal-pagination-next-button,
.recipients-modal-pagination-page {
  background-color: #364153;
  border: none;
  color: #ffffff;
}

.recipients-modal-pagination-prev-disabled-button,
.recipients-modal-pagination-next-disabled-button {
  background-color: #364153 !important;
  color: #E5E8EB;
}

.recipients-modal-pagination-prev-button:hover,
.recipients-modal-pagination-next-button:hover,
.recipients-modal-pagination-page:hover,
.recipients-modal-pagination-prev-disabled-button:hover,
.recipients-modal-pagination-next-disabled-button:hover,
.recipients-modal-pagination-page:hover {
  background-color: #495565;
}

Default Theme Custom CSS Theme

Learn more:

Embed API Reference

React Example Project

PHP Example Project

Embedded Demo App