1. Create a Document and Get a Session ID

Follow these steps to generate a session ID:

Create a Document: Use a template or a PDF to create a document.
- Endpoint: POST https://api.pandadoc.com/public/v1/documents
- Retrieve id from the response (document_id in further requests).
Ensure Document Readiness: Since document creation is asynchronous, confirm the document is ready for embedding.
- Preferred Method: Wait for the document_state_changed event webhook with document.draft status.
- Alternative: Use document_id to check Document Status until the status is document.draft.
- Endpoint: GET https://api.pandadoc.com/public/v1/documents/{document_id}
Send the Document: Change the document's status to Sent without notifying the recipients.
- Endpoint: POST https://api.pandadoc.com/public/v1/documents/{document_id}/send
- Use the parameter silent: true, It disables notifications.
Create a Document Session: Generate a session for the recipient to view and sign the document.
- Endpoint: POST https://api.pandadoc.com/public/v1/documents/{document_id}/session
- Use the id from the response to create a session.

2. Embed Document Signing

Embed the document using the session_id in an HTML iframe:

<iframe src="https://app.pandadoc.com/s/{session_id}/"></iframe>

3. Track Embedded Signing Events (optionally)

To handle custom application events based on viewer activity, use view session JavaScript events. For example, redirect users upon document completion.

Available events:

session_view.document.loaded: Triggered when the document is loaded.
session_view.document.completed: Triggered when a recipient completes the document. The document status may be Viewed if multiple signers exist or Completed if the last signer finalizes it.
session_view.document.exception: Triggered if an error occurs during document finalization.

<!doctype html>
<html>
<body>
<iframe src="https://app.pandadoc.com/s/{id}/" width="800" height="800"></iframe>
<script>
window.addEventListener('message', (event) => {
  const type = event.data && event.data.type;
  const payload = event.data && event.data.payload;

  switch (type) {
    case 'session_view.document.loaded':
      console.log('Session view is loaded');
      break;
    case 'session_view.document.completed':
      console.log('Document is completed');
      console.log(payload);
      break;
    case 'session_view.document.exception':
      console.log('Exception during document finalization');
      console.log(payload);
  }
});

</script>
</body>
</html>

By following these steps, you can seamlessly integrate PandaDoc document signing into your application, enhancing the user experience by allowing direct document interaction.

Important Considerations

Signer's identity

It is your responsibility to ensure the identity of any user who views a document within the signing session. Some use cases legally required to have some type of Identity Verification enabled.

Redirect Configuration

Note that the recipient's redirect settings do not apply to embedded signing sessions. Instead, use the session_view.document.completed event to handle redirection.

Useful Links

Embedded Signing

Create your free sandbox Request a demo