@connectycube/chat-widget-angular/README.md

A customizable Angular chat widget built on the ConnectyCube platform, enabling real-time messaging, calls, and user engagement in any web app.

# ConnectyCube Chat Widget for Angular

An Angular component that seamlessly integrates ConnectyCube's real-time chat capabilities into your web applications. This widget offers an out-of-the-box solution for embedding chat features—such as instant messaging, user presence, and file sharing—without the overhead of building a complete chat system from scratch.

## Overview

The ConnectyCube Web Chat Widget for Angular is designed to simplify the process of adding chat functionality to your React apps. With a few configuration steps and minimal code, you can quickly enable robust, real-time communication powered by ConnectyCube. Key benefits include:

- **Easy Integration:** Plug the widget into your existing Angular projects.
- **Customizable Interface:** Adjust the look and feel to match your brand.
- **Real-Time Messaging:** Leverage ConnectyCube's reliable backend for instant communication.
- **Responsive Design:** Works seamlessly on both desktop and mobile devices.
- **Modular and Extensible:** Adapt the widget to your unique requirements.

## Demo

- Angular: <https://connectycube-chat-widget-angular.onrender.com>

Split-view chat widget:

<kbd><img alt="ConnectyCube chat widget, split view image demo" src="https://developers.connectycube.com/images/chat_widget/chat-widget-1.png" width="400" /></kbd>

Single-view chat widget:

<kbd><img alt="ConnectyCube chat widget, single view image demo" src="https://developers.connectycube.com/images/chat_widget/chat-widget-2.png" width="400" /></kbd>

## Documentation

<https://developers.connectycube.com/js/chat-widget>

## Installation

```bash
# npm
npm install @connectycube/chat-widget-angular

# yarn
yarn add @connectycube/chat-widget-angular
```

As this component uses wrapped `@connectycube/chat-widget` install types for React and ReactDom as devDependencies:

```bash
# npm
npm install --save-dev @types/react @types/react-dom

# yarn
yarn add --dev @types/react @types/react-dom
```

## Usage

### Before you start

Before you start, make sure:

1. You have access to your ConnectyCube account. If you don’t have an account, [sign up here](https://admin.connectycube.com/register).
2. An app created in ConnectyCube dashboard. Once logged into [your ConnectyCube account](https://admin.connectycube.com/), create a new application and make a note of the app credentials (**App ID** and **Authorization Key**) that you’ll need for authentication.

### Display widget

Import and connect the ConnectyCubeChatWidgetComponent component to your app (e.g. in `app.ts`):

```js
import { RouterOutlet } from '@angular/router';
import { ConnectyCubeChatWidgetComponent } from '@connectycube/chat-widget-angular';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, ConnectyCubeChatWidgetComponent],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  ...
  protected readonly props = {
    appId: 111,
    authKey: '11111111-2222-3333-4444-55555555',
    config: { debug: { mode: 1 } },
    userId: '112233', // a User Id from your system
    userName: 'Samuel', // how other users will see your user name
    showOnlineUsersTab: false,
    splitView: true,
    hideWidgetButton: false,
    onOpenChange: (open) => {
      console.log('Chat widget is open:', open);
    },
    onUnreadCountChange: (count) => {
      console.log('Unread messages count:', count);
    },
  };
}
```

Place the component in `app.html`:

```html
<div id="app">
  ...
  <connectycube-chat-widget [props]="props" />
</div>
...
```

See chat widget code samples <https://github.com/ConnectyCube/connectycube-chat-widget-samples/tree/main/angular> as a reference for faster integration.

## Props

See all available props <https://developers.connectycube.com/js/chat-widget/#props>

## Recipes

See all available recipes <https://developers.connectycube.com/js/chat-widget/#recipes>

## Have an issue?

Join our [Discord](https://discord.com/invite/zqbBWNCCFJ) community to get real-time help from our team

## Community

- [Blog](https://connectycube.com/blog)
- X (twitter)[@ConnectyCube](https://x.com/ConnectyCube)
- [Facebook](https://www.facebook.com/ConnectyCube)
- [Medium](https://medium.com/@connectycube)
- [YouTube](https://www.youtube.com/@ConnectyCube)

**Want to support our team**:<br>
<a href="https://www.buymeacoffee.com/connectycube" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

## Changelog

<https://github.com/ConnectyCube/connectycube-chat-widget-samples/blob/main/CHANGELOG.md>