Embedded Signing - Legacy Manual Approach

⚠️
DEPRECATED
This manual approach is deprecated. We recommend using the pandadoc-signing library instead, which provides a simpler, type-safe way to embed document signing. See the Embedded Signing guide for the recommended approach.

Overview

This document describes the legacy manual approach for embedding PandaDoc document signing sessions using HTML iframes and JavaScript event listeners. This approach is maintained for reference purposes only and should not be used for new integrations.

Embedding with HTML iframe

You can embed the document using the session_id directly in an HTML iframe:

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

Replace {session_id} with the session ID obtained from the Create Document Session API endpoint.

Tracking Events with JavaScript

To handle custom application events based on viewer activity, use JavaScript event listeners with window.addEventListener("message", ...). 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.

Event Handler Example

<!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);
            // Handle document completion (e.g., redirect user)
            break;
          case "session_view.document.exception":
            console.log("Exception during document finalization");
            console.log(payload);
            // Handle error
            break;
        }
      });
    </script>
  </body>
</html>

Migration to pandadoc-signing Library

We strongly recommend migrating to the pandadoc-signing library, which provides:

Type-safe TypeScript interfaces
Simplified event handling with .on(), .off(), and .once() methods
Better error handling
Automatic resource management

See the Embedded Signing guide for migration instructions.