@cometchat-pro/angular-ui-kit

CometChat Angular UI Kit

CometChat Angular UI Kit is a collection of custom UI Components designed to build text chat and voice/video calling features in your application.

The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly.

---

Features

• Private(1-1) & Group Conversations
• Voice & video calling & conferencing
• Typing Indicators
• Text, Media and Custom messages
• Read receipts
• Online Presence Indicators
• Message History
• Users & Friends List
• Search by users and groups
• Groups List
• Conversations List

Extensions

Thumbnail Generation | Link Preview | Smart Replies | Polls | Reactions | Stickers

Prerequisites

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

• A text editor, to write code in. This could be a text editor (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)

• Node

• npm

• Angular CLI npm install -g @angular/cli

---

Installing Angular UI Kit

1. Setup

i. Register on CometChat 🔧

To install Angular UI Kit, you need to first register on CometChat Dashboard. Click here to sign up

ii. Get your Application Keys :key:

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

2. Configure CometChat inside your app

i. Import CometChat SDK

import { CometChat } from "@cometchat-pro/chat";

ii. Initialize CometChat 🌟

The init() method initializes the settings required for CometChat. We suggest calling the init() method on app startup, preferably in the main.ts, wrapping the platformBrowserDynamic().bootstrapModule(AppModule) as shown below.

const appID = "APP_ID";
const region = "REGION";
const authKey = "AUTH_KEY"
const uiKitSettings = new UIKitSettingsBuilder()
  .setAppId(appID)
  .setRegion(region)
  .setAuthKey(CauthKey)
  .subscribePresenceForFriends()
  .build();
CometChatUIKit.init(uiKitSettings)?.then(()=>{
    platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

})

Note:

• Replace APP_ID , REGION and AUTH_KEY with your CometChat App ID , Region and Auth Key in the above code.
  

3. Add UI Kit to your project

• Install UIKit package from npm - npm install @cometchat-pro/angular-ui-kit

• Import the Components in the respective module where the component will be used.

4. Launch Cometchat

Using the CometChatConversationsWithMessages component from the UI Kit, you can launch a fully functional chat application. In this component Chats and Messages are interlinked and work together to launch a fully functional chat on your website/application.

Import the CometChat in the required module

import { CometChatConversationsWithMessages } from '@cometchat-pro/angular-ui-kit'

    <cometchat-conversations-with-messages>

    </cometchat-conversations-with-messages>

---

Checkout our sample app

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

---

Troubleshooting

• To read the full documentation on UI Kit integration visit our Documentation.

• Facing any issues while integrating or installing the UI Kit please connect with us via real time support present in CometChat Dashboard.

---

Contributors

Thanks to the following people who have contributed to this project:

👨‍💻 @priyadarshininadar
👨‍💻 @ajaygajra

Contact :mailbox:

Contact us via real time support present in CometChat Dashboard.

---

License

This project uses the following license.