> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.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 Cordova/ionic application using CometChat. Before you begin, we strongly recommend you read the [Key Concepts](/sdk/ionic/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)

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

[](https://github.com/cometchat/cordova-ionic-chat-app)

[Cordova Ionic Sample App](https://github.com/cometchat/cordova-ionic-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

Install the package as NPM module:

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    npm install @cometchat-pro/cordova-ionic-chat@2.4.1
    ```
  </Tab>
</Tabs>

<Note>
  v2.4+ onwards, Voice & Video Calling functionality has been moved to a separate library. In case you plan to use the calling feature, please install the Calling dependency (@cometchat-pro/ionic-calls).

  `npm install @cometchat-pro/ionic-calls@2.1.2--save`

  The calling component requires some configuration. Please follow the steps mentioned [here](/sdk/ionic/2.0/overview#calling-component-configuration).
</Note>

<Warning>
  The Calling Component (@cometchat-pro/ionic-calls) is a capacitor plugin so it won't work in a Cordova project.
</Warning>

## Calling Component Configuration

**Android**

Goto `./android` folder and open **project-level** build Gradle file and add all repository URLs in the `repositories` block under the `allprojects` section.\*\* \*\*

<Tabs>
  <Tab title="build.gradle">
    ```gradle theme={null}
    allprojects {
     repositories {
       maven {
          url "https://dl.cloudsmith.io/public/cometchat/cometchat-pro-android/maven/"
        }
      }
    }
    ```
  </Tab>
</Tabs>

You also need to update the minimum SDK version to `24`. You can update the minSDKVersion in the `variables.gradle` file located in the `android` folder.

<Tabs>
  <Tab title="build.gradle">
    ```gradle theme={null}
    minSdkVersion = 24;
    ```
  </Tab>
</Tabs>

In the Main activity you need to map Capacitor class add(Calling.class);

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    package io.ionic.starter;

    import android.os.Bundle;

    import com.cometchat.calling.Calling; //Add this line

    import com.getcapacitor.BridgeActivity;
    import com.getcapacitor.Plugin;

    import java.util.ArrayList;

    public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
        add(Calling.class);
      }});
     }
    }
    ```
  </Tab>
</Tabs>

**iOS**:

Please update the minimum target version in the Podfile. Goto ./ios folder and open the Podfile. In the Podfile update the platform version to `11.0`.

<Tabs>
  <Tab title="Podfile">
    ```
    platform :ios, '11.0'
    ```
  </Tab>
</Tabs>

Open the `ios/App` folder and run `pod install` this will create an `App.xcworkspace` open this and run the app.

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

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    var appID = "APP_ID";
    var region = "REGION";
    var 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);
      }
    );
    ```
  </Tab>
</Tabs>

Make sure you replace the `APP_ID` with your CometChat **App ID** and `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>
</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.

<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>
</Tabs>

Make sure you replace the `AUTH_KEY` with your CometChat **Auth Key** 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 containing all the information of the logged-in user.

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