How to Embed E-Signatures in Your Website

Embedding signing in your own product means the signer never leaves your domain. For SaaS products this is the right default — fewer drop-offs, tighter UX, better brand consistency. Here is the step-by-step to embed SignBolt in your website with production-ready code patterns.

The Architecture

At a high level, the flow is:

1. Your backend calls SignBolt's REST API to create an envelope and get a signing URL.
2. Your frontend renders an iframe pointing at that signing URL.
3. The signer signs inside the iframe.
4. Your backend receives a webhook when signing completes.
5. Optionally, your frontend listens for postMessage to update UI immediately.

Step 1: Get API Credentials

Sign up for SignBolt Business at /pricing and generate an API key from your dashboard. Store it in your backend environment — never ship it to the browser. See the developer docs for the full reference.

Step 2: Create a Signing Envelope

From your backend, POST to /api/v1/sign with the PDF, signer details, and any field coordinates. Example using Node.js:

const res = await fetch('https://signbolt.au/api/v1/sign', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.SIGNBOLT_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    document: { pdf_url: 'https://yourapp.com/contract.pdf' },
    signer: { name: 'Jane Doe', email: 'jane@example.com' },
    fields: [{ page: 1, x: 100, y: 600, type: 'signature' }],
    mode: 'embedded',
    return_url: 'https://yourapp.com/signed-success',
  }),
});

const { envelope_id, signing_url } = await res.json();

Step 3: Render the Iframe

Pass the signing_url to the frontend and render it in an iframe. Example in React:

export function SignFrame({ signingUrl, onSigned }) {
  useEffect(() => {
    function handle(e) {
      if (e.origin !== 'https://signbolt.au') return;
      if (e.data?.type === 'signbolt:signed') onSigned(e.data.envelope_id);
    }
    window.addEventListener('message', handle);
    return () => window.removeEventListener('message', handle);
  }, [onSigned]);

  return (
    <iframe
      src={signingUrl}
      width="100%"
      height="720"
      style={{ border: 0 }}
      allow="clipboard-write"
      title="Sign document"
    />
  );
}

Step 4: Verify via Webhook

postMessage is great for instant UX but must not be trusted for business logic (an attacker could forge messages). Configure a webhook endpoint in your SignBolt dashboard and verify the HMAC signature on every incoming request. Example webhook handler:

app.post('/webhook/signbolt', async (req, res) => {
  const sig = req.headers['x-signbolt-signature'];
  const hmac = crypto.createHmac('sha256', process.env.SIGNBOLT_WEBHOOK_SECRET);
  hmac.update(JSON.stringify(req.body));
  if (sig !== hmac.digest('hex')) return res.sendStatus(401);

  const { event, envelope_id, signed_pdf_url } = req.body;
  if (event === 'document.signed') {
    await saveSignedDoc(envelope_id, signed_pdf_url);
  }
  res.sendStatus(200);
});

Step 5: Handle CSP

If you enforce a Content Security Policy, add signbolt.au (or signbolt.store) to frame-src:

Content-Security-Policy: frame-src 'self' https://signbolt.au https://signbolt.store;

Production Checklist

• API key stored in backend env only, never in frontend code.
• Webhook endpoint verifies HMAC on every request.
• Idempotency keys used on all POST /api/v1/sign calls to avoid duplicate envelopes.
• Sandbox environment tested end-to-end before shipping to production.
• Error states handled in the frontend (iframe load failure, network errors).
• Timeouts configured on backend API calls (5-10 seconds).
• Failed webhook deliveries logged and retried.

UX Best Practices

• Size the iframe to 720px+ tall on desktop, full-height on mobile.
• Provide a clear "signing takes ~60 seconds" message before the iframe loads.
• Show a success confirmation once postMessage fires — then wait for the webhook before acting on business logic.
• Offer a "sign later" option so users can get a link emailed if they bail on the embedded flow.

When to Use Redirect Instead of Embed

• Your app is marketing/content-heavy, not a SaaS product. Redirect is faster to integrate and fine.
• You have a strict CSP that is painful to modify.
• You want a shorter signing flow without the iframe chrome.
• Your users already trust the SignBolt domain and do not expect to sign inside your product.

Related Reading

See the developer docs, best e-signature APIs 2026, and enterprise page.

Frequently Asked Questions