SDK & DocsAPI ReferenceAPI pricingChanges
Request a demoLog inCreate your free sandbox

Embed a Document View Session

To embed a document, first a link must be generated by the above Create a Document Link API endpoint. Once a link to the document is created, it can also be used within a HTML iframe as follows:

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

If you are working with a dynamically sized viewport, javascript can be used to dynamically resize the iframe. iFrame Resizer is an example library to accomplish this with.

🚧

Viewers Identification

Any user who views a document within the generated session ID can act on behalf of the recipient you created a view session for. It's your responsibility to verify viewers' identities.

Embedded Document JavaScript Events

When embedding a PandaDoc document, you may wish to perform custom application events based on viewer activity. For example, when the document is completed you may want to redirect a user to "thank you" page or another application page. That's where view session JavaScript events come in handy.

There are 3 available events:

  • session_view.document.loaded - the document loaded.
  • session_view.document.completed - a document recipient filled in the assigned fields and finalized the document. At this point, the document can be in the "Viewed" status in case there are several Signers in the document or in the "Completed" status in case there is only one Signer or the last Signer has finalized the document.
  • session_view.document.exception - an error occurred while finalizing the document.

We use HTML5 Window.postMessage() to send event messages. Here is a snippet on how you can register an event handler and process these events. Make sure to replace the iframe src url with your own session id.

<!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>