Skip to main content

Initialize frame

This example demonstrates how to initialize an ONLYOFFICE Apps frame using the universal Embed SDK init method. The frame opens in the mode set by the mode config field (manager by default).

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 Structure -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Init Frame</title>

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

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

  <!-- Step 2: Embed SDK Logic -->
  <script>
    const config = {
      frameId: "ds-frame", // ID of the iframe container
      src: "{PORTAL_SRC}",
      width: "100%",       // Full width
      height: "700px",     // Set desired height
    };

    // Initialize the ONLYOFFICE Apps SDK frame
    const docSpace = DocSpace.SDK.initFrame(config);
  </script>
</html>

Step 1. Set HTML structure​

Add an iframe to your HTML page to embed the ONLYOFFICE Apps frame.

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

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

  <body>
    <!-- SDK iframe container -->
    <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​

This example demonstrates how to initialize an ONLYOFFICE Apps frame using the initFrame() method. Unlike the mode-specific init methods, initFrame() doesn't set the mode itself: it reads it from the mode field and falls back to manager when the field is omitted.

const config = {
  frameId: "ds-frame", // ID of the iframe container
  src: "{PORTAL_SRC}",
  width: "100%",       // Full width
  height: "700px",     // Set desired height
};

// Initialize the ONLYOFFICE Apps SDK frame
const docSpace = DocSpace.SDK.initFrame(config);