Embedding PandaDoc Documents for Signing

Integrate PandaDoc document signing directly into your website or application, allowing customers to sign documents without needing to check their email.

Important Considerations

Identity Verification

Ensure that you verify the identity of any user who views a document within the generated session ID. Users can act on behalf of the recipient for whom you created a view session.

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

Steps to Embed a Document

1. Generate 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 document_id from the response.
Ensure Document Readiness: Since document creation is asynchronous, confirm the document is ready for embedding.
- Preferred Method: Wait for the document_created webhook.
- 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: Dispatch the document without notifying recipients via email.
- Endpoint: POST https://api.pandadoc.com/public/v1/documents/{document_id}/send
- Use the parameter silent: true.
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.

Optimal Flow

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

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.

Create your free sandbox Request a demo