> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Overview
> Overview of Overview in CometChat.
This guide demonstrates how to add chat to a JavaScript application using CometChat. Before you begin, we strongly recommend you read the [Key Concepts](/sdk/javascript/2.0/key-concepts) guide.
#### I want to integrate with my app
1. [Get your application keys](overview#get-your-application-keys)
2. [Add the CometChat dependency](overview#add-the-cometchat-dependency)
3. [Initialize CometChat](overview#initialize-cometchat)
4. [Register and Login your user](overview#register-and-login-your-user)
5. [Integrate our UI Kits](overview#integrate-our-ui-kits)
6. [Integrate our Chat Widget](overview#integrate-our-chat-widget)
#### I want to explore a sample app (includes UI)
Open the app folder in your favourite code editor and follow the steps mentioned in the `README.md` file.
[React Sample App](https://github.com/cometchat/cometchat-chat-sample-app-react/tree/v2)
[Angular Sample App](https://github.com/cometchat/cometchat-chat-sample-app-angular/tree/v2)
[Vue Sample App](https://github.com/cometchat/cometchat-chat-sample-app-vue/tree/v2)
### Get your Application Keys
[Signup for CometChat](https://app.cometchat.com) and then:
1. Create a new app
2. Head over to the **API & Auth Keys** section and note the **Auth Key**, **App ID** & **Region**
## Add the CometChat Dependency
### NPM
```bash theme={null}
npm install @cometchat-pro/chat@2.4.1 --save
```
Then, import the `CometChat` object wherever you want to use CometChat.
```javascript theme={null}
import { CometChat } from "@cometchat-pro/chat";
```
### HTML (via CDN)
Include the CometChat JavaScript library in your HTML code
```html theme={null}
```
## Initialize CometChat
The `init()` method initialises the settings required for CometChat. The `init()` method takes the below parameters:
1. appID - Your CometChat App ID
2. appSettings - An object of the AppSettings class can be created using the AppSettingsBuilder class. The region field is mandatory and can be set using the `setRegion()` method.
The `AppSettings` class allows you to configure two settings:
* **Region**: The region where you app was created.
* [Presence Subscription](/sdk/javascript/2.0/user-presence)
You need to call `init()` before calling any other method from CometChat. We suggest you call the `init()` method on app startup, preferably in the `index.js` file.
```javascript theme={null}
let appID = "APP_ID";
let region = "APP_REGION";
let appSetting = new CometChat.AppSettingsBuilder()
.subscribePresenceForAllUsers()
.setRegion(region)
.build();
CometChat.init(appID, appSetting).then(
() => {
console.log("Initialization completed successfully");
}, error => {
console.log("Initialization failed with error:", error);
}
);
```
Make sure you replace the `APP_ID` with your CometChat **App ID** and `APP_REGION` with your **App Region** in the above code.
## Register and Login your user
Once initialization is successful, you will need to create a user. To create users on the fly, you can use the `createUser()` method. This method takes a `User` object and the `Auth Key` as input parameters and returns the created `User` object if the request is successful.
```javascript theme={null}
let authKey = "AUTH_KEY";
var UID = "user1";
var name = "Kevin";
var user = new CometChat.User(UID);
user.setName(name);
CometChat.createUser(user, authKey).then(
user => {
console.log("user created", user);
},error => {
console.log("error", error);
}
)
```
Make sure that `UID` and `name` are specified as these are mandatory fields to create a user.
Once you have created the user successfully, you will need to log the user into CometChat using the `login()` method.
We recommend you call the CometChat `login()` method once your user logs into your app. The `login()` method needs to be called only once.
```javascript theme={null}
var UID = "cometchat-uid-1";
var authKey = "AUTH_KEY";
CometChat.getLoggedinUser().then(
(user) => {
if(!user){
CometChat.login(UID, authKey).then(
user => {
console.log("Login Successful:", { user });
}, error => {
console.log("Login failed with exception:", { error });
}
);
}
}, error => {
console.log("Some Error Occured", { error });
}
);
```
Make sure you replace the `AUTH_KEY` with your CometChat **AuthKey** in the above code.
Sample Users
We have set-up 5 users for testing having UIDs: `cometchat-uid-1`, `cometchat-uid-2`, `cometchat-uid-3`, `cometchat-uid-4` and `cometchat-uid-5`.
The `login()` method returns the `User` object on `Promise` resolved containing all the information of the logged in user.
UID can be alphanumeric with underscore and hyphen. Spaces, punctuation and other special characters are not allowed.
## Integrate our UI Kits
* Please refer to the [React UI Kit](/ui-kit/react/v2/overview) section to integrate React UI Kit in your website.
* Please refer to the [Angular UI Kit](/ui-kit/angular/2.0/overview) section to integrate Angular UI Kit in your website.
* Please refer to the [Vue UI Kit](/ui-kit/vue/2.0/overview) section to integrate Vue UI Kit in your website.
## Integrate our Chat Widget
* Please refer to the [Chat Widget](/widget/html-bootstrap-jquery) section to integrate Chat Widget in your Website.