Embedded Editing

The PandaDoc Embedded Editor allows you to edit PandaDoc Documents & PandaDoc Templates without leaving your application.

ℹ️

Useful Links

• Embedded Editing
• PandaDoc Template vs PandaDoc Document
• Fields and Content Builder Blocks

⚠️

Requirements

The end user's browser must support the Windows API: postMessage. Check Browsers support.

Implementation

You can embed the PandaDoc Editor in your application by following the steps below.

Step 1: Obtain the editing session key (E-Token)

Use the following API endpoint to get the E-Token

Create Template Editing Session

Create Document Editing Session

Note: This endpoint is not available by default. Please reach out to your assigned CSM or AM to get it enabled for you.

Step 2: Initialize the Editor

PandaDoc Embedded Editor is available as an npm package. Read more

First, install the package:

yarn add pandadoc-editor

After that, you can use it in your project:

import { Editor } from "pandadoc-editor";

Then, you can initialize the editor. Editor will start automatically if you provide documentId or templateId.

const editor = new Editor(
    "editor-container",
    {
        fieldPlacementOnly: false, // Enable Blocks

        // You can initiate editor loading even without token
        token: "", // Edit session E-Token
    }
);

You can also open editor using open method:

editor.open({
    token: "Edit session token"
});

Control Visible Fields

You can control the visibility of fields in the Editor by the 'fields' parameter.

ℹ️

Fields can be set as part of the Editor configuration if you don't need to configure them for each open call.

editor.open({
    fieldsPlacementOnly: false,
    fields: {
        "signature": { visible: false },
        "stamp": { visible: false },
        "payment_details": { visible: false },
    },
});

The 'fields' parameter is an object where the keys are the types of fields you want to control, and the values are objects with a 'visible' property that determines whether the field is visible.

  const defaultFieldConfig = {
    "checkbox": { visible: true },
    "dropdown": { visible: true },
    "date": { visible: true },
    "signature": { visible: true },
    "stamp": { visible: true },
    "initials": { visible: true },
    "payment_details": { visible: true },
    "collect_file": { visible: true },
    "radio_buttons": { visible: true },
  };

Control Visible Blocks

You can control the visibility of blocks in the Editor by the 'blocks' parameter.

ℹ️

Blocks can be set as part of the Editor configuration if you don't need to configure them for each open call.

editor.open({
    fieldsPlacementOnly: false,
    documentId: "", // Document id
    blocks: {
        "pricingTable": { visible: true },
        "page-break": { visible: true },
        "quote": { visible: true },
    }
});

The 'blocks' parameter is an object where the keys are the types of blocks you want to control, and the values are objects with a 'visible' property that determines whether the block is visible.

const defaultBlockConfig = {
    "text": { visible: false },
    "image": { visible: false },
    "video": { visible: false },
    "table": { visible: false },
    "pricingTable": { visible: false },
    "page-break": { visible: false },
    "tableOfContents": { visible: false },
    "placeholder": { visible: false },
    "quote": { visible: false },
};