JavaScript Embed
This page is outdated. You can find the latest version here
Overview
There are two different ways to embed a PandaDoc view into an application or website. Both templates and documents can be embedded but they are significantly different in functionality. For starters, a simple embed code can be copied and used directly from your PandaDoc workspace into a webpage.
This article is about extending embed functionality by customizing the embed.js script provided for pre-filling your own data. We will also introduce and compare API view sessions. They are sometimes a favorable solution for more robust requirements.
Template Embed (deprecated, Classic Editor only)
Template embedding is found in the PandaDoc application and can be used by simply copying and pasting a snippet. Template embeds are useful for reaching an unlimited number of signers with minimal setup. A signer fills out the embedded template then a new document is generated upon completion. This is how unlimited signers are able to fill and complete the same document. There are also some caveats we encounter with embedded templates compared to document embedding. We'll outline these differences in the table below.
Form Embed (Editor 2.0 only)
Form embedding is found in the PandaDoc application and can be used by simply copying and pasting a snippet so it's pretty the same as for a template. Form embeds are useful for reaching an unlimited number of signers with minimal setup. A signer fills out the embedded form then a new document is generated upon completion. This is how unlimited signers are able to fill and complete the same document. There are also some caveats we encounter with embedded forms compared to document embedding.
Embedding a PandaDoc document is just that. The recipient has presented a document tailored to the specific signing scenario instead of a template. Since it is a document view, it must be generated automatically via API for each document and recipient completion. This a more involved setup that is most suited to custom application development or IT systems.
Embed Method Comparison
| Embedded Template (copy/paste code snippet) | Embedded Document (via API view session) | Embedded Form (copy/paste code snippet) | |
|---|---|---|---|
| Editor | Classic Editor | Classic Editor, Editor 2.0 | Editor 2.0 |
| Setup: | Copy and paste a code snippet | API request and iframe view | Copy and paste a code snippet |
| Difficulty: | Basic HTML knowledge required. | Programming knowledge required. | Basic HTML knowledge required. |
| Method: | Embedding a template uses an easy copy and paste code snippet. This can be found via the Embed button when editing a PDF-based template. | Start with an API request to generate a session id for every recipient. This view session id is used to construct a web URL. The link can be viewed directly on pandadoc.com or it can be loaded as an iframe within a web application view. | Embedding a form uses an easy copy and paste code snippet. This can be found via the Get code button when editing a form. |
| Recipients: | Limited to single recipient per document | Unlimited recipients per document | Unlimited recipients per document |
| PDF Template: | Yes | Yes | Yes |
| PandaDoc Template: | Unsupported. Embedding a template must be performed from a PDF template uploaded and edited on PandaDoc. | Yes | Yes |
| Fields: | Yes | Yes | Yes |
| Tokens: | Unsupported. PDF templates do not support tokens. | Yes | Yes |
| Pricing Tables: | Unsupported. | Yes | Yes |
| Extendable: | Yes. embed.js can be customized to accept pre-filled recipient and field data via JavaScript in the same web view. | Yes. Supported by all PandaDoc API features. Supports most PandaDoc document customizations. | Yes. embed.js can be customized to accept pre-filled recipient data, metadata, fields and variables via config and via URL parameters. |
| Recommended Use: | Easier setup. Complete unlimited single-recipient documents without additional setup. Simple scenarios with a single signer per document. | Broader support of PandaDoc document features through native templates. Real-time document generation via API for logged-in web or application users. | Easier setup. Complete unlimited documents without additional setup. |
| Get Started: | Embed a Template | API Reference: Embed a Document | Create and publish forms guides. |
Updated 2 days ago