How to Embed eSignatures on Your Site or Application
Getting documents signed is an essential function of any company, regardless of industry. The way in which you collect these signatures can have an impact on turnaround times, and whether a potential client ends up signing them at all.
Embedded signing creates a unified signing experience to combat attrition and ensure a smooth, branded experience for signers.
You can also learn how to add end-to-end workflow automation for forms and documents on your site here.
What is Embedded Signing?
Embedded signing allows signers to access and sign documents directly from your native app or website using a secure iFrame. That means users don’t have to leave your site to sign a document, creating a seamless experience from launch to submission. Users do not need a Docubee account to sign, review, or submit via embedded signing.
What are the Advantages of Embedded Signing?
Creating a custom-branded experience is a great way to increase brand recognition and instill trust among customers. However, the benefits of embedded signing from Docubee go far beyond that.
Embedded Signing is Secure
Worrying about compliance and signature validity is a hassle for many growing small businesses. All signatures collected through Docubee’s embedded signing interface are legally binding and secure, so you can worry about growing your business — not verifying signature legitimacy—signatures collected through Docubee feature audit trails and tracking.
Embedded Signing Saves Time
Creating an embedded signature for customers and clients gives you an easy way to review submissions. Instead of sending things via email or following up, you’ll automatically get notified when a request is made through your form or document.
Embedded Signing Integrates
Having disconnected systems means more time hunting down documents and saving files. Who has time for all of that? Embedding Docubee Signatures gives you the option to integrate with your CRM or most-loved apps for document access and client information in the tools you’re already using.
What is an Embedded Signer?
An embedded signer refers to the user accessing an embedded document to review and sign. Embedded signers do not need to have a Docubee account. They must simply access the form, fill in their info, sign, and submit via your website or app.
What is an Embedded Request?
An embedded request allows site users to create signature requests on your site. This can be useful for sales team members who need to add unique terms to a sales document and send them to potential clients to review and sign.
Is Docubee Embedded Signing Similar to DocuSign Embedded Signing?
Yes. Docubee embedded signing functions closely to DocuSign embedded signing. However, using Docubee embedded signing gives you more document sends, flexible pricing plans, and a lot more customization options than you get with DocuSign. Customize colors and logos to fit your branding, or white labeling to fully remove Docubee branding–a feature not offered by DocuSign. Embedding is possible through the Docubee API.
Setting Up Embedded Signing from Docubee
The following process is an end-to-end handling of a document signing process. It is possible to handle many of these steps in numerous ways. This document assumes that the implementer intends to use embedded interfaces and the Docubee API where possible.
This document outlines the steps necessary to configure a Docubee account to support embedded signing and then to handle the actual signing process in an embedded interface.
Before You Begin
- The Organization must be on a plan that supports Embedded UI and API Access. These features can be assigned by the Sales or Customer Success teams for both trial/development and production cases.
- The Workspace (belonging to the above organization) must have one or more API Access Tokens generated that have the following permissions:
- Upload Documents
- Set Document Fields
- Start Quick Sign
- Complete Signing of Quick Sign Documents
- Generate Embedded UI URL
General Information to Know About Embedded Signatures
- All API requests should have an Authorization header containing the valid API Access Token.
- For any embedded interfaces, replace the placeholder https://secure.mydomain.com with the domain you will be using to embed the iframe component. For testing purposes, you can also open these embed URLs directly in your browser.
- The formDefinitionId for both the field placement and signing processes must match. This can be any valid value per the API documentation but the fields will only show if the same string is used in both cases.
Upload a Document
POST https://docubee.app/api/v2/documents
Be sure to set the appropriate Content-Type header for the type of document being uploaded. The response will contain a documentId in the body that is used in the following steps. Details are available in our public API documentation at https://docs.ontask.io/#upload.
Provide an Embedded UI for Placing Fields
POST https://docubee.app/api/v2/embed
This is a currently documented endpoint that takes a definition for an embeddable interface and returns a URL that can be embedded in a parent application to give the user the ability to perform that function. In this specific case, this will create the interface to place fields on the provided document.
This will have a Content-Type of “application/json” and the body will be:
{
“data”: {
“documentId”: documentId,
“formDefinitionId”: “my_form”
},
“domain”: “https://secure.mydomain.com:*”,
“page”: “fieldPlacement”
}
This will return a url that can be embedded in an iframe on the provided domain.
Start a Signature Process
POST https://docubee.app/api/v2/signatures
This will have a Content-Type of “application/json” and the body details are available in our public API documentation at https://docs.ontask.io/#start-signature-process. To support embedding of the signing interface, each “signer” should have a “contactMethod” with a “type” of “embed”. This will return results where each of the signers will have an object containing a signerId and the signature process as a whole will have a processId. Both of these are used in the embedded interface.
Sample body:
{
“documents”: [{
“documentId”: documentId,
“formDefinitionId”: “my_form”
}],
“signers”: [{
“label”: “My Signer”,
“contactMethod”: [{
“type”: “embed”
}]
}]
}
Provide an Embedded UI for the Signing Process
POST https://docubee.app/api/v2/embed
This currently documented endpoint takes a definition for an embeddable interface and returns a URL that can be embedded in a parent application to give the user the ability to perform that function. In this specific case, this will create the interface to complete the signing for a specified user.
This will have a Content-Type of “application/json” and the body will be:
{
“data”: {
“processId”: processId,
“signerId”: signerId
},
“domain”: “https://secure.mydomain.com:*”,
“page”: “signing”
}
This will return a url that can be embedded in an iframe on the provided domain.
Tracking Signing Status in Embedded Signing
Once the embedded frame loads with the signing interface, the application will emit events to the parent using postMessage. You can listen for the specific changes in state to trigger navigation, content, or removal of the iframe from the page.
window.addEventListener(‘message’, (message) => {
if (!message.origin.includes(‘docubee.app’)) {
return ;
}
const { details, event } = JSON.parse(message.data);
if (event !== ‘SIGNING_STATUS’) {
return;
}
// details.status can be used to trigger changes
}, false);
Get Started with Embedded Signing
Make it easy for clients, customers, and team members to sign documents directly on your site. Contact our customer support team for help getting set up or schedule a demo for our team to show you how easy your processes could be.
