Ask tech team
From QuickBlox Developers (API docs, code samples, SDK)
(Redirected from Web)
Jump to: navigation, search


Code samples

Learn how to include Video/Audio calls, create Group Chat room and 1 to 1 Chat, enable Push Notifications, authenticate users via Facebook/Twitter, show users' Locations and POIs, store and retrieve files from the cloud — these code samples are really simple so that even beginner developers can understand them.

Simple samples

Title APIs used Description
Simple JavaScript VideoChat (WebRTC) code sample Chat, VideoChat The VideoChat code sample allows you to easily add video calling and audio calling features into your Web app. Enable a video call function similar to Skype using this code sample as a basis.

WebRTC web sample1.png WebRTC web sample2.png

Simple JavaScript Chat (XMPP) code sample Chat, Users The Chat code sample connects and socializes your users with the chat module. Features include: Peer to Peer Chat; Group Chat; Location-based Chat.

Quickblox Status checker with Node.js Chat,Custom Objects, Users This is a Node.js status checker that tests each endpoint of the API and logs the results to Custom Objects every 10 minutes. It uses almost every method of the Javascript SDK as well as a Quickblox chat implementation with the node-xmpp module.

Simple JavaScript Custom Objects (key value data store) code sample Custom Objects, Users This sample demonstrates how to build your own web blog for 2 hours. This Custom Objects code sample allows you to create any server side data structure, utilise it for any purpose, create any logic and many other custom features.

Simple JavaScript Content storage and update code sample Content, Users The Content code sample allows you to send, stream, store, share and save content, so that you may update your app's content without having to republish.

Simple JavaScript Users authentication code sample Users The Users code sample helps you manage and retain your user base across all platforms. It includes a simple authentication process with Single Sign-On and integration across all popular platforms, including social integration with Facebook/Twitter.

Simple Facebook Location code sample Location, Users NOTE: is not using JS SDK! This is a sample of web application using QuickBlox for Facebook. The application uses the QuickBlox modules Location and Users. Using this application the user can send emoticons to their friends on Facebook. All users are displayed on the map.

Simple Web Location code sample Location, Users NOTE: is not using JS SDK! There is a simple web application that demonstrates the main features of the modules QuickBlox Location and QuickBlox Users.

Extended products

Title APIs used Description
Group Chat Room widget Chat, Users The XMPP chat was built to demonstrate how the QuickBlox API is compatible with the web as well as iOS, Android and WP7. Users login with Facebook Connect and are then put straight into the chatroom. It has also been extended into a Wordpress plugin with location integration. You can check it out on GitHub here, see the demo in action here or access the key generator here. The Wordpress plugin has over 1200+ downloads.

Location-based Chat (MapChat) widget Chat, Location, Users NOTE: is not using JS SDK! This is a complex sample of a Web application using QuickBlox. The application uses the QuickBlox modules Location and Users. Using this application, the user can see other users on the map. Users can to communicate with each other using Chat which is built on Location API. The Wordpress plugin has over 1600+ downloads.

How to: add SDK to Web and Node.js applications and connect to the cloud

Usage in browsers

The Quickblox JavaScript SDK provides a JavaScript library that making it even easier to access the QuickBlox cloud backend platform.

Dependencies for browser

For the library to work, you need to include either jQuery or Zepto in your html before quickblox.js, like so:

<script src="jquery.min.js"></script>
<script src="quickblox.js"></script>

Bower and RequireJS

If you use bower package manager for your project, you can install JS SDK through bower:

bower install quickblox --save

When you use RequireJS, you are able to want to use quickblox as AMD module. This is available. SDK supports UMD (Universal Module Definition) pattern for JavaScript modules. So it is easy used everywhere (as browser global variable, with AMD module loader like RequireJS or as CommonJS module for Node.js environment).

Usage with Node.js and NPM

Also you can use QuickBLox JavaScript SDK with server-side applications on NodeJS through the native node package. Just install this package in your application project like that:

npm install quickblox --save

And you're ready to go.

var QB = require('quickblox');
// OR to create many QB instances
var QuickBlox = require('quickblox').QuickBlox;
var QB1 = new QuickBlox();
var QB2 = new QuickBlox();


We recommend you to create config.js configuration file in your js-application and insert your QB application credentials and other ancillary data into it.

