Working with watermark

Use the Automation API to change the watermark drawn over the document pages from an external UI — for example, to show the name of the current user or the document status.

info

The document opens with a watermark set in the editor config. Your code calls connector.executeMethod() to replace it. The editor redraws the pages in real time.

External controls

How it works

The initial watermark is set in the document.options.watermark_on_draw parameter of the editor config. The %user_name% placeholder is replaced with the name from editorConfig.user.name:

const config = {
  document: {
    options: {
      watermark_on_draw: {
        type: "rect",
        width: 160,
        height: 60,
        rotate: -45,
        transparent: 0.3,
        fill: [],
        stroke: [],
        align: 1,
        paragraphs: [{
          align: 2,
          runs: [{
            text: "Confidential: %user_name%",
            fill: [128, 128, 128],
            "font-family": "Arial",
            "font-size": 28,
            bold: true,
          }],
        }],
      },
    },
    // ...
  },
  editorConfig: {
    user: { id: "uid-1", name: "John Smith" },
    // ...
  },
};

When the user clicks the Apply button in the custom interface or presses Enter in the text field, the SetProperties method is executed with the new watermark properties in the watermark_on_draw parameter. The value is a string with the watermark object in JSON:
```
document.getElementById("applyWatermark").addEventListener("click", () => {
  connector.executeMethod("SetProperties", [{
    watermark_on_draw: JSON.stringify(buildWatermark()),
  }]);
});
```

warning

The watermark is drawn by the editor in the browser and does not restrict access to the document. To stop users from getting the document without the watermark, also restrict download, print and copy in the document permissions.

note

Please note that the connector is available only for ONLYOFFICE Docs Developer.

The connector is a premium feature available at an extra cost. See ONLYOFFICE Docs Developer for pricing details, or contact our sales team at sales@onlyoffice.com to request a quote.

How it works​

How it works