> ## 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.

# Quick Start

> Learn how to install QuickBlox SDK and send your first message.

QuickBlox SDK helps you implement real-time chat, video chat, and push notifications to your app. You can fully concentrate on your mobile app development.

QuickBlox JavaScript SDK can be used for web development solely or with all popular libraries like **ReactJS**, **Angular**, etc, for chatbots development on **Node.js** and mobile development on **Cordova**.

## Start with sample apps

If you are just starting your app and developing it from scratch, we recommend to use our sample apps. We use GitHub repositories to make it easy to explore, copy, and modify our code samples. The guide on how to launch and configure the sample app is on GitHub.

### Chat samples

Choose the code sample below to jump-start the development.

<CardGroup>
  <Card title="JavaScript Chat Sample App" icon="js">
    <a className="inline-link" href="https://sample.quickblox.com/chat/#!/login">
      <Icon icon="arrow-up-right-from-square" /> Live Demo
    </a>

    <br />

    <a className="inline-link" href="https://github.com/QuickBlox/quickblox-javascript-sdk/tree/gh-pages/samples/chat">
      <Icon icon="github" /> View on GitHub
    </a>

    <br />

    <a className="inline-link" href="/sdks/js-chat">
      <Icon icon="book" />  Documentation
    </a>
  </Card>

  <Card title="Angular Chat Sample App" icon="angular">
    <a className="inline-link" href="https://github.com/QuickBlox/quickblox-javascript-sdk/tree/gh-pages/samples/angular-chat">
      <Icon icon="github" /> View on GitHub
    </a>

    <br />

    <a className="inline-link" href="/sdks/js-chat">
      <Icon icon="book" />  Documentation
    </a>
  </Card>
</CardGroup>

### Video Chat Samples

Choose the code sample below to jump-start the development.

<CardGroup>
  <Card title="JavaScript Video Calling Sample App" icon="js">
    <a className="inline-link" href="https://sample.quickblox.com/webrtc/#join">
      <Icon icon="arrow-up-right-from-square" /> Live Demo
    </a>

    <br />

    <a className="inline-link" href="https://github.com/QuickBlox/quickblox-javascript-sdk/tree/gh-pages/samples/webrtc">
      <Icon icon="github" /> View on GitHub
    </a>

    <br />

    <a className="inline-link" href="/sdks/js-video-calling">
      <Icon icon="book" />  Documentation
    </a>
  </Card>
</CardGroup>

### More samples

For more samples, head to our [Code Samples](/code-samples/code-samples) page. These sample apps are available on GitHub so feel free to browse them there. Just clone the repository and modify the source code for your own projects.

## 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 clicking **New app** button.
3. Configure the app. Type in the information about your organization into corresponding fields and click **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/quickblox.min');

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

### Yarn integration

Install the SDK through Yarn by running the following command:

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

## Send your first message

### Initialize QuickBlox SDK

Initialize the SDK with application credentials. Call the `init()` method and pass the `APPLICATION_ID`, `AUTH_KEY`, `AUTH_SECRET`, and `ACCOUNT_KEY` as arguments to it.

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

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

<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 and initialize QuickBlox SDK with applicationId and acountKey only. More details you can find in [Initialize QuickBlox SDK without Authorization Key and Secret](/sdks/js-setup#install-quickblox-sdk-into-your-app) section.
</Warning>

### Authorize user

Now, it is time to log in with the user. To get it done, set the login and password in the `params` variable. Call the `createSession()` method and pass the `params` as an argument to it using the code snippet below

```JavaScript JavaScript theme={null}
var params = { login: "garry", password: "garry5santos" };
QB.createSession(params, function(error, result) {
  // callback function
});
```

### Connect to chat

Having authorized a user, you can proceed with connecting to the chat server to start using Chat module functionality. Set the `userId` and `password` fields in the `userCredentials`. Call the `connect()` method and pass the `userCredentials` as an argument to it.

```JavaScript JavaScript theme={null}
var userCredentials = {
  userId: 12345,
  password: "garry5santos"
};

QB.chat.connect(userCredentials, function(error, contactList) {

});
```

### Create dialog

QuickBlox provides three types of dialogs: **1-1 dialog**, **group dialog**, and **public dialog**. Learn more about dialogs [here](/sdks/js-chat-dialogs#create-dialog).

Let’s create a **1-1 dialog**. Set the `type` and `occupants_ids` properties of the `params` variable. Call the `create()` method and pass the `params` as an argument.

```JavaScript JavaScript theme={null}
var params = {
  type: 3,
  occupants_ids: [56]
};

QB.chat.dialog.create(params, function(error, dialog) {

});
```

### Subscribe to receive messages

Through the `QB.chat.onMessageListener` you can monitor whether an incoming message is received from the QuickBlox server. Use the `QB.chat.onMessageListener` to listen to all incoming messages.

```JavaScript JavaScript theme={null}
function onMessage(userId, message) {

};

QB.chat.onMessageListener = onMessage;
```

### Send message

To send a message, create a `message` variable and set the `type`, `body`, and `extension` properties. Create `opponentId` variable and set the ID of the user we are going to send a message to. Call the `send()` method and pass the created `message` and `opponentId` as arguments to it.

```JavaScript JavaScript theme={null}
var dialog = "...";

var message = {
  type: "chat",
  body: "How are you today?",
  extension: {
    save_to_history: 1,
    dialog_id: dialog._id
  },
  markable: 1
};

var opponentId = 78;
message.id = QB.chat.send(opponentId, message);

// ...
```

<Note>
  Set the `save_to_history` parameter if you want this message to be saved in chat history.
</Note>