Skip to main content

Quick Start

1. Preparation​

Complete the Frontend SDK integration configuration in the admin console (repoId, third-party API base address, enable Frontend SDK integration and set the secret, etc.). See: Preparation.
It is also recommended to read: Important Terms to understand constraints such as repoId, docId, and context.

2. Implement download/save callback APIs​

In Frontend SDK integration, you must provide file download and save APIs, and pass them via repoConfig.downloadUrl / repoConfig.uploadUrl in the initialization config:

Note: the download API response headers should not include Content-Encoding: gzip (see the warning in Get File Callback).

3. Generate initConfig and sign token on the backend​

Your backend should generate an initConfig (including userinfo, meta, openConfig, repoConfig, documentServerAddr, etc.) and sign a token (HS256 JWT) using the secret configured in the admin console.
See: Signature for rules and examples; see: Configuration for field definitions.

Important: generate and store secret/token on the backend only to avoid leakage.

4. Load the SDK and mount the editor/preview​

On your business system page, load the sdk.js provided by the platform, then call ZOfficeSDK.mount() to mount the online editor/preview (iframe mode).
See a complete sample: Edit Example.

Below is mount example (replace the object with the initConfig returned from your backend):

<!DOCTYPE html>
<html style="height: 100%;">
<head>
  <meta charset="UTF-8" />
  <title>FrontSDK Quick Start</title>
  <script src="sdk.js"></script>
  <style>
    html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
  </style>
</head>
<body>
  <div id="frameholder" style="height: 100%;"></div>
  <script>
    // TODO: generate on your backend and return to the frontend
    const initConfig = {
      userinfo: { id: "user", display_name: "user", email: "user@example.com" },
      meta: {
        id: "docId",
        name: "demo.docx",
        modified_at: "2025-11-18T10:41:52.12Z",
        created_by: { id: "user", name: "user", email: "user@example.com" },
        permissions: { read: true, write: true }
      },
      repoConfig: {
        id: "repoId",
        downloadUrl: "http://my.integration.com/v2/context/docId/content",
        uploadUrl: "http://my.integration.com/v2/context/docId/content",
        params: { "x-param-1": "aaa" }
      },
      openConfig: { action: "edit" },
      documentServerAddr: "http://zoffice_hostname:8001/docs",
      token: "YOUR_SIGNED_JWT_TOKEN"
    };

    ZOfficeSDK.mount(initConfig, "#frameholder");
  </script>
</body>
</html>
Last updated on