Document signing has become a common requirement across many types of applications. Whether you're building a SaaS platform, customer onboarding system, HR application, customer portal, or internal business tool, there is often a need to generate documents, collect signatures, track their progress, and store completed agreements.Many teams solve this by integrating multiple services, such as a PDF generation provider and a separate digital signature platform. While this approach works, it can introduce additional complexity as document workflows grow and evolve.In this tutorial, we'll build a complete digital signature workflow using a single API. We'll start by generating a fillable PDF from an HTML template, automatically creating form fields and a signature field. Next, we'll create a signing envelope, send the document to a recipient for signature, track signing events using webhooks, and finally retrieve the completed signed document.By the end of this guide, you'll have an automated workflow capable of generating documents, collecting signatures, tracking progress, and storing completed agreements entirely through API calls.All examples in this article use Node.js and PDFGate as the PDF generation and digital signature platform.PrerequisitesBefore starting, you'll need:Node.jsA PDFGate API keyStep 1: Create the Agreement HTMLLet's begin with a simple service agreement HTML template.Instead of generating a static PDF, we'll generate a document that contains fillable form fields and a signature field.| \n \n \n \n body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; color: #333; } \n h1 { font-size: 24px; border-bottom: 2px solid #333; padding-bottom: 8px; } \n h2 { font-size: 16px; margin-top: 32px; } \n label { display: block; margin-top: 16px; font-size: 13px; color: #555; } \n input { display: block; width: 50%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; box-sizing: border-box; } \n p { font-size: 14px; line-height: 1.6; } \n pdfgate-signature-field { width: 150px; height:120px; } \n \n \n \n \n Service Agreement \n This agreement is entered into between the Company and the Customer. \n \n Customer Name \n Email Address \n Company \n Agreement Date \n \n Terms \n The customer agrees to the terms and conditions described in this agreement. \n \n Customer Signature \n \n \n \n ||----|Step 2: Generate the PDFInstall the SDK:| npm install pdfgate ||----|Now let's convert the HTML into a PDF.| import pdfGate from "pdfgate"; \n \n const client = new pdfGate("live_xxxxx"); \n \n const document = \n await client.generatePdf({ \n html, // Store the html in a string from step 1 \n pageSizeType: PageSizeType.a4, \n enableFormFields: true, \n }); \n \n console.log(document); ||----|You can see below how the PDF looks like on this stage:Step 3: Create a Signature EnvelopeThe next step is creating a signature envelope with one document and a recipient.| const envelope = await client.createEnvelope({ \n requesterName: "Company X", \n documents: [ \n { \n sourceDocumentId: document.id, \n name: 'Service Agreement', \n recipients: [ \n { \n name: "John Smith", \n email: "john@example.com" \n } \n ] \n } \n ], \n }); \n \n console.log(envelope) ||----|The envelope now exists but hasn't been sent yet.Step 4: Send the EnvelopeNow let's send the document to the recipient email.| await client.sendEnvelope({ \n id: envelope.id \n }); ||----|The recipient receives an email containing a signing link. When the document is opened, the signer can review the agreement, complete any required form fields, and apply their signature.Tracking and Verifying SignaturesWhen a recipient completes a document, the signing process involves more than simply capturing a signature image. Modern digital signature workflows typically record additional information such as signer verification details, audit logs, timestamps, and document integrity data. This information helps create a verifiable record of the signing process and can be used to demonstrate when a document was signed and whether it has been modified after completion.Step 5: Track Signing ProgressOnce the document has been sent for signature, your application will typically need to monitor its progress and react when the signing process is completed.You can retrieve the current envelope status at any time using the API:| const envelope = await client.getEnvelope({id: envelope.id}); \n console.log(envelope); ||----|While periodically checking the envelope status can be useful during development, production applications will usually rely on webhooks to receive status updates automatically.PDFGate can notify your application whenever important events occur during the signing process, such as when an envelope is sent, completed, or expires.First, create a webhook endpoint from the PDFGate dashboard. Then implement a listener endpoint in your application:| app.post( \n "/webhooks/pdfgate", \n async (req, res) => { \n const data = req.body; \n if ( \n data.event === \n "envelope.completed" \n ) { \n console.log( \n "Event data:", \n data \n ); \n // Do something with the data \n } \n res.sendStatus(200); \n } \n ); ||----|With webhooks configured, your application can automatically react when a document is completed without continuously polling the API.Final ThoughtsIn this tutorial, we built a complete digital signature workflow using Node.js and PDFGate. Starting from an HTML template, we generated a fillable PDF, created a signing envelope, sent the document for signature, tracked its progress, and retrieved the completed signed document.By combining PDF generation and digital signatures into a single workflow, developers can automate document-driven processes such as customer onboarding, service agreements, approvals, and contract management with only a few API calls.The complete source code shown in this article can serve as a foundation for more advanced document workflows tailored to your application's requirements.:::tipThis article is published under HackerNoon's Business Blogging program. :::\