Introduction
The ONLYOFFICE Apps Embed SDK, based on JavaScript, lets you embed ONLYOFFICE Apps directly inside your web application. You can integrate a full document workspace, a standalone editor, a file picker, or a background authentication frame — with just a few lines of code.
You can use it as an npm package for modern web applications or connect it via a script tag for a quick start. For React projects, there is also a ready-made React component.
Prerequisites
Before you begin, make sure you have the following:
- A running ONLYOFFICE Apps instance, either cloud or self-hosted — client version 4.0.0 or later (Embed SDK 2.2.0 requires ONLYOFFICE Apps 4.0.0).
- The origin of your embedding page added in ONLYOFFICE Apps Developer Tools → Embed SDK
- A server environment to serve your embedding page from — opening it as a local HTML file directly in the browser will not work
- A modern browser — Chrome, Firefox, Edge, or Safari (the SDK relies on
postMessageand other standard web APIs)
If your ONLYOFFICE Apps instance is served over HTTPS, your embedding page must also be served over HTTPS — browsers block mixed content (an HTTPS page loading resources from HTTP), which prevents the SDK from loading at all.
With HTTPS on both sides and the embedding page's origin registered in Developer Tools (see the Prerequisites above), the portal automatically sets the auth cookie's SameSite=None; Secure; Partitioned attributes for you — no manual configuration needed. Without HTTPS, the cookie falls back to SameSite=Strict and won't be sent inside the iframe, breaking session-based authentication.
Embedding modes
The SDK supports multiple initialization modes:
| Mode | UI shown to user | User can browse | User can edit | Requires file/room ID | Auth required |
|---|---|---|---|---|---|
| Manager | Full file and room manager | Yes | Yes | No | Yes |
| Public room | Public room view | Yes (within room) | Yes (within room) | Yes (room) | No |
| Viewer | Document viewer | No | No | Yes (file) | Yes |
| Editor | Document editor | No | Yes | Yes (file) | Yes |
| Room selector | Room picker dialog | Rooms only | No | No | Yes |
| File selector | File picker dialog | Yes | No | No | Yes |
| System | None (hidden frame) | N/A | N/A | N/A | Yes |
| Uploader | File upload dialog | No | No | Yes (folder) | Yes |
| Forms | Form filling room | Yes | Yes | Optional (room from portal settings by default) | Yes |
| Chat | AI chat interface | No | No | No | Yes |
| Personal | Personal file manager (My Documents, Favorites, Recent, Shared with me, Trash) | Yes | Yes | No | Yes |
- For Public room, editing is scoped to documents within the room.
- Selector, system, and uploader modes do not expose editing capabilities.
Ready to embed ONLYOFFICE Apps? Follow the Quickstart.
Live demo
To see what the SDK looks like in a real product, explore the live demo — a sample conference website with ONLYOFFICE Apps embedded across multiple pages, each using a different mode:
| Page | What's embedded |
|---|---|
| Home | Presentation playing in the Viewer mode |
| Program | Spreadsheet in the Viewer mode; participant documents in an embedded file list |
| Abstract Submission | Fillable form open in the Editor mode |
| Promotional Toolkit | Marketing materials browsable in an embedded file list |
| Registration | Price list spreadsheet in the Viewer mode |
Example
This example shows what an ONLYOFFICE Apps Public room looks like when embedded in your website as a frame.