> ## Documentation Index
> Fetch the complete documentation index at: https://docs.quickblox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup

> Learn how to add and configure QuickBlox SDK for your app.

Follow the instructions below to ensure that QuickBlox JavaScript SDK runs smoothly with your app.

Visit [Key Concepts](/docs/key-concepts) page to learn the most important QuickBlox concepts.

## Browsers support

| Edge | Firefox | Chrome | Opera | Node.js | Safari |
| ---- | ------- | ------ | ----- | ------- | ------ |
| 14+  | 52+     | 50+    | 36+   | 6+      | 11.1+  |

## Get application credentials

QuickBlox application includes everything that brings messaging right into your application - chat, video calling, users, push notifications, etc. To create a QuickBlox application, follow the steps below:

1. Register a new account following [this link](https://admin.quickblox.com/signup). Type in your email and password to sign in. You can also sign in with your Google or GitHub accounts.
2. Create the app by clicking the **New app** button.
3. Configure the app. Type in the information about your organization into corresponding fields and click the **Add** button.
4. Go to **Dashboard => *YOUR\_APP* => Overview**  section and copy your **Application ID**, **Authorization Key**, **Authorization Secret**, and **Account Key**.

## Requirements

The minimum requirements for QuickBlox JavaScript SDK are:

* JavaScript es5

## Install QuickBlox SDK into your app

There are 3 ways to integrate QuickBlox JavaScript SDK into your app.

### Dependencies for browser

Install QuickBlox library dependencies for browser to establish communication with QuickBlox server. Simply connect the JS file as a normal script. Once it is done, a window scoped variable called `QB` is created.

```HTML HTML theme={null}
<script src="https://unpkg.com/quickblox/quickblox.min.js"></script>
```

### Node.js and NPM integration

<Note>
  To manage project dependencies [Node.js](https://nodejs.org/en/) and [npm](https://docs.npmjs.com/getting-started) must be installed.
</Note>

1. Open a terminal and enter the commands below in your project path.

```Bash Bash theme={null}
npm install quickblox --save
```

1. To be able to work with QuickBlox library, connect it as follows:

```JavaScript JavaScript theme={null}
var QuickBlox = require('quickblox');

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

### Yarn

Install the SDK through Yarn by running the following command:

```Bash Bash theme={null}
yarn add quickblox
```

## Initialize QuickBlox SDK

Initialize the framework with your application credentials. Pass **Application ID**, **Authorization Key**, **Authorization Secret**, and **Account Key** to the `init()` method.

```JavaScript JavaScript theme={null}
var APPLICATION_ID = 41;
var AUTH_KEY = "lkjdueksu7392kj";
var AUTH_SECRET = "iiohfdija792hj";
var ACCOUNT_KEY = "sdjfnksnlk2bk1k34kb";
var CONFIG = { debug: true };

QB.init(APPLICATION_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY, CONFIG);
```

<Warning>
  **Security**

  It's not recommended to keep your **authKey** and **authSecret** inside an application in production mode, instead of this, the best approach will be to store them on your backend.
</Warning>

| Argument        | Description                                                                                   |
| --------------- | --------------------------------------------------------------------------------------------- |
| APPLICATION\_ID | Application identifier.                                                                       |
| AUTH\_KEY       | Authorization key.                                                                            |
| AUTH\_SECRET    | Authorization secret.                                                                         |
| ACCOUNT\_KEY    | Account key. Required to get actual Chat and API endpoints for the right server.              |
| CONFIG          | **(optional)** SDK configuration settings for custom endpoints, chat connecting, WebRTC, etc. |

You can set the following fields using the `CONFIG` object:

| Field            | Description                                                                                              |
| ---------------- | -------------------------------------------------------------------------------------------------------- |
| endpoints        | [Custom endpoints](/sdks/js-setup#section-custom-endpoints) configuration.                               |
| streamManagement | [Stream management](/sdks/js-setup#section-stream-management) configuration.                             |
| webrtc           | [WebRTC](/sdks/js-video-calling-advanced#section-video-calling-settings) configuration.                  |
| chatProtocol     | Chat protocol configuration. Set **1** to use BOSH, set **2** to use WebSockets. Default: **WebSocket**. |
| debug            | [Debug mode](/sdks/js-setup#enable-logging) configuration.                                               |
| endpoints        | [Custom endpoints](/sdks/js-setup#section-custom-endpoints) configuration.                               |

## Initialize QuickBlox SDK without Authorization Key and Secret

You may don't want to store **authKey** and **authSecret** inside an application for security reasons. In such case, you can initialize QuickBlox SDK with **applicationId** and **accountKey** only, and store your **authKey** and **authSecret** on your backend. But, if so, the implementation of [authentication with QuickBlox](https://docs.quickblox.com/reference/authentication) should be also moved to your backend.

```JavaScript JavaScript theme={null}
var appId = 3451;
var accountKey = 'sdjfnksnlk2bk1k34kb';
var config = { debug: false };

QB.initWithAppId(appId, accountKey, config);
```

Then using your backend you can authorize a user in the QuickBlox system, send back the user session token, and set it to the QuickBlox SDK using `startSessionWithToken(sessionToken, callBack)` method. You can find out more about this in the [Set existing session](/sdks/js-authentication#set-existing-session) section.

## Initialize with existing token

<Warning>
  If you have version lower than 2.14.1, you have to use only the code below. The section [Initialize QuickBlox SDK without Authorization Key and Secret](/sdks/js-setup#install-quickblox-sdk-into-your-app) describe how to implement this for version greater than 2.14.1
</Warning>

You can initialize the SDK with an existing QuickBlox token. It can be interesting in cases when you build a big system and you have the server side which generates QuickBlox tokens.

```JavaScript JavaScript theme={null}
var sessionToken = '1b785b603a9ae88d9dfbd1fc0cca0335086927f1';
var appId = 3451;
var accountKey = 'sdjfnksnlk2bk1k34kb';
var config = { debug: false };

QB.init(sessionToken, appId, null, accountKey, config);
```

## Point SDK to enterprise server

To point QuickBlox SDK to the QuickBlox enterprise server, you should set API and chat endpoints in the `CONFIG` object and pass it to the `init()` method.

```JavaScript JavaScript theme={null}
var APPLICATION_ID = 41;
var AUTH_KEY = "lkjdueksu7392kj";
var AUTH_SECRET = "iiohfdija792hj";
var ACCOUNT_KEY = "sdjfnksnlk2bk1k34kb";
var CONFIG = {
  endpoints: {
    api: "apicustomdomain.quickblox.com", // set custom API endpoint
    chat: "chatcustomdomain.quickblox.com", // set custom Chat endpoint
  },
  chatProtocol: {
    active: 2, // set 1 to use BOSH, set 2 to use WebSockets (default)
  },
//   * set { mode: 1 } or true to output to console,
//   * set { mode: 2, file: 'log.txt' } to output to file,
//   * set "false" to not output

  debug: { mode: 1 },
};
QB.init(APPLICATION_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY, CONFIG);
```

Set the `endpoints` field of the `CONFIG` object:

| Field | Description   |
| ----- | ------------- |
| api   | API endpoint. |
| chat  | Chat endpoint |

<Note>
  [Contact our sales team](https://quickblox.com/enterprise/) to get **API endpoint** and **chat endpoint**.
</Note>

## Enable logging

Logging functionality allows you to keep track of all events and activities while running your app. As a result, you can monitor the operation of the SDK and improve the debug efficiency.

Set the debug mode in the `CONFIG` object and then call the `init()` method.

```JavaScript JavaScript theme={null}
var APPLICATION_ID = 41;
var AUTH_KEY = "lkjdueksu7392kj";
var AUTH_SECRET = "iiohfdija792hj";
var ACCOUNT_KEY = "sdjfnksnlk2bk1k34kb";
var CONFIG = {
  // other settings
  // * set { mode: 1 } or true to output to console,
  // * set { mode: 2, file: 'log.txt' } to output to file,
  // * set "false" to not output
   
  debug: { mode: 1 }
};
QB.init(APPLICATION_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY, CONFIG);
```

There are 3 debug modes:

| Debug modes | Description                                                                                                              |
| ----------- | ------------------------------------------------------------------------------------------------------------------------ |
| 0           | Turns off logging output.                                                                                                |
| 1           | Enables logging to the browser console with **console.log()** function (**default** value).                              |
| 2           | Enables logging to a file. Set the file in the file field. Works **only** on Node.js, in case of server implementations. |

## Message carbons

Message carbons functionality allows for multi-device support. Thus, all user messages get copied to all their devices so they could keep up with the current state of the conversation. For example, a User A has phone running conversations and desktop running conversations. User B has desktop running conversations. When User B sends a message to User A, the message shows on both the desktop and phone of User A.

<Note>
  Message carbons are always enabled.
</Note>

## Stream management

Stream management has two important features **Stanza Acknowledgements** and **Stream Resumption**:

* **Stanza Acknowledgements** is the ability to know if a stanza or series of stanzas has been received by one's peer. In other words, a reply is requested on every sent message. If the reply is received, the message is considered as delivered.
* **Stream Resumption** is the ability to quickly resume a stream that has been terminated. Once a connection is re-established, Stream Resumption is executed. By matching the sequence numbers assigned to each Stanza Acknowledgement a server and client can verify which messages are missing and request to resend missing messages.

```JavaScript JavaScript theme={null}
var CONFIG = {
  streamManagement: {
    enable: true
  }
};
```

<Note>
  **By default**, stream management functionality is disabled. Make sure to enable it using the `CONFIG` parameter when calling `init()` method. Review [Initialize QuickBlox SDK](#section-initialize-quick-blox-sdk) section for more details.
</Note>

## Custom ICE servers

You can customize a list of ICE servers. **By default**, WebRTC module will use internal ICE servers that are usually enough, but you can always set your own. WebRTC engine will choose the TURN relay with the lowest round-trip time. Thus, setting multiple TURN servers allows your application to scale-up in terms of bandwidth and number of users.

```JavaScript JavaScript theme={null}
var CONFIG = {
  webrtc: {
    iceServers: [
      {
        urls: "stun:stun.randomserver.example",
        username: "stun_login",
        credential: "stun_password"
      },
      {
        urls: "turn:turn.randomserver.example",
        username: "turn_login",
        credential: "turn_password"
      }
    ]
  }
};
```