Skip to main content
Documenso provides powerful embedding capabilities that allow you to integrate document signing directly into your application’s workflow, creating a seamless white-label experience for your users.

​
What is Embedding?

Embedding allows you to display Documenso’s document signing interface within an iframe in your own application. This means your users can sign documents without leaving your platform, maintaining your brand consistency and user experience.

​
Use Cases

​
Customer-Facing Applications

  • SaaS Platforms: Embed contract signing directly in your onboarding flow
  • E-commerce: Add order confirmations and agreements to checkout
  • HR Systems: Integrate employee onboarding documents
  • Real Estate: Embed lease agreements and property documents

​
Internal Tools

  • Admin Dashboards: Let admins prepare and send documents
  • Document Workflows: Create multi-step approval processes
  • Team Collaboration: Enable team members to sign internal agreements

​
Embedding Capabilities

Documenso supports two main embedding modes:

​
1. Document Signing Embedding

Embed the signing experience for recipients to complete and sign documents. Features:
  • Pre-fill recipient name and email
  • Lock fields to prevent editing
  • Customize appearance with CSS variables
  • Dark mode control
  • Real-time event notifications via postMessage
Learn more: Direct Links

​
2. Template Authoring Embedding

Embed the document creation and field placement interface. Features:
  • Control feature visibility (signature types, language, date format)
  • Restrict configuration options
  • Edit-only mode for field placement
  • Custom styling support
Learn more: Authoring Embedding

​
Integration Methods

The simplest way to embed Documenso is using direct signing links in an iframe: 
<iframe
  src="https://your-domain.com/embed/sign/{token}#embedData"
  width="100%"
  height="800px"
  allow="clipboard-write"
></iframe>
Pros:
  • No SDK required
  • Works with any framework
  • Minimal setup
  • Full feature support

​
Framework Components

For framework-specific integrations, you can build wrapper components:

​
Enterprise Features

Embedding requires an Enterprise plan with the following features enabled:
  • embedSigning - Core embedding capability
  • embedSigningWhiteLabel - Custom CSS and white-labeling
  • hidePoweredBy - Remove “Powered by Documenso” branding

​
Authentication & Security

​
Presign Tokens

For enhanced security, use presign tokens to verify embed requests: 
// Create a presign token
const response = await fetch('/api/v2-beta/embedding/create-presign-token', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiToken}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    expiresIn: 60, // minutes
    scope: 'documentId:123'
  })
});

const { token, expiresAt } = await response.json();

​
Recipient Authentication

Documents can require authentication:
  • Account Auth: Recipient must sign in with their Documenso account
  • 2FA: Two-factor authentication for sensitive documents
  • Access Control: Automatically enforced in embedded views

​
Real-Time Events

Embedded pages communicate with your application using the postMessage API: 
window.addEventListener('message', (event) => {
  switch (event.data.action) {
    case 'document-ready':
      console.log('Document loaded and ready');
      break;
    case 'document-completed':
      console.log('Document signed:', event.data.data);
      break;
    case 'field-signed':
      console.log('Field signed:', event.data.data);
      break;
    case 'document-error':
      console.error('Error occurred');
      break;
  }
});
Available Events:
  • document-ready - Embed initialized and document loaded
  • document-completed - Recipient completed signing
  • document-rejected - Recipient rejected the document
  • document-error - An error occurred
  • field-signed - A field was signed/filled
  • field-unsigned - A field was cleared

​
White-Label Customization

With Enterprise plans, customize the embedded experience: 
const embedData = {
  darkModeDisabled: false,
  css: `
    .embed--Root {
      font-family: 'Inter', sans-serif;
    }
  `,
  cssVars: {
    primary: '#3b82f6',
    background: '#ffffff',
    foreground: '#0f172a'
  }
};

const hash = btoa(encodeURIComponent(JSON.stringify(embedData)));
const embedUrl = `https://app.documenso.com/embed/sign/${token}#${hash}`;
Learn more: CSS Variables

​
Next Steps

Direct Links

Set up iframe embedding with direct signing links

Authoring

Embed the document creation interface

Customization

Customize appearance with CSS variables

React SDK

Build a React wrapper component

​
Pricing

Embedding is available on Enterprise plans. Contact sales for:
  • White-label embedding
  • Custom branding removal
  • Advanced customization options
  • Dedicated support