How to embed ONLYOFFICE DocSpace (and its components) to your website
You can share files with external users by embedding the entire ONLYOFFICE DocSpace and its components into any web interface. This functionality allows your website visitors interact with documents without leaving web page or registering their own DocSpace account. Find step-by-step guide in this article.
Embedding presets in ONLYOFFICE DocSpace
We provide configured presets to make embedding DocSpace easy and flexible – no need for special knowledge in coding. Here’s what you can integrate to your web page:
- the entire DocSpace,
- a public room,
- editor,
- viewer,
- room selector,
- file selector.
Also, custom mode is available in case you want to share a different part of DocSpace. Let’s find out how it works.
Before embedding DocSpace to a web page
Pay attention to these simple, but crucial steps. They enable DocSpace embedding in your web interface and therefore necessary to follow.
Step 1. On your DocSpace home screen, click on the three dots next to your name and go to the DocSpace settings.
Step 2. On the left-side panel, choose the Developer Tools option.
Step 3. Navigate to the JavaScript SDK and pay attention to the Embed DocSpace as iframe section.
How to choose the proper embedding preset
ONLYOFFICE DocSpace provides several embedding options with short descriptions, so that you have an idea about each one.
DocSpace
Users will be able to interact with all rooms, files, and settings in your entire space.
Public room
In DocSpace public rooms, you can invite users via external links to allow them to view files without registration. Editing and other actions that can impact the file content are unavailable. Password protection for such rooms is also possible.
Editor
This preset embeds an editor for text, spreadsheet, presentation, form or PDF to enable editing in the corresponding room.
Viewer
Allow opening any type of document for viewing in the corresponding room. Editing and other actions that can modify content are prohibited.
Room selector
Room selector provides access to any room from the list of the available ones. Room types may be different.
File selector
Similarly, file selector displays a list of available files (or a button generating this list) and grants access to them.
Any DocSpace component with custom settings
This option allows changing interface elements, such as buttons, headers, switch on and off filtering, sorting, searching etc.
Inserting HTML or JavaScript code to your web page
The final step after choosing the desired DocSpace embedding preset will be to open Code to insert tab, copy and paste it to website’s index.html file.
Now your DocSpace or its components will show up on your web page – just as in the example below.
Try embedding public rooms in DocSpace yourself, or create a free account if you are new to ONLYOFFICE DocSpace.
Why embed DocSpace to your website?
Developers who plan to enable collaboration on office documents within their web service consider DocSpace for the following reasons.
- Website visitors can view and interact with office documents right on the web page (instead of downloading attached files);
- No need to install additional software for browsing files locally – documents can be opened in literally any web browser;
- Website visitors can download, copy, and print shared documents (if these actions aren’t restricted);
- Website visitors do not need a DocSpace account needed to view shared files;
- Interactive area with folders containing shared documents on your website;
- No overuse of clickable links;
- Shared materials are more visible among the rest content.
DocSpace is available in the cloud, as well as on-premises for those who want to deploy the solution on their servers.
