> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-flag-and-channel.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

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/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 favorite code editor and follow the steps mentioned in the `README.md` file.

[React Sample App](https://github.com/cometchat-pro/javascript-react-chat-app)

[Angular Sample App](https://github.com/cometchat-pro/javascript-angular-chat-app)

[Vue Sample App](https://github.com/cometchat-pro/javascript-vue-chat-app)

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

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
      npm install @cometchat/chat-sdk-javascript
    ```
  </Tab>
</Tabs>

Then, import the `CometChat` object wherever you want to use CometChat.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
      import { CometChat } from "@cometchat/chat-sdk-javascript";
    ```
  </Tab>
</Tabs>

### HTML (via CDN)

Include the CometChat JavaScript library in your HTML code

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <script
      type="text/javascript"
      src="https://unpkg.com/@cometchat/chat-sdk-javascript/CometChat.js"
    ></script>
    ```
  </Tab>
</Tabs>

### Server Side Rendering (SSR) Compatibility

You can use CometChat with SSR frameworks such as [Next.js](https://nextjs.org/) or [NuxtJS](https://nuxtjs.org/) by importing it dynamically on the client side.

#### Next.js

You need to import the CometChat SDK dynamically in the `useEffect` React Hook or `componentDidMount()` lifecycle method.

<Tabs>
  <Tab title="Home.js(Functional)">
    ```javascript theme={null}
    import React from "react";
    import Chat from "./Chat";

    export default function Home() {
      let [libraryImported, setLibraryImported] = React.useState(false);

      React.useEffect(() => {
        window.CometChat = require("@cometchat/chat-sdk-javascript").CometChat;
        setLibraryImported(true);
      });

      return libraryImported ? <Chat /> : <p>Loading....</p>;
    }
    ```
  </Tab>

  <Tab title="Home.js(Class Component)">
    ```javascript theme={null}
    import React from 'react';
    import Chat from './Chat';

    export default class Home extends React.Component  {

    constructor(props) {
      super(props);
      this.state = {
        libraryImported: false
      };
    }

    componentDidMount(){
      CometChat = require("@cometchat/chat-sdk-javascript").CometChat;
      this.setState({libraryImported: true});
    }

    return(
      this.state.libraryImported ? <Chat/> : <p>Loading....</p>
    )

    }
    ```
  </Tab>

  <Tab title="Chat.js">
    ```javascript theme={null}
    import React, { Component } from "react";

    import { COMETCHAT_CONSTANTS } from "./CONSTS";

    export default class Chat extends Component {
      constructor(props) {
        super(props);
        this.state = {
          user: undefined,
        };
      }

      componentDidMount() {
        this.init();
      }

      init() {
        CometChat.init(
          COMETCHAT_CONSTANTS.APP_ID,
          new CometChat.AppSettingsBuilder()
            .setRegion(COMETCHAT_CONSTANTS.REGION)
            .subscribePresenceForAllUsers()
            .build()
        ).then(
          () => {
            this.login();
          },
          (error) => {
            console.log("Init failed with exception:", error);
          }
        );
      }

      login() {
        let UID = "UID";
        CometChat.login(UID, COMETCHAT_CONSTANTS.AUTH_KEY).then(
          (user) => {
            this.setState({ user });
          },
          (error) => {
            console.log("Login failed with exception:", error);
          }
        );
      }

      render() {
        return this.state.user ? (
          <div>User logged in</div>
        ) : (
          <div>User not logged in</div>
        );
      }
    }
    ```
  </Tab>

  <Tab title="const.js">
    ```javascript theme={null}
    export const COMETCHAT_CONSTANTS = {
      APP_ID: "APP_ID",
      REGION: "REGION",
      AUTH_KEY: "AUTH_KEY",
    };
    ```
  </Tab>
</Tabs>

#### NuxtJS

You need to import the CometChat SDK dynamically in the `mounted` lifecycle hook.

<Tabs>
  <Tab title="index.vue">
    ```javascript theme={null}
    <template>
        <div v-if="libraryImported">
          <chat/>
        </div>
        <div v-else>Loading....</div>
    </template>

    <script>
    export default {
        name: "Index",
        components: {
            'chat': () => import('./chat')
        },
        data() {
          return{
            libraryImported: false
          }
        },
        mounted() {
          window.CometChat = require('@cometchat/chat-sdk-javascript').CometChat;
          this.libraryImported = true;
        }
    }
    </script>
    ```
  </Tab>

  <Tab title="chat.vue">
    ```javascript theme={null}
    <template>
        <div v-if="user"> User logged in </div>
        <div v-else> User not logged in </div>
    </template>

    <script>
    import CONSTS from './CONSTS';

    export default {
        name: "chat",
        data() {
            return{
                user: null
            }
        },
        mounted() {
            CometChat.init(CONSTS.APP_ID, new CometChat.AppSettingsBuilder().setRegion(CONSTS.REGION).subscribePresenceForAllUsers().build()).then(
                () => {
                    let UID = "UID";
                    CometChat.login(UID, CONSTS.AUTH_KEY).then(
                        user => {
                            this.user =  user;
                        }, error => {
                            console.log("Login failed with exception:", error);
                        }
                    );
                }, error => {
                    console.log("error in init", error);
                }
            );
        }
    }
    </script>
    ```
  </Tab>

  <Tab title="CONST.js">
    ```javascript theme={null}
    module.exports = {
      APP_ID: "APP_ID",
      REGION: "REGION",
      AUTH_KEY: "AUTH_KEY",
    };
    ```
  </Tab>
</Tabs>

## Initialize CometChat

The `init()` method initializes 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 the following settings:

* **Region**: The region where your app was created.
* [Presence Subscription](/sdk/javascript/user-presence): Represents the subscription type for user presence (real-time online/offline status)
* **autoEstablishSocketConnection(boolean value)**: This property takes a boolean value which when set to `true` informs the SDK to manage the web-socket connection internally. If set to `false`, it informs the SDK that the web-socket connection will be managed manually. The default value for this parameter is true. For more information on this, please check the [Managing Web-Socket connections manually](/sdk/javascript/managing-web-sockets-connections-manually) section. The default value for this property is **true.**
* **overrideAdminHost(adminHost: string)**: This method takes the admin URL as input and uses this admin URL instead of the default admin URL. This can be used in case of dedicated deployment of CometChat.
* **overrideClientHost(clientHost: string)**: This method takes the client URL as input and uses this client URL instead of the default client URL. This can be used in case of dedicated deployment of CometChat.
* **setStorageMode(storageMode)**: This method allows you to configure how CometChat stores data locally. The storageMode parameter can be set to `CometChat.StorageMode.SESSION` to use session storage, which persists data only for the current browser session, or other available storage modes for different persistence behaviors.

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.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    let appID = "APP_ID";
    let region = "APP_REGION";
    let appSetting = new CometChat.AppSettingsBuilder()
      .subscribePresenceForAllUsers()
      .setRegion(region)
      .autoEstablishSocketConnection(true)
      .setStorageMode(CometChat.StorageMode.SESSION)
      .build();
    CometChat.init(appID, appSetting).then(
      () => {
        console.log("Initialization completed successfully");
      },
      (error) => {
        console.log("Initialization failed with error:", error);
      }
    );
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let appID: string = "APP_ID",
        region: string = "APP_REGION",
        appSetting: CometChat.AppSettings = new CometChat.AppSettingsBuilder()
          .subscribePresenceForAllUsers()
          .setRegion(region)
          .autoEstablishSocketConnection(true)
          .setStorageMode(CometChat.StorageMode.SESSION)
          .build();
    CometChat.init(appID, appSetting).then(
      (initialized: boolean) => {
        console.log("Initialization completed successfully", initialized);
      }, (error: CometChat.CometChatException) => {
        console.log("Initialization failed with error:", error);
      }
    );
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="JavaScript">
    ```js 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);
      }
    );
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let authKey: string = "AUTH_KEY",
      UID: string = "user1",
      name: string = "Kevin";

    var user = new CometChat.User(UID);

    user.setName(name);

    CometChat.createUser(user, authKey).then(
      (user: CometChat.User) => {
        console.log("user created", user);
      },
      (error: CometChat.CometChatException) => {
        console.log("error", error);
      }
    );
    ```
  </Tab>
</Tabs>

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.

<Note>
  This straightforward authentication method is ideal for proof-of-concept (POC) development or during the early stages of application development. For production environments, however, we strongly recommend using an [Auth Token](/sdk/javascript/authentication-overview#login-using-auth-token) instead of an Auth Key to ensure enhanced security.
</Note>

<Tabs>
  <Tab title="JavaScript">
    ```js 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 });
      }
    );
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    var UID: string = "cometchat-uid-1",
      authKey: string = "AUTH_KEY";

    CometChat.getLoggedinUser().then(
      (user: CometChat.User) => {
        if (!user) {
          CometChat.login(UID, authKey).then(
            (user: CometChat.User) => {
              console.log("Login Successful:", { user });
            },
            (error: CometChat.CometChatException) => {
              console.log("Login failed with exception:", { error });
            }
          );
        }
      },
      (error: CometChat.CometChatException) => {
        console.log("Some Error Occured", { error });
      }
    );
    ```
  </Tab>
</Tabs>

Make sure you replace the `AUTH_KEY` with your CometChat **AuthKey** in the above code.

<Note>
  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`.
</Note>

The `login()` method returns the `User` object on `Promise` resolved containing all the information of the logged-in user.

<Warning>
  UID can be alphanumeric with an underscore and hyphen. Spaces, punctuation and other special characters are not allowed.
</Warning>

## Integrate our UI Kits

* Please refer to the section to integrate [React UI Kit](/ui-kit/react/overview) into your website.
* Please refer to the section to integrate [Angular UI Kit](/ui-kit/angular/overview) into your website.
* Please refer to the section to integrate [Vue UI Kit](/ui-kit/vue/overview) into your website.

## Integrate our Chat Widget

* Please refer to the section to integrate [Chat Widget](/widget/html-bootstrap-jquery) into your Website.