@connectycube/chat-widget-angular

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 Angular 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:

Single-view chat widget:

Documentation

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

Installation

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

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

• You have access to your ConnectyCube account. If you don’t have an account, sign up here.
• An app created in ConnectyCube dashboard. Once logged into your ConnectyCube account, 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):

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:

<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 community to get real-time help from our team

Community

• Blog
• X (twitter)@ConnectyCube
• Facebook
• Medium
• YouTube

Want to support our team:

Changelog

CHANGELOG.md in the main repository.