Embedding Documents

Embed the signing experience directly in your application

Beta Feature - Embedding is currently in beta and may change over time. During the beta period, this feature is available to everyone. When the beta ends, embedding will become an enterprise feature.

Embedding allows you to integrate the sajn signing experience directly into your application, providing a seamless experience for your users without redirecting them to app.sajn.se.

Overview

Instead of sending signers to the standard sajn signing page, you can embed the signing interface in an iframe on your own domain. This gives you full control over the user experience while leveraging sajn’s secure signing infrastructure.

sajn provides official embedding packages for popular frameworks:

Package	Framework	Version
@sajn/embed	Vanilla JS	0.1.5
@sajn/embed-react	React 18+	0.1.5
@sajn/embed-vue	Vue 3.3+	0.1.5

Enabling Embedding

To enable embedding for your application:

1. Contact sajn support at [e-mail]
2. Provide the list of domains where you want to embed the signing experience
3. sajn will whitelist your domains for embedding

Localhost is automatically allowed for development purposes.

Choose Your Framework

Vanilla JS

Function API and Web Component for any JavaScript project

React

React component with TypeScript support

Vue

Vue 3 component with Composition API

Configuration

All embedding packages share the same core configuration options.

Required Props

Prop	Type	Description
documentId	string	The unique identifier of the document
token	string	The signer’s authentication token

You receive both values when you create a document and add signers via the API.

Optional Props

Prop	Type	Default	Description
host	string	https://app.sajn.se	The sajn host URL
language	string	-	UI language (sv, en, no, da, fi, de, is, es, fr, it)
className	string	-	CSS class for the iframe element
allowDocumentRejection	boolean	false	Allow signers to reject the document
showScrollIndicator	boolean	true	Show scroll indicator in the iframe
additionalProps	Record<string, string | number | boolean>	-	Additional options passed to the embed

Theming with CSS Variables

Customize the embedded signing interface to match your brand using the cssVars option:

type CssVars = {
  background?: string;      // Page background color
  primary?: string;         // Primary button/accent color
  foreground?: string;      // Main text color
  mutedForeground?: string; // Secondary text color
}

Example:

cssVars: {
  background: '#ffffff',
  primary: '#2563eb',
  foreground: '#1f2937',
  mutedForeground: '#6b7280'
}

Events

All packages emit the same events when the signing status changes. The event names and data structures are consistent across frameworks.

document-ready

Fired when the iframe has loaded and is ready.

Payload: None

signer-completed

Fired when the signer has completed the signing process.

Payload:

interface SignerCompletedData {
  token: string;
  documentId: string;
  signerId: string;
  failed?: string; // Optional failure reason
}

signer-rejected

Fired when the signer rejects the document (requires allowDocumentRejection: true).

Payload:

interface SignerRejectedData {
  token: string;
  documentId: string;
  signerId: string;
  reason: string;
}

document-error

Fired when an error occurs during the signing process.

Payload:

interface DocumentErrorData {
  code: string;
  message: string;
}

Security

• Only whitelisted domains can embed the signing interface
• Each signer token is unique and single-use
• Tokens are validated server-side before rendering
• HTTPS is required for production environments
• The allow="camera" attribute is needed on the iframe if using identity verification

Live Demo

See the embedding in action at sajn-embedding-demo.vercel.app. The source code is available on GitHub.

Next Steps

Redirect URL

Redirect signers after signing

Webhooks

Get notified when signing is complete