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,

1. Open the Developer Tools section by clicking the Developer Tools link which is 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, accordingly, create own integrations.

   Admins can both use the Developer Tools link on the left and switch to this section from the DocSpace Settings by using the menu in the lower left corner, selecting the Settings -> Developer Tools option.

2. In the Developer Tools, go to the JavaScript SDK section.
3. On the JavaScript 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.
   
4. 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.
   • 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.
5. Click the Start setting up button.
6. 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.
7. Preview the result in the Preview section.
8. Switch to the Code to insert tab and copy the generated HTML, JavaScript, or NPM code.
9. Embed the copied code into your website.

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