var CONFIG = {
  appId: 3477,
  authKey: 'ChRnwEJ3WzxH9O4',
  authSecret: 'AS546kpUQ2tfbvv',
  debug: false

Oh, please, please show me the code

JavaScript SDK is really simple to use. In just a few minutes you can power up your JS app with huge amount of awesome communication features & data services.

For use inside browsers, a window scoped variable called QB is created. Most, with the notable exception of init, take a callback parameter which gets called with an error and result parameter (ala node.js).

The common way to interact with QuickBlox can be presented with the following sequence of actions:

  1. Initialize framework
  2. Create session
  3. Login with existing user or register new one
  4. Perform actions with QuickBlox communication services and any data entities (users, locations, files, custom objects, pushes etc.)

Initialize framework with application credentials

In addition, there is helpful 5 minute guide

QB.init(CONFIG.appID, CONFIG.authKey, CONFIG.authSecret, CONFIG.debug);

Initialize framework with existing QB token

This means you can generate a token elsewhere (e.g. on the server side), and then use this token instead of initialising the SDK with your application key and secret.


Changing default configuration

As of version 1.3.8, you can now pass configuration options when initialising the SDK. This is useful when you need to use your own endpoints (when using the Enterprise plans), or if you want to turn on debugging. We may add some more configurable options soon.

Before the 1.3.8 update, the initialisation was like this:

QB.init(3477, 'ChRnwEJ3WzxH9O4', 'AS546kpUQ2tfbvv', true);

The last value being "debug" - setting it to true enabled console.debug() in a bunch of different places. Basically, every request is logged to the console - it's pretty useful.

This functionality is still there, however a few extra options have been added. You are now able to pass an object of configuration changes (rather than just a boolean) and change a few things in one fell swoop. To change the API endpoint, you just pass an endpoints.api in this object - like so:

var config = {
  endpoints: {
    api: ""
  ssl: false,
  debug: true
QB.init(3477, 'ChRnwEJ3WzxH9O4', 'AS546kpUQ2tfbvv', config);

The above would enable debugging, disable ssl and change the API endpoint so that requests would go to

Here's a list of all the configurable options:

ssl: boolean
debug: boolean
endpoints.api: '' ''
endpoints.muc: ''
endpoints.turn: ''
endpoints.s3Bucket: 'qbprod'
chatProtocol.bosh: ''
chatProtocol.websocket: 'wss://' 1 || 2


As of version 1.7.0, you may now specify a session expiry listener in this configuration. It looks like this:

config = {
  on: {
    sessionExpiry: [Function]

It has been placed inside the "on" field so that we can add more listeners in the future. This function fires when the SDK makes a request and recognises an expired session error. It will execute this function before it executes the original callback for the request. You could use it to create a new session, request a new token from your backend, or simply tell the user to refresh the page.

This function accepts 2 parameters, "next" and "retry". Calling next() will cause the original callback of the request to be fired - you would use this if your session creation/regeneration fails. Retry will make the original request again with your newly regenerated token, meaning minimal interruption to the operation of your code.

A few words about Authentication and Authorization

To be able to use QuickBlox API you have to create a session.

There are 2 types of session:

  • Application session. It provides only READ access to data.
  • User session. It provides CRUD (Create, Read, Update, Delete) access to data.

To create an application session use this code:

QB.createSession(function(err, result) {
  // callback function

With an Application session you can READ any data you need and only have to do one Create operation — User Sign Up (Users API):

var params = {login: 'garry', password: 'garry5santos'};
QB.users.create(params, function(err, result) {
  // callback function

To update an Application session to a User session you have to login to QuickBlox:

var params = {login: 'garry', password: 'garry5santos'};
// or through email
var params = {email: '', password: 'garry5santos'};
// or through social networks (Facebook / Twitter)
var params = {provider: 'facebook', keys: {token: 'AM46dxjhisdffgry26282352fdusdfusdfgsdf'}};
QB.login(params, function(err, result) {
  // callback function

Or, if the user is already exist, you can create a User session in single query as well:

var params = {login: 'garry', password: 'garry5santos'};
// or through email
var params = {email: '', password: 'garry5santos'};
// or through social networks (Facebook / Twitter)
var params = {provider: 'facebook', keys: {token: 'AM46dxjhisdffgry26282352fdusdfusdfgsdf'}};
QB.createSession(params, function(err, result) {
  // callback function

A session will remain valid for 2 hours after the last request to QuickBlox was performed.

Code snippets

JavaScript SDK provides the following modules to interact with QuickBlox API (each module has suite of static methods):

  • QB.users
  • QB.webrtc
  • (Custom Objects)
  • QB.content
  • QB.location
    • QB.location.geodata
    • QB.location.places
  • QB.messages
    • QB.messages.tokens
    • QB.messages.subscriptions

List users by ids from array which is sorted by desc (Users API)

var params = {
  filter: { field: 'id', param: 'in', value: [3,45,2241] },
  order: { sort: 'desc', field: 'id' }
QB.users.listUsers(params, function(error, response){
  // callback function

Get user by full name

QB.users.get({full_name: 'Garry Osborn'}, function(error, response){
  // callback function

Update a user

QB.users.update(USER_ID, {website: ""}, function(error, response){
  // callback function

Delete a user

QB.users.delete(USER_ID, function(error, response){
  // callback function

Reset user password

QB.users.resetPassword('', function(error, response){
  // callback function

Upload a location

QB.location.geodata.create({ latitude:"51.523170", longitude: "-0.111215" }, function(error, response){
  // callback function

Create a place

QB.location.places.create({ geo_data_id:, title: "Quickblox HQ", address: "8 Warner Yard, Clerkenwell, London, EC1R 5EY" }, function(error, response){
  // callback function

Create content

QB.content.create({name: "Test file", content_type: "image/png", 'public': true}, function(err, response){
  // callback function

List content

QB.content.list(function(error, response){
  // callback function

Create a custom object

var data = {
  field: "value"
}"ClassName", data, function(err, response){
  // callback function

Update a custom object record

var data = {
  _id: data._id,
  Hello: "Goodbye, World!"
}"ClassName", data, function(err, response){
  // callback function

List all custom objects"ClassName", function(err, response){
  // callback function

Delete a custom object"ClassName", data._id, function(err, response){
  // callback function

Read on: JavaScript SDK documentation (Swagger docs)

You can access Swagger docs here:
Quickblox JS SDK framework documentation

Test API: Spec Runner

You can check QuickBlox API tests with JavaScript SDK.

  • To use the Spec Runner, head over to the Spec Runner page on GitHub.
  • Or if you download the Javascript SDK, you will find the Spec Runner in the /spec folder.

Browsers support

IE Firefox Chrome Safari Opera Android Browser Blackberry Browser Opera Mobile Chrome for Android Firefox for Android
10+ 4+ 13+ 6+ 12+ 4.4+ 10+ 12+ 35+ 30+

Download JavaScript SDK

The latest version is 1.8.0.

All SDK (with examples, sources and spec)

QuickBlox JavaScript SDK, zip archive

Just JavaScript library

Download the uncompressed, development version — quickblox.js
Download the compressed, production version — quickblox.min.js

Node npm package

npm quickblox

SDK plugins (deprecated)

chat plugin

Framework changelog

v1.8.0 — Feb 07, 2015

  • QB.webrtc
    • updated Signaling messages and API
    • added a support of the cross-platform video / audio calls (web-ios-android)
    • small bugfix

v1.7.0 — Jan 13, 2015

  • Allowed use of Zepto.js with QB JS SDK
  • Added sessionExpired listener function which checks the expiration time for session
  • Added ISO time injection to server responses
  • new API:
    • QB.getSession() for retrieving info about current session

v1.6.0 — Dec 17, 2014

  • Added WebRTC module to SDK core
  • Removed the deprecated webrtc plugin

v1.5.0 — Nov 28, 2014

  • Return back to CommonJS modules
  • Support of UMD (Universal Module Definition) for SDK
  • bugfix with QB variable for browser

v1.4.3 — Nov 25, 2014

  • Rewrited SDK with RequireJS modules
  • Published SDK to Bower
    • added method

v1.3.8 — Nov 10, 2014

  • added configuration options to QB.init()

v1.3.7 — Oct 27, 2014

    • auto reconnect to chat after session closing (added callback)
    • enabled Carbons extension
    • improved roster logic
    • small bugfix

v1.3.5 — Sep 26, 2014

    • added API: Create a message
    • added API: Remove chat dialog
    • Using MongoDB.Bson.ObjectID as the XMPP ID
    • Added the callback functions to roster methods
    • Fixed receiving messages for Safari and IE
    • Fixed removing of roster item

v1.3.0 — Sep 1, 2014

  • Added Chat 2.0 module (Note! doesn't available in npm package yet)

v1.2.0 — Jun 15, 2014

  • Updated the SDK core
    • removed jQuery library
    • completion of support IE9
    • QB.session and QB.config are deprecated (please use QB.service.qbInst object instead)
    • optimization SDK
  • Updated Auth module
    • added Twitter authorization
  • Updated Users module
    • added all users filters
    • renamed perPage and pageNo to per_page and page respectively
    • get user by external ID
    • delete user by external ID
    • added .resetPassword() function
  • Bug fixes Content and CO modules

v1.1.13 — Jun 7, 2014

  • Node.js compatibility
  • Created a node npm package

v1.1.0 — Apr 24, 2014

  • Added chat and webrtc plugins

v1.0.1 — Feb 25, 2014

  • Added initialization with existing QB token

v1.0.0 — Jan 22, 2014

  • SDK stable version
  • (Users, Content, Location, Messages, Custom Objects) API calls are covered


Feel free to comment on this page using the form below.

blog comments powered by Disqus