How to Add E-Signatures to Any Web App in 10 Minutes

[Signbee Path: 10 Minutes]
1. Grab API Key ──> 2. POST /api/v1/send ──> 3. Recipient Signs ──> 4. Webhook document.signed

[Legacy Vendor Path: 2 to 4 Weeks]
1. Sales Call ──> 2. Sandbox Setup ──> 3. RSA Keypair ──> 4. Admin Consent Redirect ──>
5. Install 15MB SDK ──> 6. Create Draft Envelope ──> 7. Base64 Upload ──> 8. Calculate Tab X/Y ──>
9. Dispatch Envelope ──> 10. Polling / Connect Config

"use server";

interface SendAgreementParams {
  clientName: string;
  clientEmail: string;
  projectScope: string;
  monthlyRetainer: number;
}

export async function sendAgreementAction(params: SendAgreementParams) {
  const currentDate = new Date().toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  const markdownContent = `# Professional Services Agreement

**Effective Date:** ${currentDate}

## Parties
- **Service Provider:** Acme Web Innovations LLC ("Provider")
- **Client:** ${params.clientName} ("Client")

## Scope of Services
${params.projectScope}

## Commercial Terms
- Monthly Retainer: $${params.monthlyRetainer.toLocaleString()} USD
- Invoicing: Net 15 days via ACH or Credit Card
- Termination: 30 days written notice

By signing below, the parties agree to all legal terms.`;

  const response = await fetch("https://signb.ee/api/v1/send", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.SIGNBEE_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      markdown: markdownContent,
      sender_name: "Acme Web Operations",
      sender_email: "contracts@acmeweb.io",
      recipient_name: params.clientName,
      recipient_email: params.clientEmail,
      webhook_url: "https://acmeweb.io/api/webhooks/signbee",
      expires_in_days: 7,
    }),
  });

  if (!response.ok) {
    const err = await response.text();
    throw new Error(`Contract dispatch failed: ${err}`);
  }

  return await response.json();
}

"use client";

import { useState } from "react";
import { sendAgreementAction } from "@/actions/sendAgreement";

export function AgreementButton({ clientName, clientEmail }: { clientName: string; clientEmail: string }) {
  const [loading, setLoading] = useState(false);
  const [documentId, setDocumentId] = useState<string | null>(null);

  async function handleDispatch() {
    setLoading(true);
    try {
      const result = await sendAgreementAction({
        clientName,
        clientEmail,
        projectScope: "Full-stack SaaS web development and automated CI/CD pipeline maintenance.",
        monthlyRetainer: 4500,
      });
      setDocumentId(result.document_id);
    } catch (e) {
      alert("Failed to send agreement");
    } finally {
      setLoading(false);
    }
  }

  if (documentId) {
    return (
      <div className="p-4 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm">
        ✅ Agreement successfully dispatched! Tracking ID: <span className="font-mono">{documentId}</span>
      </div>
    );
  }

  return (
    <button
      onClick={handleDispatch}
      disabled={loading}
      className="px-5 py-2.5 rounded-lg bg-emerald-500 hover:bg-emerald-600 text-white font-medium text-sm transition-colors disabled:opacity-50"
    >
      {loading ? "Dispatching Agreement..." : "Send Service Agreement"}
    </button>
  );
}

from fastapi import FastAPI, HTTPException
import httpx
import os

app = FastAPI()

@app.post("/contracts/dispatch")
async def dispatch_contract(client_name: str, client_email: str):
    api_key = os.getenv("SIGNBEE_API_KEY")
    if not api_key:
        raise HTTPException(status_code=500, detail="Missing SIGNBEE_API_KEY")

    payload = {
        "markdown": f"# Consulting Terms\n\nBetween Acme AI and {client_name}...",
        "sender_name": "Acme AI Corp",
        "sender_email": "contracts@acme-ai.io",
        "recipient_name": client_name,
        "recipient_email": client_email,
        "webhook_url": "https://api.acme-ai.io/webhooks/signbee",
        "expires_in_days": 10
    }

    async with httpx.AsyncClient() as client:
        res = await client.post(
            "https://signb.ee/api/v1/send",
            headers={"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"},
            json=payload,
            timeout=10.0
        )
        if res.status_code != 200:
            raise HTTPException(status_code=res.status_code, detail=res.text)
        return res.json()

const response = await fetch("https://signb.ee/api/v1/send", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.SIGNBEE_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    pdf_base64: fileBuffer.toString("base64"),
    sender_name: "Operations Team",
    sender_email: "ops@company.com",
    recipient_name: "Counterparty Executive",
    recipient_email: "exec@counterparty.io",
    webhook_url: "https://company.com/api/webhooks/signbee",
  }),
});

import { NextRequest, NextResponse } from "next/server";
import { auth } from "@/lib/auth"; // Your authentication provider

export async function POST(req: NextRequest) {
  // 1. Authenticate user session
  const session = await auth();
  if (!session?.user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { dealTitle, counterpartyEmail, counterpartyName, amount } = await req.json();

  // 2. Interpolate dynamic contract terms into Markdown
  const markdownContract = `
# Professional Services Agreement

**Effective Date:** ${new Date().toISOString().split("T")[0]}
**Provider:** Acme Solutions Inc.
**Client:** ${counterpartyName} (${counterpartyEmail})
**Contract Value:** $${amount.toLocaleString()} USD

## Scope of Deliverables
The Provider will deliver software development and technical consulting services as specified.

## Payment & Invoicing Terms
Invoices are payable within 30 days of receipt via electronic bank transfer.

## Cryptographic Acknowledgement
By signing below, both parties confirm their intention to be legally bound under the ESIGN Act and eIDAS.
`;

  // 3. Dispatch to Signbee using server-only environment variable
  const signbeeRes = await fetch("https://signb.ee/api/v1/send", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.SIGNBEE_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      markdown: markdownContract,
      recipient_name: counterpartyName,
      recipient_email: counterpartyEmail,
      webhook_url: `${process.env.APP_URL}/api/webhooks/signbee`,
      metadata: {
        userId: session.user.id,
        contractType: "services_agreement",
      },
    }),
  });

  if (!signbeeRes.ok) {
    const err = await signbeeRes.text();
    return NextResponse.json({ error: err }, { status: signbeeRes.status });
  }

  const data = await signbeeRes.json();
  return NextResponse.json({ success: true, documentId: data.document_id });
}