The UI Kit library is built keeping the developers in mind and aims to considerably reduce the development efforts required to add the chat feature in your website/application.

The UI Kit provides options to seamlessly add chat to your application using the customizable UI components

Installation Steps

Prerequisites

Before you begin, ensure you have met the following requirements:

1. A text editor. (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)

2. Node

3. npm

4. Angular CLI

npm install -g @angular/cli

Installing Angular Chat UI Kit

Setup 🔧

• To install the Angular UI Kit, you need to first register on the CometChat Dashboard. Click here to sign up (https://app.cometchat.com)

1. Get Your Application Keys 🔑

• Create a new app
• Head over to the QuickStart or API & Auth Keys section and note the App ID, Auth Key, and Region.

2. Add the CometChat Dependency

npm install @cometchat-pro/[email protected] --save

Configure CometChat inside your app

1. Initialize CometChat 🌟
   The init() method initializes the settings required for CometChat. We suggest calling the init() method on app startup, preferably in the onCreate() method of the Application class

const appID = "APP_ID";
const region = "REGION";
const appSetting = new CometChat.AppSettingsBuilder()
  .subscribePresenceForAllUsers()
  .setRegion(region)
  .build();
CometChat.init(appID, appSetting).then(
  () => {
    console.log("Initialization completed successfully");
    // You can now call login function.
  },
  (error) => {
    console.log("Initialization failed with error:", error);
    // Check the reason for error and take appropriate action.
  }
);

🚧

Note

Replace APP_ID and REGION with your CometChat App ID and Region in the above code

2. Login your user 👤
   This method takes UID and Auth Key as input parameters and returns the User object containing all the information of the logged-in user

const authKey = "AUTH_KEY";
const uid = "SUPERHERO1";

CometChat.login(uid, authKey).then(
  (user) => {
    console.log("Login Successful:", { user });
  },
  (error) => {
    console.log("Login failed with exception:", { error });
  }
);

📘

Note

• Replace AUTH_KEY with your CometChat Auth Key in the above code
• We have set up 5 users for testing having UIDs: SUPERHERO1, SUPERHERO2, SUPERHERO3, SUPERHERO4, and SUPERHERO5.

Add UI Kit to your project

1. Clone the repository
2. Copy the angular-chat-ui-kit folder from dist\ folder to your node_modules
   Install @ctrl/ngx-emoji-mart according to the angular version of your project @ctrl/ngx-emoji-mart

3.Add these styles to your angular.json

"styles": [
  "node_modules/@ctrl/ngx-emoji-mart/picker.css",
  "node_modules/angular-chat-ui-kit/css/styles.scss"
]

4.Wrap all the selectors in a div with class=responsive as shown in the next step

Launch CometChat

CometChatUI is an option to launch a fully functional chat application using the UI Kit. In UI Kit all the UI Components are interlinked and work together to launch a fully functional chat on your website/application.

Import the CometChatUI in your project file

import { CometChatUI } from "angular-chat-ui-kit";

#Use this selector in your html file

<div class="responsive">
  <CometChatUI></CometChatUI>
</div>

Checkout our sample app

Visit our Angular sample app repo to run the Angular sample app.