Customizing Developer Cloud API

With DevCloudAPI, you can access and embed a full document viewer using industry leading rendering technology. But more than that, you are also able to customize some elements of the viewer to make it consistent with your business styling guide for colors and also add your brand to your instance of the viewer. This section will show you how to do this quickly.

Note You'll get a better understanding of the guides for the separate APIs in this page if you've read the Getting Started beforehand.

General Options

The general options window shows high-level functionality of the viewer such as default file name, user name and more:

Changing your default URL

If you want your default URL displayed to be different than the default Developer Cloud API file, modify the ‘File’ option with a server URL of the PDF file you wish to use.

Note: Make sure your server has CORS policy enabled to accept cross-reference requests, or this option might not work in some cases.

Changing your viewer size

Changing the size is one of the first things you will need to do once you embed this to an application, given there are many different dimensions for where you will be placing your viewer. Just modify the Width and Height to your desired size and copy the link again when you use.

Toolbar and Sidebar

Your project’s layout can be customized in the Setup window. The toolbar and sidebar configuration elements are listed out below:

Toolbar Settings

Button Layout

  • Full – Default UI
  • View-Only – Removes all editing options as well. Useful for projects where only viewing is necessary (brochures, ads, manuals)

  • Basic Annotation – Provides annotation and markups. Useful for projects where adding markups and annotations are required (designs, presentations, interactive documents)

  • You may choose between the default theme or a secondary theme based on Font Awesome Light icons.

Sidebar Settings

Button Layout

  • Full – Default UI
  • Comment-Only – Removes bookmarks, layers and search option from the sidebar. Only annotations are available.

  • You may choose between the default theme or a secondary theme based on Font Awesome Light icons.

Note: There were bug reports that the sidebar does not display by default. If that is the case, please try to add a simple annotation to the page to trigger the sidebar activity.

You may select to use a new logo by updating the URL field below. You may also control the size of the logo in the Width and Height fields, as well as the positioning of the viewer. Let’s update the logo here for Foxit’s main logo.

Banner on top

Left of toolbar tabs

Changing viewer colors

The set of default colors are provided below with the DevCloudAPI original color guide styling:

Let’s change that into Foxit’s main styling orange guide and also add a Foxit main logo on top by changing the URL into an image hosted in our website:

This is how our viewer looks now:

Note: Any time you make a change in your viewer customization, make sure to copy the link and paste again in your environment to see the changes.


For more documentation please click here or create an account here.

About Us

Foxit is the industry leader in PDF SDK Technology. We help you to add complete PDF functionality to your project and develop across all platforms and environments on one Core API.

Our Contacts

41841 Albrae Street,
Fremont, CA 94538, USA

Sales: 1-866-680-3668
Support: 1-866-693-6948