WebSign Panel

WebSign Panel is a JavaScript library developed by Edatalia that provides a complete signature panel interface for managing multiple signers on PDF documents. It integrates with the edatalia-websign library to handle the actual signature capture.

Important: WebSign Panel works exclusively over HTTPS and with UTF-8 encoding.

✨ Features

• Multi-signer management with grouped lists
• PDF viewer with print support
• Support for different signature types: DTU, STU, display, certificate
• Configurable UI buttons (cancel, print, finish)
• Auto-sign capability
• Multi-language support (es, eu)
• EBP templates for Wacom devices
• Signer selection with photo/signature preview sidebar
• Double-click to select and sign in one action

📦 Installation

NPM

npm install edatalia-websign-panel

Then, import both libraries in your JavaScript application:

import 'edatalia-websign';  // Required - registers window.WebSign
import { WebSignPanel } from 'edatalia-websign-panel';

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/edatalia-websign-panel@latest"></script>

When using CDN, WebSignPanel is available globally:

const panel = new WebSignPanel(pdfFile, config, callback);

In your HTML, place the following container:

<div id="web-sign-panel"></div>

🚀 Basic Usage

Note: WebSignBridge is optional. If it's running, it enhances the use of websign panel.

const config = {
  settings: {
    bearerToken: "your-bearer-token",
    signatureEnvironment: "SANDBOX", // or "PRO"
    language: "es",
    showCancelButton: true,
    showFinishButton: true,
    showSignPaperButton: false,
    assetsPath: "/assets"
  },
  signers: [
    {
      signerId: "signer-1",
      label: "Patient Signature",
      isMandatory: true,
      signatureType: "dtu",
      widget: {
        type: "float",
        text: "SIGN_HERE",
        width: 160,
        height: 100
      }
    }
  ]
};

const panel = new WebSignPanel(pdfFile, config, (event) => {
  switch (event.type) {
    case "completed":
      console.log("Signed PDF:", event.data);
      console.log("Updated config:", event.config);
      break;
    case "cancel":
      console.log("User cancelled");
      break;
    case "error":
      console.error("Error:", event.error);
      break;
  }
});

Constructor Parameters

new WebSignPanel(pdfData, config, callback)

| Parameter | Type | Description | |-----------|------|-------------| | pdfData | File\|Blob\|string | PDF file, Blob, base64 string, or URL (required) | | config | Object | Configuration object (see below) | | callback | Function | Event callback function |

PDF Data Examples:

// Use File from input
const file = input.files[0];
new WebSignPanel(file, config, callback);

// Use base64 string
const base64 = "JVBERi0xLjQK...";
new WebSignPanel(base64, config, callback);

// Use URL
new WebSignPanel("/path/to/document.pdf", config, callback);

⚙️ Configuration Parameters

Settings Object

| Option | Type | Description | |--------|------|-------------| | bearerToken | string | Auth token for API communication | | signatureEnvironment | string | "SANDBOX" or "PRO" | | language | string | UI language ("es", "eu") | | isLocked | boolean | Lock the panel (disable signing) | | showCancelButton | boolean | Show cancel button | | showFinishButton | boolean | Show finish/accept button | | showSignPaperButton | boolean | Show print button | | assetsPath | string | Path to assets folder | | enableBridge | boolean | Enable WebSign Bridge integration | | enforceBridge | boolean | Require Bridge to be running (shows dialog with open button if not) | | encCertKey | string | (Optional) Encryption custom bio data oneline certificate. | | requireAllSignerOccurrences | boolean | When a signer signs one occurrence, all other unsigned occurrences with the same signerId become mandatory |

Signer Object

| Option | Type | Description | |--------|------|-------------| | signerId | string | Unique identifier for the signer | | label | string | Display name for the signer | | isMandatory | boolean | Whether signature is required to complete | | isSigned | boolean | Current signature status | | timeStamp | string | Timestamp of signature | | signatureType | string | "dtu", "stu", "display", "certificate", "auto" | | signerListId | string | Group ID for organizing signers | | autoSign | boolean | Automatically trigger signature on load | | widget | Object | Signature positioning configuration | | ebpText | Object | EBP template text values | | img1B64 | string | Base64 encoded photo image (displayed in sidebar) | | img2B64 | string | Base64 encoded signature image (displayed in sidebar) |

Widget Object

widget: {
  type: "float",      // "float" (text search) or "fixed" (coordinates)
  text: "SIGN_HERE",  // Text to search in PDF (for float type)
  width: 160,         // Signature area width
  height: 100,        // Signature area height
  x: 100,             // X position (for fixed type)
  y: 100,             // Y position (for fixed type)
  page: 0,            // PDF page number, if value is 0 it will sign all pages
  gapX: 0,            // Horizontal offset
  gapY: 0,            // Vertical offset
  customText: [       // Text displayed on PDF after signing
    { text: "Digitally signed", fontSize: 6 },
    { text: "Date: ##TIMESTAMP##", fontSize: 4 }
  ]
}

EBP Text Object

ebpText: {
  Titulo: "Document Title",
  AreaFirma: "Please sign below",
  LOPD: "Privacy policy text...",
  Texto1: "Additional text 1",
  Texto2: "Additional text 2"
}

Assets

Configure the base assets path in settings:

settings: {
  assetsPath: "/assets"  // default
}

EBP Assets (Wacom Devices)

If you use ebpText in your signers configuration, you must provide EBP template files for Wacom devices in {assetsPath}/ebp/:

/assets/ebp/
├── blackAndWhiteScreenSaver.png
├── colorScreenSaver.png
├── blackAndWhiteEbp.bin
├── colorEbp.bin
├── blackAndWhiteInitialEbp.bin
└── colorInitialEbp.bin

Note: EBP assets are optional. If any files are missing, the signature will proceed without EBP templates and a warning will be logged to the console.

Certificate Signature Background (Optional)

For certificate-type signatures, you can provide a background image that will be embedded in the signature widget. Place it in {assetsPath}/certificate/:

/assets/certificate/
└── signatureBackground.jpg

If the file exists, it will be automatically loaded. The image must be a valid JPG and its aspect ratio should match the widget's width/height ratio for optimal display.

Signer Lists (Groups)

signerLists: [
  {
    listId: "GROUP-1",
    label: "Main Signers",
    isExpanded: true
  },
  {
    listId: "GROUP-2", 
    label: "Optional Signers",
    isExpanded: false
  }
]

📡 Callback Events

| Event | Description | |-------|-------------| | completed | All mandatory signatures done. event.data contains signed PDF, event.config contains updated config | | cancel | User cancelled the process | | error | An error occurred. event.error contains error message |

🧾 License

© 2026 Edatalia Data Solutions. All rights reserved.

WebSign Panel is proprietary software. See LICENSE.txt for details.

🏢 About

Developed by Edatalia, digital signatures and biometric solutions for secure document processing.