Viewer Options

const config = { 
  documentId: 'your-document-number',
  darkMode: true,
  themeColor: '#FF0000',
  defaultScale: 'AUTOMATIC',
  appBarColored: true,
  disableElements: ['darkmode']
};
CloudPDF(config, document.getElementById('viewer')).then((instance) => {});

documentId After uploading your document to CloudPDF, you will receive a documentId. Learn how to upload a document?
darkMode (default: false): Toggle between light and dark mode by setting this variable to true or false.
themeColor Customize the theme color using a hex code (e.g., "#FF0000").
defaultScale Sets the default scale of the viewer to 'AUTOMATIC', 'FIT_PAGE', 'FIT_WIDTH', or a number representing the percentage to scale the document. For example, setting defaultScale to 1 scales the document to 100%.
appBarColored (default: false): If set to true, the PDF viewer's toolbar will adopt the theme color.
disableElements Use an array to disable specific UI elements: darkmode, fullscreen, download, search, zoom-in, zoom-out, scale-dropdown, sidebar.
disableToolbar Set to true to hide the toolbar.
token (optional): For public documents, a security token is not required. By default, documents are private and you will need to generate a token.

Adjusting Viewer Settings After Initialization

Even after initializing the CloudPDF viewer, you can easily modify its settings to customize your experience. Here are some examples of how you can make adjustments to the viewer after the initial setup:

Loading a different document

You can load another document into the viewer by calling the loadDocument method on the instance:

instance.loadDocument({
  documentId: 'a9658aef-c513-4130-afbf-77f3fc19e0e7'
});

Changing the dark mode setting

You can toggle the dark mode setting on and off by calling the setDarkMode method on the instance:

instance.setDarkMode(false);

Changing the theme color

You can modify the theme color by calling the setThemeColor method on the instance:

instance.setThemeColor('#ff0000');