How to Add E-Signatures to Your SaaS in Under an Hour

E-signatures are no longer a nice-to-have — they're expected. Whether you're closing SaaS contracts, onboarding new clients, or processing compliance documents, embedding signing directly into your product removes friction and keeps users in your workflow. This guide walks through integrating Froovo Sign in four steps.

Why embed e-signatures in your SaaS?

Redirecting users to a third-party signing tool breaks the experience. Embedded signing keeps everything in your UI, improves completion rates, and lets you own the workflow end-to-end. Froovo Sign is designed specifically for this use case — a REST API you can wire up in an afternoon.

Step 1: Install and authenticate

Grab your API key from the Froovo Sign dashboard under Settings → API Keys. All requests use Bearer token authentication over HTTPS.

# Install the JS SDK
npm install froovo-sign-js

# Or use the REST API directly — no SDK required

import FroovoSign from "froovo-sign-js";

const client = new FroovoSign({
  apiKey: process.env.FROOVO_API_KEY,
});

Step 2: Create a document

Upload a PDF and define signer fields in a single API call. Each field specifies where on the document the signer should interact.

// POST /api/v1/documents
const doc = await client.documents.create({
  title: "Service Agreement",
  file: fs.createReadStream("./contract.pdf"),
  signers: [
    {
      name: "Alice Johnson",
      email: "alice@example.com",
      fields: [
        { type: "signature", page: 3, x: 120, y: 540, width: 200, height: 60 },
        { type: "date",      page: 3, x: 340, y: 540, width: 120, height: 30 },
      ],
    },
  ],
  message: "Please sign the attached service agreement.",
  expiresIn: "7d",
});

// Response
// {
//   id: "doc_01HXYZ...",
//   status: "pending",
//   signerLinks: [{ email: "alice@example.com", url: "https://sign.froovosign.com/s/..." }]
// }

Step 3: Listen for webhooks

Rather than polling the API, subscribe to webhook events. Froovo Sign will POST to your endpoint when a document is signed, declined, or expired. Every request includes an HMAC-SHA256 signature you should verify.

// pages/api/webhooks/froovo.ts (Next.js)
import crypto from "crypto";
import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const sig = req.headers["x-froovo-signature"] as string;
  const body = JSON.stringify(req.body);

  const expected = crypto
    .createHmac("sha256", process.env.FROOVO_WEBHOOK_SECRET!)
    .update(body)
    .digest("hex");

  if (sig !== `sha256=${expected}`) {
    return res.status(401).json({ error: "Invalid signature" });
  }

  const { event, data } = req.body;

  if (event === "document.signed") {
    console.log("Document signed:", data.documentId);
    // Update your database, send confirmation email, etc.
  }

  return res.status(200).json({ received: true });
}

Step 4: Test in sandbox

Every Froovo Sign account ships with a sandbox environment. Set your API key to the sandbox key and use the test signer email (test@froovosign.com) to complete the signing flow end-to-end without sending real emails.

• Sandbox API key: found in Settings → API Keys → Sandbox
• Test signer: test@froovosign.com — auto-signs after 5 seconds
• Webhook tester: use the dashboard's webhook inspector to replay events

Conclusion

That's it. Four steps, one API key, and your users never leave your product to sign a document. Froovo Sign's flat-rate pricing means there are no per-envelope surprises as you scale — just a clean, embeddable signing experience.