React Esignature Integration
SignThem generates a secure signing URL per recipient that you can load inside an iframe in your React app. This lets signers complete the process without ever leaving your product. The backend call to create the envelope is made from your server using the REST API or Node.js SDK - the frontend only renders the signing iframe.
Installation
npm install @signthem/sdk # install on your backend / Next.js API routeCreate and send an envelope
The example below creates an envelope, adds a recipient with a signature field, and sends it. The recipient receives an email with a secure signing link.
// SigningEmbed.tsx
import { useEffect, useState } from 'react';
interface SigningEmbedProps {
envelopeId: string;
recipientEmail: string;
onComplete?: () => void;
}
export function SigningEmbed({ envelopeId, recipientEmail, onComplete }: SigningEmbedProps) {
const [signingUrl, setSigningUrl] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// Fetch a short-lived embedded signing URL from your own backend
fetch('/api/signing-url', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ envelopeId, recipientEmail }),
})
.then((r) => r.json())
.then((data) => { setSigningUrl(data.url); setLoading(false); });
}, [envelopeId, recipientEmail]);
// Listen for the envelope.completed event posted by the signing frame
useEffect(() => {
function handleMessage(e: MessageEvent) {
if (e.data?.type === 'signthem:envelope.completed') {
onComplete?.();
}
}
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, [onComplete]);
if (loading) return <div className="animate-pulse bg-gray-100 h-96 rounded-xl" />;
return (
<iframe
src={signingUrl!}
title="Sign document"
className="w-full h-[700px] rounded-xl border border-gray-200"
allow="camera"
/>
);
}
// Usage in a parent component:
// <SigningEmbed
// envelopeId="env_abc123"
// recipientEmail="[email protected]"
// onComplete={() => router.push('/thank-you')}
// />Why React developers choose SignThem
Embedded iframe
signers never leave your app or see SignThem branding
postMessage events let you react to signing completion in real time
Works with any React meta-framework
Next.js, Remix, Vite, and others
Combine with webhooks on your backend for reliable completion handling
Official SDK available
The @signthem/sdk package is production-ready and actively maintained. Install it, set your API key, and you are ready to go.
Related resources
Ready to add e-signatures to your app?
Create an account to get your API key. Plans start at $6/mo. No usage fees on top.