@connectycube/chat-widget-angular 0.36.0 → 0.36.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +132 -0
  2. package/dist/README.md +132 -0
  3. package/dist/react18/README.md +132 -0
  4. package/package.json +3 -3
package/README.md ADDED
@@ -0,0 +1,132 @@
1
+ # ConnectyCube Chat Widget for Angular
2
+
3
+ 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.
4
+
5
+ ## Overview
6
+
7
+ 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:
8
+
9
+ - **Easy Integration:** Plug the widget into your existing Angular projects.
10
+ - **Customizable Interface:** Adjust the look and feel to match your brand.
11
+ - **Real-Time Messaging:** Leverage ConnectyCube's reliable backend for instant communication.
12
+ - **Responsive Design:** Works seamlessly on both desktop and mobile devices.
13
+ - **Modular and Extensible:** Adapt the widget to your unique requirements.
14
+
15
+ ## Demo
16
+
17
+ - Angular: <https://connectycube-chat-widget-angular.onrender.com>
18
+
19
+ Split-view chat widget:
20
+
21
+ <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>
22
+
23
+ Single-view chat widget:
24
+
25
+ <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>
26
+
27
+ ## Documentation
28
+
29
+ <https://developers.connectycube.com/js/chat-widget>
30
+
31
+ ## Installation
32
+
33
+ ```bash
34
+ # npm
35
+ npm install @connectycube/chat-widget-angular
36
+
37
+ # yarn
38
+ yarn add @connectycube/chat-widget-angular
39
+ ```
40
+
41
+ As this component uses wrapped `@connectycube/chat-widget` install types for React and ReactDom as devDependencies:
42
+
43
+ ```bash
44
+ # npm
45
+ npm install --save-dev @types/react @types/react-dom
46
+
47
+ # yarn
48
+ yarn add --dev @types/react @types/react-dom
49
+ ```
50
+
51
+ ## Usage
52
+
53
+ ### Before you start
54
+
55
+ Before you start, make sure:
56
+
57
+ 1. You have access to your ConnectyCube account. If you don’t have an account, [sign up here](https://admin.connectycube.com/register).
58
+ 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.
59
+
60
+ ### Display widget
61
+
62
+ Import and connect the ConnectyCubeChatWidgetComponent component to your app (e.g. in `app.ts`):
63
+
64
+ ```js
65
+ import { RouterOutlet } from '@angular/router';
66
+ import { ConnectyCubeChatWidgetComponent } from '@connectycube/chat-widget-angular';
67
+
68
+ @Component({
69
+ selector: 'app-root',
70
+ imports: [RouterOutlet, ConnectyCubeChatWidgetComponent],
71
+ templateUrl: './app.html',
72
+ styleUrl: './app.css',
73
+ })
74
+ export class App {
75
+ ...
76
+ protected readonly props = {
77
+ appId: 111,
78
+ authKey: '11111111-2222-3333-4444-55555555',
79
+ config: { debug: { mode: 1 } },
80
+ userId: '112233', // a User Id from your system
81
+ userName: 'Samuel', // how other users will see your user name
82
+ showOnlineUsersTab: false,
83
+ splitView: true,
84
+ hideWidgetButton: false,
85
+ onOpenChange: (open) => {
86
+ console.log('Chat widget is open:', open);
87
+ },
88
+ onUnreadCountChange: (count) => {
89
+ console.log('Unread messages count:', count);
90
+ },
91
+ };
92
+ }
93
+ ```
94
+
95
+ Place the component in `app.html`:
96
+
97
+ ```html
98
+ <div id="app">
99
+ ...
100
+ <connectycube-chat-widget [props]="props" />
101
+ </div>
102
+ ...
103
+ ```
104
+
105
+ See chat widget code samples <https://github.com/ConnectyCube/connectycube-chat-widget-samples/tree/main/angular> as a reference for faster integration.
106
+
107
+ ## Props
108
+
109
+ See all available props <https://developers.connectycube.com/js/chat-widget/#props>
110
+
111
+ ## Recipes
112
+
113
+ See all available recipes <https://developers.connectycube.com/js/chat-widget/#recipes>
114
+
115
+ ## Have an issue?
116
+
117
+ Join our [Discord](https://discord.com/invite/zqbBWNCCFJ) community to get real-time help from our team
118
+
119
+ ## Community
120
+
121
+ - [Blog](https://connectycube.com/blog)
122
+ - X (twitter)[@ConnectyCube](https://x.com/ConnectyCube)
123
+ - [Facebook](https://www.facebook.com/ConnectyCube)
124
+ - [Medium](https://medium.com/@connectycube)
125
+ - [YouTube](https://www.youtube.com/@ConnectyCube)
126
+
127
+ **Want to support our team**:<br>
128
+ <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>
129
+
130
+ ## Changelog
131
+
132
+ <https://github.com/ConnectyCube/connectycube-chat-widget-samples/blob/main/CHANGELOG.md>
package/dist/README.md ADDED
@@ -0,0 +1,132 @@
1
+ # ConnectyCube Chat Widget for Angular
2
+
3
+ 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.
4
+
5
+ ## Overview
6
+
7
+ 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:
8
+
9
+ - **Easy Integration:** Plug the widget into your existing Angular projects.
10
+ - **Customizable Interface:** Adjust the look and feel to match your brand.
11
+ - **Real-Time Messaging:** Leverage ConnectyCube's reliable backend for instant communication.
12
+ - **Responsive Design:** Works seamlessly on both desktop and mobile devices.
13
+ - **Modular and Extensible:** Adapt the widget to your unique requirements.
14
+
15
+ ## Demo
16
+
17
+ - Angular: <https://connectycube-chat-widget-angular.onrender.com>
18
+
19
+ Split-view chat widget:
20
+
21
+ <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>
22
+
23
+ Single-view chat widget:
24
+
25
+ <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>
26
+
27
+ ## Documentation
28
+
29
+ <https://developers.connectycube.com/js/chat-widget>
30
+
31
+ ## Installation
32
+
33
+ ```bash
34
+ # npm
35
+ npm install @connectycube/chat-widget-angular
36
+
37
+ # yarn
38
+ yarn add @connectycube/chat-widget-angular
39
+ ```
40
+
41
+ As this component uses wrapped `@connectycube/chat-widget` install types for React and ReactDom as devDependencies:
42
+
43
+ ```bash
44
+ # npm
45
+ npm install --save-dev @types/react @types/react-dom
46
+
47
+ # yarn
48
+ yarn add --dev @types/react @types/react-dom
49
+ ```
50
+
51
+ ## Usage
52
+
53
+ ### Before you start
54
+
55
+ Before you start, make sure:
56
+
57
+ 1. You have access to your ConnectyCube account. If you don’t have an account, [sign up here](https://admin.connectycube.com/register).
58
+ 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.
59
+
60
+ ### Display widget
61
+
62
+ Import and connect the ConnectyCubeChatWidgetComponent component to your app (e.g. in `app.ts`):
63
+
64
+ ```js
65
+ import { RouterOutlet } from '@angular/router';
66
+ import { ConnectyCubeChatWidgetComponent } from '@connectycube/chat-widget-angular';
67
+
68
+ @Component({
69
+ selector: 'app-root',
70
+ imports: [RouterOutlet, ConnectyCubeChatWidgetComponent],
71
+ templateUrl: './app.html',
72
+ styleUrl: './app.css',
73
+ })
74
+ export class App {
75
+ ...
76
+ protected readonly props = {
77
+ appId: 111,
78
+ authKey: '11111111-2222-3333-4444-55555555',
79
+ config: { debug: { mode: 1 } },
80
+ userId: '112233', // a User Id from your system
81
+ userName: 'Samuel', // how other users will see your user name
82
+ showOnlineUsersTab: false,
83
+ splitView: true,
84
+ hideWidgetButton: false,
85
+ onOpenChange: (open) => {
86
+ console.log('Chat widget is open:', open);
87
+ },
88
+ onUnreadCountChange: (count) => {
89
+ console.log('Unread messages count:', count);
90
+ },
91
+ };
92
+ }
93
+ ```
94
+
95
+ Place the component in `app.html`:
96
+
97
+ ```html
98
+ <div id="app">
99
+ ...
100
+ <connectycube-chat-widget [props]="props" />
101
+ </div>
102
+ ...
103
+ ```
104
+
105
+ See chat widget code samples <https://github.com/ConnectyCube/connectycube-chat-widget-samples/tree/main/angular> as a reference for faster integration.
106
+
107
+ ## Props
108
+
109
+ See all available props <https://developers.connectycube.com/js/chat-widget/#props>
110
+
111
+ ## Recipes
112
+
113
+ See all available recipes <https://developers.connectycube.com/js/chat-widget/#recipes>
114
+
115
+ ## Have an issue?
116
+
117
+ Join our [Discord](https://discord.com/invite/zqbBWNCCFJ) community to get real-time help from our team
118
+
119
+ ## Community
120
+
121
+ - [Blog](https://connectycube.com/blog)
122
+ - X (twitter)[@ConnectyCube](https://x.com/ConnectyCube)
123
+ - [Facebook](https://www.facebook.com/ConnectyCube)
124
+ - [Medium](https://medium.com/@connectycube)
125
+ - [YouTube](https://www.youtube.com/@ConnectyCube)
126
+
127
+ **Want to support our team**:<br>
128
+ <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>
129
+
130
+ ## Changelog
131
+
132
+ <https://github.com/ConnectyCube/connectycube-chat-widget-samples/blob/main/CHANGELOG.md>
package/dist/react18/README.md ADDED
@@ -0,0 +1,132 @@
1
+ # ConnectyCube Chat Widget for Angular
2
+
3
+ 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.
4
+
5
+ ## Overview
6
+
7
+ 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:
8
+
9
+ - **Easy Integration:** Plug the widget into your existing Angular projects.
10
+ - **Customizable Interface:** Adjust the look and feel to match your brand.
11
+ - **Real-Time Messaging:** Leverage ConnectyCube's reliable backend for instant communication.
12
+ - **Responsive Design:** Works seamlessly on both desktop and mobile devices.
13
+ - **Modular and Extensible:** Adapt the widget to your unique requirements.
14
+
15
+ ## Demo
16
+
17
+ - Angular: <https://connectycube-chat-widget-angular.onrender.com>
18
+
19
+ Split-view chat widget:
20
+
21
+ <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>
22
+
23
+ Single-view chat widget:
24
+
25
+ <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>
26
+
27
+ ## Documentation
28
+
29
+ <https://developers.connectycube.com/js/chat-widget>
30
+
31
+ ## Installation
32
+
33
+ ```bash
34
+ # npm
35
+ npm install @connectycube/chat-widget-angular
36
+
37
+ # yarn
38
+ yarn add @connectycube/chat-widget-angular
39
+ ```
40
+
41
+ As this component uses wrapped `@connectycube/chat-widget` install types for React and ReactDom as devDependencies:
42
+
43
+ ```bash
44
+ # npm
45
+ npm install --save-dev @types/react @types/react-dom
46
+
47
+ # yarn
48
+ yarn add --dev @types/react @types/react-dom
49
+ ```
50
+
51
+ ## Usage
52
+
53
+ ### Before you start
54
+
55
+ Before you start, make sure:
56
+
57
+ 1. You have access to your ConnectyCube account. If you don’t have an account, [sign up here](https://admin.connectycube.com/register).
58
+ 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.
59
+
60
+ ### Display widget
61
+
62
+ Import and connect the ConnectyCubeChatWidgetComponent component to your app (e.g. in `app.ts`):
63
+
64
+ ```js
65
+ import { RouterOutlet } from '@angular/router';
66
+ import { ConnectyCubeChatWidgetComponent } from '@connectycube/chat-widget-angular';
67
+
68
+ @Component({
69
+ selector: 'app-root',
70
+ imports: [RouterOutlet, ConnectyCubeChatWidgetComponent],
71
+ templateUrl: './app.html',
72
+ styleUrl: './app.css',
73
+ })
74
+ export class App {
75
+ ...
76
+ protected readonly props = {
77
+ appId: 111,
78
+ authKey: '11111111-2222-3333-4444-55555555',
79
+ config: { debug: { mode: 1 } },
80
+ userId: '112233', // a User Id from your system
81
+ userName: 'Samuel', // how other users will see your user name
82
+ showOnlineUsersTab: false,
83
+ splitView: true,
84
+ hideWidgetButton: false,
85
+ onOpenChange: (open) => {
86
+ console.log('Chat widget is open:', open);
87
+ },
88
+ onUnreadCountChange: (count) => {
89
+ console.log('Unread messages count:', count);
90
+ },
91
+ };
92
+ }
93
+ ```
94
+
95
+ Place the component in `app.html`:
96
+
97
+ ```html
98
+ <div id="app">
99
+ ...
100
+ <connectycube-chat-widget [props]="props" />
101
+ </div>
102
+ ...
103
+ ```
104
+
105
+ See chat widget code samples <https://github.com/ConnectyCube/connectycube-chat-widget-samples/tree/main/angular> as a reference for faster integration.
106
+
107
+ ## Props
108
+
109
+ See all available props <https://developers.connectycube.com/js/chat-widget/#props>
110
+
111
+ ## Recipes
112
+
113
+ See all available recipes <https://developers.connectycube.com/js/chat-widget/#recipes>
114
+
115
+ ## Have an issue?
116
+
117
+ Join our [Discord](https://discord.com/invite/zqbBWNCCFJ) community to get real-time help from our team
118
+
119
+ ## Community
120
+
121
+ - [Blog](https://connectycube.com/blog)
122
+ - X (twitter)[@ConnectyCube](https://x.com/ConnectyCube)
123
+ - [Facebook](https://www.facebook.com/ConnectyCube)
124
+ - [Medium](https://medium.com/@connectycube)
125
+ - [YouTube](https://www.youtube.com/@ConnectyCube)
126
+
127
+ **Want to support our team**:<br>
128
+ <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>
129
+
130
+ ## Changelog
131
+
132
+ <https://github.com/ConnectyCube/connectycube-chat-widget-samples/blob/main/CHANGELOG.md>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@connectycube/chat-widget-angular",
3
- "version": "0.36.0",
3
+ "version": "0.36.1",
4
4
  "description": "A customizable Angular chat widget built on the ConnectyCube platform, enabling real-time messaging, calls, and user engagement in any web app.",
5
5
  "license": "GPL-3.0-only",
6
6
  "homepage": "https://github.com/ConnectyCube/connectycube-chat-widget/packages/chat-widget-angular#readme",
@@ -54,7 +54,7 @@
54
54
  "react-dom": ">=18"
55
55
  },
56
56
  "dependencies": {
57
- "@connectycube/chat-widget": "^0.36.0"
57
+ "@connectycube/chat-widget": "^0.36.1"
58
58
  },
59
59
  "devDependencies": {
60
60
  "@connectycube/chat-widget": "file:../chat-widget",
@@ -72,4 +72,4 @@
72
72
  "publishConfig": {
73
73
  "access": "public"
74
74
  }
75
- }
75
+ }