Customization

Description

The customization section allows to customize the editor interface so that it looked like your other products (if there are any) and change the presence or absence of the additional buttons, links, change logos and editor owner details.

Parameters
Name Description Type Example
Defines if the Autosave menu option is enabled or disabled. If set to false, only Strict co-editing mode can be selected, as Fast does not work without autosave. Please note that in case you change this option in menu it will be saved to your browser localStorage. The default value is true. boolean true
Defines if the Chat menu button is displayed or hidden; please note that in case you hide the Chat button, the corresponding chat functionality will also be disabled. The default value is true. boolean true
Defines if the user can edit only his comments. The default value is false. boolean true
Defines if the Comments menu button is displayed or hidden; please note that in case you hide the Comments button, the corresponding commenting functionality will be available for viewing only, the adding and editing of comments will be unavailable. Deprecated since version 4.4, please use document.permissions.comment instead. boolean true
Defines if the top toolbar type displayed is full (false) or compact true. The default value is false. boolean false
Contains the information for the editor About section. The object has the following parameters:
  • address - postal address of the above company or person,
    type: string,
    example: "My City, 123a-45";
  • info - some information about the above company or person which will be displayed at the About page and visible to all editor users,
    type: string,
    example: "Some additional information";
  • logo - the path to the image logo which will be displayed at the About page (there are no special recommendations for this file, but it would be better if it were in .png format with transparent background). The image must have the following size: 432x70,
    type: string,
    example: "http://example.com/logo-big.png".
  • mail - email address of the above company or person,
    type: string,
    example: "john@example.com".
  • name - the name of the company or person who gives access to the editors or the editor authors,
    type: string,
    example: "John Smith and Co.";
  • www - home website address of the above company or person,
    type: string,
    example: "example.com".
object
Defines settings for the Feedback & Support menu button. Can be either boolean (simply displays or hides the Feedback & Support menu button) or object. In case of object type the following parameters are available:
  • url - the website address which will be opened when clicking the Feedback & Support menu button,
    type: string,
    example: "http://example.com";
  • visible - show or hide the Feedback & Support menu button,
    type: boolean,
    example: true.
The default value is false.
boolean or object true
Adds the request for the forced file saving to the callback handler when saving the document within the document editing service (e.g. clicking the Save button, etc.). The default value is false. boolean false
Defines settings for the Go to Documents menu button and upper right corner link. The object has the following parameters:
  • text - the text which will be displayed for the Go to Documents menu button and upper right corner link (i.e. instead of Go to Documents),
    type: string,
    example: "Go to Documents";
  • url - the website address which will be opened when clicking the Go to Documents menu button,
    type: string,
    example: "http://example.com".
boolean or object true
Changes the image file at the top left corner of the Editor header. The recommended image height is 20 pixels. The object has the following parameters:
  • image - path to the image file used to show in common work mode (i.e. in view and edit modes for all editors). The image must have the following size: 172x40,
    type: string,
    example: "http://example.com/logo.png";
  • imageEmbedded - path to the image file used to show in the embedded mode (see the config section to find out how to define the embedded document type). The image must have the following size: 248x40,
    type: string,
    example: "http://example.com/logo_em.png";
  • url - the link which will be used when someone clicks the logo image (can be used to go to your web site, etc.),
    type: string,
    example: "http://example.com".
object
Defines if the review changes panel is automatically displayed or hidden when the editor is loaded. The default value is false. boolean false
Defines the document display zoom value measured in percent. Can take values larger than 0. For text documents and presentations it is possible to set this parameter to -1 (fitting the document to page option) or to -2 (fitting the document page width to the editor page). The default value is 100. integer 100
* - available for editing only for ONLYOFFICE Document Server Integration Edition
Example
var docEditor = new DocsAPI.DocEditor("placeholder", {
    "editorConfig": {
        "customization": {
            "chat": true,
            "commentAuthorOnly": false,
            "compactToolbar": false,
            "customer": {
                "address": "My City, 123a-45",
                "info": "Some additional information",
                "logo": "http://example.com/logo-big.png",
                "mail": "john@example.com",
                "name": "John Smith and Co.",
                "www": "example.com"
            },
            "feedback": {
                "url": "http://example.com",
                "visible": true
            },
            "forcesave": false,
            "goback": {
                "text": "Go to Documents",
                "url": "http://example.com"
            },
            "logo": {
                "image": "http://example.com/logo.png",
                "imageEmbedded": "http://example.com/logo_em.png",
                "url": "http://www.onlyoffice.com"
            },
            "showReviewChanges": false,
            "zoom": 100
        },
        ...
    },
    ...
});

Where the example.com is the name of the the server where document manager and document storage service are installed. See the How it works section to find out more on Document Server service client-server interactions.

If you have any further questions, please contact us at integration@onlyoffice.com.