Embedding

Our embedding feature lets you integrate our document signing experience into your own application or website. Whether you're building with React, Preact, Vue, Svelte, Solid, or using generalized web components, this guide will help you get started with embedding Documenso.

Availability

Embedding is currently available for all users on a Teams Plan and above, as well as Early Adopter's within a team (Early Adopters can create a team for free).

In the future, we will roll out a Platform Plan that will offer additional enhancements for embedding, including the option to remove Documenso branding for a more customized experience.

How Embedding Works

Embedding with Documenso allows you to handle document signing in two main ways:

1. Using Direct Templates: Using direct templates you can have an evergreen template that upon completion will create a new document within Documenso.
2. Using a Signing Token: A more advanced option for those running rich integrations with Documenso already. Given a recipients signing token you can embed the signing experience in your application rather than direct the recipient to Documenso.

For most use-cases we recommend using direct templates, however if you have a need for a more advanced integration, we are happy to help you get started.

Supported Frameworks

We support embedding across a range of popular JavaScript frameworks, including:

Additionally, we provide web components for more generalized use. However, please note that web components are still in their early stages and haven't been extensively tested.

Embedding with Direct Templates

Instructions

To get started with embedding using a Direct Template we will need the URL segment which is also referred to as the token for the template.

You can find your URL/Token by performing the following steps:

1. Navigate to your team's templates within Documenso

2. Click on the direct link template you want to embed

This will copy the URL to your clipboard, e.g. https://stg-app.documenso.com/d/-WoSwWVT-fYOERS2MI37k

For the above url the token is -WoSwWVT-fYOERS2MI37k

3. Provide the token to the EmbedDirectTemplate component in your frameworks SDK

import { EmbedDirectTemplate } from '@documenso/embed-react';
 
const MyEmbeddingComponent = () => {
  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
 
  return <EmbedDirectTemplate token={token} />;
};

Converting a regular template to a direct link template

If you don't currently have any direct link templates you can easily create one by selecting the "Direct Link" option within the actions dropdown on the templates table.

This will show a dialog which will ask you to configure which recipient should be used as the direct link signer.

Embedding with Signing Tokens

To embed the signing process for an ordinary document, you’ll need a document signing token for the recipient. This token provides the necessary access to load the document and facilitate the signing process securely.

Instructions

1. Retrieve the signing token for the recipient document you want to embed

This will typically be done using an API integration where signing tokens are provided as part of the response when creating a document. Alternatively you can manually get a signing link by clicking hovering over a recipients avatar and clicking their email on a document that you own.

With the signing url on our clipboard we can extract the token the same way we did for the direct link template.

So https://stg-app.documenso.com/sign/lm7Tp2_yhvFfzdeJQzYQF will become lm7Tp2_yhvFfzdeJQzYQF

2. Provide the token to the EmbedSignDocument component in your frameworks SDK

import { EmbedSignDocument } from '@documenso/embed-react';
 
const MyEmbeddingComponent = () => {
  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token
 
  return <EmbedSignDocument token={token} />;
};

Using Embedding in Your Application

Once you've obtained the appropriate tokens, you can integrate the signing experience into your application. For framework-specific instructions, please refer to the guides provided in our documentation for:

• React
• Preact
• Vue
• Svelte
• Solid

If you're using web components, the integration process is slightly different. Keep in mind that web components are currently less tested but can still provide flexibility for general use cases.

Stay Tuned for the Platform Plan

While embedding is already a powerful tool, we're working on a Platform Plan that will introduce even more functionality. This plan will offer:

• Additional customization options
• The ability to remove Documenso branding
• Additional controls for the signing experience

More details will be shared as we approach the release.