Skip to main content

Initialize system

This example demonstrates how to initialize the ONLYOFFICE Apps system interface using the Embed SDK.

Complete source code on GitHub: JavaScript

Before you start​

Please make sure you are using a server environment to run the HTML file because the Embed SDK must be launched on the server. You need to add the URL of your server's root directory to the Developer Tools section of ONLYOFFICE Apps.

Full example
<!-- Step 1: HTML Setup -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Init System</title>

    <!-- Replace with your actual portal URL -->
    <script src="{PORTAL_SRC}/static/scripts/sdk/2.2.0/api.js"></script>
  </head>

  <body>
    <!-- SDK iframe -->
    <iframe id="ds-frame"></iframe>
  </body>

  <!-- Step 2: Embed SDK Logic -->
  <script>
    const config = {
      frameId: "ds-frame",
      src: "{PORTAL_SRC}",
      width: "100%",
      height: "700px",
    };

    const docSpace = DocSpace.SDK.initSystem(config);
  </script>
</html>

Step 1. Set HTML structure​

Create an HTML page with a frame element that will load the ONLYOFFICE Apps system interface.

<!-- Step 1: HTML Setup -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Init System</title>

    <!-- Replace with your actual portal URL -->
    <script src="{PORTAL_SRC}/static/scripts/sdk/2.2.0/api.js"></script>
  </head>

  <body>
    <!-- SDK iframe -->
    <iframe id="ds-frame"></iframe>
  </body>
</html>
info

The API JavaScript file can normally be found in the following ONLYOFFICE Apps folder: {PORTAL_SRC}/static/scripts/sdk/2.2.0/api.js where {PORTAL_SRC} is the name of the server with the ONLYOFFICE Apps installed.

Step 2. Embed SDK logic​

Configure and initialize the system view using the initSystem() method.

const config = {
  frameId: "ds-frame",
  src: "{PORTAL_SRC}",
  width: "100%",
  height: "700px",
};

const docSpace = DocSpace.SDK.initSystem(config);