Skip to main content

Quick Start

1. Preparation​

Before integrating, configure the application in the admin console (repoId/appId, third-party API base address, enable Frontend Integration and set the secret, etc.). See: Preparation.
It is also recommended to read: Important Terms, to ensure concepts and constraints such as repoId, docId, and callback address restrictions are aligned.

2. Prepare the required information​

Frontend integration supports two modes: Active Parameter Passing and Passive Parameter Passing. Both use the same entry, but differ in whether “user info / document meta / download URL / upload URL” are provided in the entry URL or obtained by the platform via callbacks.

2.1 Active parameter passing (more flexible)​

When opening the online edit/preview page, include the following in the URL:

  • userinfo: base64(JSON), then encodeURIComponent
  • meta: base64(JSON), then encodeURIComponent
  • downloadUrl: the file download URL (do not encodeURIComponent, and do not include query params in this URL; pass extra params via params)
  • uploadUrl: the file upload URL (required for edit; same rules as downloadUrl)
  • ts + HMAC: anti-tampering and anti-replay (default validity is 10 seconds; clock sync is required)

See details and the parameter table: Active Integration Mode.
How to compute HMAC: HMAC Calculation (keep the secret on the backend only).

2.2 Passive parameter passing (implement standard callback APIs)​

To open the page, you only need repoId/docId/action/params/ts/HMAC. The platform will call back your system to obtain:

  • Current user info: GET {context}/profiles
  • Document meta: GET {context}/{docId}/meta
  • Download file stream: GET {context}/{docId}/content
  • Save file: POST {context}/{docId}/content

Your system needs to implement these interfaces. For the callback API definitions, refer to the standard integration APIs:

See the flow and parameter table: Passive Integration Mode.

3. Open the online edit/preview page​

Unified entry:

http(s)://{zoffice_hostname}:8001/docs/app/driver-callback?...

iframe example​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <style>
    html, body { height: 100%; margin: 0; padding: 0; }
    iframe { width: 100%; height: 100%; border: none; display: block; }
  </style>
</head>
<body>
  <iframe
    id="integration-frame"
    src="http://zoffice_hostname:8001/docs/app/driver-callback?repoId=repoId&docId=docId&action=edit&ts=xxx&HMAC=xxx"
    allowfullscreen="true"
    allow="fullscreen *">
  </iframe>
</body>
</html>

Note: generate ts/HMAC on your backend and return them to the frontend to avoid secret leakage.

Last updated on