QBank Connector - Embed QBank via JavaScript

You may download or execute the script directly from http(s):// Accessing the script using the URL instead of downloading and using from a local source ensures that you receive backwards compatible updates automatically, without needing to update yourself. Any breaking changes are implemented using a new URL.

      1. Get an access token (authenticating using the connector is not implemented). The idea is to have some sort of setup form where the user submits his username, password and which QBank instance to connect to - and using the provided information in your backend code to authenticate and retrieve the access token. A quick workaround to get started without implementing the required Oauth2 protocol is to visit, view the source and copy the token shown on line ~14. This token is valid for one hour so you will need to retrieve a new token manually once it expires

      2. You need to include JQuery, as the connector depends on it to work. (Future versions may not be dependent on JQuery).
        20151130: JQuery is no longer an external dependency!

      3. Include the connector javacript so that it is available for your dialog.

      4. Initiate the javascript using an object config (see example below). Required requisites are host (the same that you are using in the setup, ie as well as the access_token previously retrieved. You can also submit any standard search parameters or define which deployment site to use. A deployment site is a public FTP where pre-specified formats of images or videos will be published, for use by lets say a CMS system

      5. Create a new QBankConnector using your config. QBankConnector will return an object which you can use to create new mediapickers with. We have created an example mediapicker. When creating a mediapicker you need to include a container parameter, which will be the area that will be occupied by our QBank iframe. The mediapicker will return an object which you can call, ie. close() to close the dialog. Use onSelect to to handle when selecting assets. Your method should accept a parameter defining the selected asset. In some cases other return parameters are generated.

 var QBC;
$(document).ready(function() {
var qbcConfig = {
api: {
host: ‘',
access_token: ‘DinAccessToken',
search: {
deploymentSiteIds: [4]
QBC = new QBankConnector(qbcConfig);
var mediaPicker = new QBC.mediaPicker({
container: ‘JQuerySelectorTillDinWrapper/EllerJQueryObjekt',
onSelect: function(media) {
alert('You selected '+media.mediaId+'!');

There are a few different examples and demos available at covering the methods and variants that have been implemented so far. Use “view source” or any DOM/Element inspector to peek around in the examples.

All the “read” functions have been finalized, as well as upload and edit media. We are currently in the process of finishing the other “write” methods such as create/update folder etc.

To request specific formats when selecting an image, use the “requestedTemplates” parameter.

requestedTemplates: [
   { name: 'small', displayName: 'Small images', formats: [ '@w200h100.jpg', '@w100h50.jpg'] },
   { name: 'big', displayName: 'Big images', formats: [ '@w600h600.jpg', '@w300h200.jpg'] }
requestedTemplates: [ '@w600h600.jpg', '@w300h200.jpg']


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Powered by Zendesk