Embed widget in a page

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

We understand the importance of seamless UX/UI and provide a good number of widget customization options that cover both widget appearance and behavior. The look of the widget can be changed via CSS, and our interactive configurator is a great starting point for controlling how your widget behaves.

You can also switch from the widget dialog to a panel. This embeds the widget in your page.

Embed widget in a page

The default behavior is when the widget dialog appears on pushing a button. This also covers the rest of the page with a semi-transparent background. It is a good fit when you use the widget to fill in a single form field out of many.

However, uploading user-generated content may be the very purpose of a whole page, like a step in some wizard. That is when we provide you with the ability to show the widget on a page without any preceding clicks or taps. The thing is called panel.

<div id="uploader-placeholder">Uploading. Please wait...</div>
<script>uploadcare.openPanel('#uploader-placeholder');</script>

This replaces your DOM element with the uploadcare-placeholder id and then puts it in place once a user selects a file. This can be used to show some indication of the uploading process, for instance. Also, unlike the dialog, widget panel can be closed by simply selecting a file.

Uploading. Please wait...

Panel styling

That’s just an example of altering the look of your widget. Say, you embedded a widget in your page as a panel. And, now you don’t like its look because of the sharp border. You are free to change the appearance via CSS. It goes like this,

#uploader-styling {
  margin-top: 10px;
}
#uploader-styling .uploadcare--panel,
#uploader-styling .uploadcare--menu__item,
#uploader-styling .uploadcare--menu__items {
  background-color: transparent;
  border: 0;
}
#uploader-styling .uploadcare--panel {
  flex-direction: column;
}
#uploader-styling .uploadcare--menu {
  width: 100%;
  height: 60px;
  min-height: 60px;
}
#uploader-styling .uploadcare--menu__items {
  padding-right: 0;
  flex-direction: row;
}
.uploadcare--tab_name_favorites {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: auto;
}
.favorite-files-image {
  width: 140px;
  height: 140px;
  margin: 10px;
  padding: 5px;
  color: rgba(0,0,0,.4);
  box-shadow: 0 6px 20px -3px;
  cursor: pointer;
}
.favorite-files-image:hover {
  color: rgba(0,100,200,.5);
}
Uploading. Please wait...

Some of the dialog elements are rendered to iframes from our servers which does not allow any CSS customization. However, we provide a set of specific methods to inject CSS into iframes.

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.