Embedding DocSpace

You can integrate ONLYOFFICE DocSpace or its parts into your own web application, allowing users to create and submit documents directly from your website.

For this purpose, use the ONLYOFFICE DocSpace SDK based on JavaScript which allows developers to use all the DocSpace possibilities with api.js.

To embed the whole DocSpace, a certain room, or a folder to your website,

Open the Developer Tools section by clicking the Developer Tools link available on the left panel in any section (Rooms, Documents).
By default, access to the Developer Tools section is enabled for all users except guests so that any user can access this page and create their own integrations.
In the Developer Tools, go to the Embed SDK section.
On the Embed SDK page, go to the Enter the address of DocSpace to embed section, paste the link to your website and press the + icon.
If you are using the server version, it's necessary to switch your DocSpace to HTTPS first. You can follow our instructions in the Installation section.
In the Select a mode for embedding your DocSpace section, choose one of the suggested modes: DocSpace, Public room, Editor, Viewer, Room selector, File selector, Custom.
- DocSpace - embed the whole DocSpace to allow users to interact with all rooms, files, and settings.
- Public room - embed a public room to allow users to view all the documents stored there without registration.
- Editor - embed an editor to allow users to edit a file from the corresponding room.
- Viewer - embed a viewer to allow users to open a file for viewing from the corresponding room.
- Room selector - embed a room selector to allow users to access any room from the list of the available ones. You can embed all types of rooms or select the necessary ones in the Advanced display settings -> Room type display menu. Select the necessary option: All types, Public room, Form Filling Room, Collaboration room, Virtual Data Room, Custom room.
- File selector - embed a file selector to allow users to access any file from the list of the available ones.
- Custom - manually configure the parameters for embedding your DocSpace.
- Uploader - embed an uploader so that users can upload documents to your space without registration. Choose the allowed file types for upload. The following settings are available:
  - Destination folder ID - select the DocSpace folder where uploaded files will be saved. Use the folder picker to browse and choose the target location.
  - Upload mode - select what users will be able to upload:
    - Files - allow uploading individual files.
    - Folders - allow uploading entire folder structures.
  - Quantity - define how many items can be uploaded at once:
    - Single file - restrict the uploader to one file per session.
    - Multiple files - allow uploading several files at once.
  - Upload limits - set the Maximum file size and unit (KB, MB, or GB) to restrict how large an individual uploaded file can be.
  - Available file types - check one or more categories to restrict what file types can be uploaded: Documents, Spreadsheets, Presentations, Images, Video, Audio, Archives, PDF.
  - Button text - customize the label on the upload button (defaults to Upload).
  - Helper text - customize the secondary hint text displayed below the button (defaults to or drop file here).
  - Customizing the display - set the Width, Height (in % or px), and the Frame ID used to identify the embedded frame in your page.
Click the Start setting up button.
Customize the available display options which differ depending on the selected mode. For example, the following options are available for the Custom mode: Width, Height, Frame id, Interface elements (Left menu, Title, Setting up Columns, Action button, Search, Filter and Sort, Navigate and Header (only for mobile devices)), Data display settings (select the section, room or folder you want to display), and Advanced display settings, such as Search term, Sort by parameter, Sort order, the number of files / folders displayed on one page, Display page, Displaying columns in a file row.
Preview the result in the Preview section.
Switch to the Code to insert tab and copy the generated HTML, JavaScript, or NPM code.
Embed the copied code into your website.

The Embed SDK page also includes an Integration examples section with ready-to-use DocSpace integrations for popular platforms such as Zoom and WordPress. Click See all connectors to browse the full list of available integrations.

For more details on Embed SDK, please refer to api.onlyoffice.com.