JavaScript API — Widget styling

  • This documentation is for the version 3.2.2 of the widget. If you're looking for the JavaScript for Widget v2 docs, check here.

You can easily adapt our widget or dialog to your page style by modifying the respective CSS stylesheet. However, some tabs are opened in an iframe from our domain, e.g., Facebook tab, Instagram, etc. For those tabs you can customize, please use the following methods.

Adding plain CSS

You can add some plain CSS code to tabs. Use classes to identify a tab you want to modify.

var style = ".source-facebook .main-content {background: #98AFD5;}";
uploadcare.tabsCss.addStyle(style);

Adding CSS file

Another option is adding a CSS file to your tabs via an absolute file URL.

uploadcare.tabsCss.addUrl("https://site.com/styles/uc.tabs.css");

Note, tabs are opened via HTTPS. Hence there is no way to add a CSS file through HTTP. If your site does not support HTTPS, you can use a third-party hosting providing HTTPS support for such files. Amazon S3 is a good option.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.