cometchat-visual-builder-no-code 1.0.10-test26 → 1.0.10-test27

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 (5) hide show
  1. package/README.md +62 -231
  2. package/dist/main.js +1 -1
  3. package/dist/src/CometChat/CometChatSettings.d.ts +1 -1
  4. package/dist/src/CometChat/context/CometChatContext.d.ts +1 -3
  5. package/package.json +4 -4
package/README.md CHANGED
@@ -1,249 +1,80 @@
1
1
  <p align="center">
2
2
  <img alt="CometChat" src="https://assets.cometchat.io/website/images/logos/banner.png">
3
3
  </p>
4
-
5
4
  <p>
6
- <img alt="version" src="https://img.shields.io/badge/version-v1.0.dev-blue" />
5
+ <img alt="version" src="https://img.shields.io/badge/version-v1.0.0-blue" />
7
6
  <img alt="status" src="https://img.shields.io/badge/status-stable-brightgreen" />
8
- <img alt="react" src="https://img.shields.io/badge/react-supported-61DAFB?logo=react" />
9
- <img alt="vite" src="https://img.shields.io/badge/vite-supported-646CFF?logo=vite" />
10
- <img alt="typescript" src="https://img.shields.io/badge/typescript-supported-blue" />
11
7
  </p>
8
+ # CometChat Chat Builder Widget Integration Guide
12
9
 
13
- # Integration steps for Chat Builder
14
-
15
- Follow these steps to integrate it into your existing React project:
16
10
 
17
- For Next.js integration, please refer to our <a href="https://www.cometchat.com/docs/ui-kit/react/builder-integration-nextjs" target="_blank">step-by-step guide</a>.
11
+ ### 1. Register on CometChat & Gather Your Keys
18
12
 
19
- ## 1. Install dependencies in your app
13
+ Before you begin, sign up at the CometChat Dashboard and create a new app. Copy:
14
+ - App ID
15
+ - Region
16
+ - Auth Key
20
17
 
21
- Run the following command to install the required dependencies:
18
+ ### 2. Include the Chat-Embed Script in `<head>`
22
19
 
23
- ```bash
24
- npm install @cometchat/chat-uikit-react@6.0.7 @cometchat/calls-sdk-javascript
25
- ```
20
+ Add this inside the <head> section of your HTML file to load the CometChat bundle:
26
21
 
27
- ## 2. Copy CometChat Folder
28
-
29
- Copy the `cometchat-app-react/src/CometChat` folder into your project’s `src` directory.
30
-
31
- ## 3. Initialize CometChat UI Kit
32
-
33
- The initialization process varies depending on your setup. Select your framework:
34
-
35
- <details>
36
- <summary>CRA</summary>
37
-
38
- Open the file `src/index.tsx` and update it to include the required imports and initialization logic.
39
-
40
- ```typescript
41
- import React from "react";
42
- import ReactDOM from "react-dom/client";
43
- import App from "./App";
44
- import {
45
- UIKitSettingsBuilder,
46
- CometChatUIKit,
47
- } from "@cometchat/chat-uikit-react";
48
- import { setupLocalization } from "./CometChat/utils/utils";
49
- import { CometChatProvider } from "./CometChat/context/CometChatContext";
50
-
51
- export const COMETCHAT_CONSTANTS = {
52
- APP_ID: "", // Replace with your App ID
53
- REGION: "", // Replace with your App Region
54
- AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
55
- };
56
-
57
- const uiKitSettings = new UIKitSettingsBuilder()
58
- .setAppId(COMETCHAT_CONSTANTS.APP_ID)
59
- .setRegion(COMETCHAT_CONSTANTS.REGION)
60
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
61
- .subscribePresenceForAllUsers()
62
- .build();
63
-
64
- CometChatUIKit.init(uiKitSettings)?.then(() => {
65
- setupLocalization();
66
- ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
67
- <CometChatProvider>
68
- <App />
69
- </CometChatProvider>
70
- );
71
- });
22
+ ```html
23
+ <script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@latest/dist/main.js"></script>
72
24
  ```
73
25
 
74
- </details>
75
-
76
- <details>
77
- <summary>Vite</summary>
78
-
79
- Open the file `src/main.tsx` and update it to include the required imports and initialization logic.
80
-
81
- ```typescript
82
- import { createRoot } from "react-dom/client";
83
- import "./index.css";
84
- import App from "./App.tsx";
85
- import {
86
- UIKitSettingsBuilder,
87
- CometChatUIKit,
88
- } from "@cometchat/chat-uikit-react";
89
- import { setupLocalization } from "./CometChat/utils/utils.ts";
90
- import { CometChatProvider } from "./CometChat/context/CometChatContext.tsx";
91
-
92
- export const COMETCHAT_CONSTANTS = {
93
- APP_ID: "", // Replace with your App ID
94
- REGION: "", // Replace with your App Region
95
- AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
96
- };
97
-
98
- const uiKitSettings = new UIKitSettingsBuilder()
99
- .setAppId(COMETCHAT_CONSTANTS.APP_ID)
100
- .setRegion(COMETCHAT_CONSTANTS.REGION)
101
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
102
- .subscribePresenceForAllUsers()
103
- .build();
104
-
105
- CometChatUIKit.init(uiKitSettings)?.then(() => {
106
- setupLocalization();
107
- createRoot(document.getElementById("root")!).render(
108
- <CometChatProvider>
109
- <App />
110
- </CometChatProvider>
111
- );
112
- });
26
+ ### 3. Embed & Initialize the Widget in `<body>`
27
+
28
+ Paste the following just before the closing </body> tag:
29
+
30
+ ```html
31
+ <div id="cometChatMount"></div>
32
+
33
+ <script>
34
+ const COMETCHAT_CREDENTIALS = {
35
+ appID: "<YOUR_APP_ID>",
36
+ appRegion: "<YOUR_APP_REGION>",
37
+ authKey: "<YOUR_AUTH_KEY>",
38
+ };
39
+
40
+ const COMETCHAT_LAUNCH_OPTIONS = {
41
+ targetElementID: "cometChatMount", // Element ID to mount the widget
42
+ isDocked: true, // true = floating bubble, false = embedded
43
+ width: "700px", // Widget width
44
+ height: "500px", // Widget height
45
+
46
+ // Optional advanced settings:
47
+ // variantID: "YOUR_VARIANT_ID", // Variant configuration ID
48
+ // chatType: "user", // "user" or "group"
49
+ // defaultChatID: "uid_or_guid", // UID or GUID to open chat by default
50
+ // dockedAlignment: "right", // For docked mode: "left" or "right"
51
+ };
52
+
53
+ const COMETCHAT_USER_UID = "UID"; // Replace with your actual user UID
54
+
55
+ window.addEventListener("DOMContentLoaded", () => {
56
+ CometChatApp.init(COMETCHAT_CREDENTIALS)
57
+ .then(() => {
58
+ console.log("[CometChat] Initialized successfully");
59
+ return CometChatApp.login({ uid: COMETCHAT_USER_UID });
60
+ })
61
+ .then(user => {
62
+ console.log("[CometChat] Logged in as:", user);
63
+ return CometChatApp.launch(COMETCHAT_LAUNCH_OPTIONS);
64
+ })
65
+ .then(() => {
66
+ console.log("[CometChat] Chat launched!");
67
+ })
68
+ .catch(error => {
69
+ console.error("[CometChat] Error:", error);
70
+ });
71
+ });
72
+ </script>
113
73
  ```
114
74
 
115
- </details>
116
-
117
- ## 4. User Login
118
-
119
- Refer to the [User Login Guide](https://www.cometchat.com/docs/ui-kit/react/react-js-integration#step-4-user-login) to implement user authentication in your app.
120
-
121
- ## 5. Render CometChatApp Component
122
-
123
- Add the `CometChatApp` component to your app:
124
-
125
- ```typescript
126
- import CometChatApp from "./CometChat/CometChatApp";
127
-
128
- const App = () => {
129
- return (
130
- /* The CometChatApp component requires a parent element with an explicit height and width
131
- to render properly. Ensure the container has defined dimensions, and adjust them as needed
132
- based on your layout requirements. */
133
- <div style={{ width: "100vw", height: "100dvh" }}>
134
- <CometChatApp />
135
- </div>
136
- );
137
- };
138
-
139
- export default App;
140
- ```
141
-
142
- ### Note:
143
-
144
- Use the `CometChatApp` component to launch a chat interface with a selected user or group.
145
-
146
- ```typescript
147
- import { useEffect, useState } from "react";
148
- import { CometChat } from "@cometchat/chat-sdk-javascript";
149
- import CometChatApp from "./CometChat/CometChatApp";
150
-
151
- const App = () => {
152
- const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(
153
- undefined
154
- );
155
- const [selectedGroup, setSelectedGroup] = useState<
156
- CometChat.Group | undefined
157
- >(undefined);
158
-
159
- useEffect(() => {
160
- const UID = "UID"; // Replace with your User ID
161
- CometChat.getUser(UID).then(setSelectedUser).catch(console.error);
162
-
163
- const GUID = "GUID"; // Replace with your Group ID
164
- CometChat.getGroup(GUID).then(setSelectedGroup).catch(console.error);
165
- }, []);
166
-
167
- return (
168
- /* CometChatApp requires a parent with explicit height & width to render correctly.
169
- Adjust the height and width as needed.
170
- */
171
- <div style={{ width: "100vw", height: "100vh" }}>
172
- <CometChatApp user={selectedUser} group={selectedGroup} />
173
- </div>
174
- );
175
- };
176
-
177
- export default App;
178
- ```
179
-
180
- This implementation applies when you choose the **Without Sidebar** option for Sidebar.
181
-
182
- - If `chatType` is `user` (default), only User chats will be displayed (either the selected user or the default user).
183
- - If `chatType` is `group`, only Group chats will be displayed (either the selected group or the default group).
75
+ Replace `<YOUR_APP_ID>`, `<YOUR_APP_REGION>`, `<YOUR_AUTH_KEY>`, and `COMETCHAT_USER_UID` with your actual credentials and user ID.
184
76
 
185
- ## 6. Run the App
186
-
187
- Finally, start your app using the appropriate command based on your setup:
188
-
189
- - Vite
190
-
191
- ```bash
192
- npm run dev
193
- ```
194
-
195
- - Create React App (CRA):
196
-
197
- ```bash
198
- npm start
199
- ```
200
-
201
- ## Note:
202
-
203
- Enable the following features in the Dashboard in your App under Chat > Features to ensure full functionality.
204
-
205
- > Mentions, Reactions, Message translation, Polls, Collaborative whiteboard, Collaborative document, Emojis, Stickers, Conversation starter, Conversation summary, Smart reply.
206
-
207
- ---
208
-
209
- If you face any issues while integrating the builder in your app project, please check if you have the following configurations added to your `tsConfig.json`:
210
-
211
- ```json
212
- {
213
- "compilerOptions": {
214
- "jsx": "react-jsx",
215
- "resolveJsonModule": true
216
- }
217
- }
218
- ```
77
+ ### 4. Documentation & Advanced Configuration
219
78
 
220
- If your development server is running, restart it to ensure the new TypeScript configuration is picked up.
221
-
222
- ## Run the Chat Builder App Independently (optional)
223
-
224
- > &nbsp;
225
- >
226
- > 1. Open the `cometchat-app-react` folder.
227
- > 2. Add credentials for your app in `src/index.tsx` (`src/main.tsx` incase for Vite):
228
- >
229
- > ```typescript
230
- > export const COMETCHAT_CONSTANTS = {
231
- > APP_ID: "", // Replace with your App ID
232
- > REGION: "", // Replace with your App Region
233
- > AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
234
- > };
235
- > ```
236
- >
237
- > 3. Install dependencies:
238
- >
239
- > ```bash
240
- > npm i
241
- > ```
242
- >
243
- > 4. Run the app:
244
- >
245
- > ```bash
246
- > npm start
247
- > ```
248
-
249
- For detailed steps, refer to our <a href="https://www.cometchat.com/docs/ui-kit/react/builder-integration" target="_blank">Chat Builder documentation</a>
79
+ For detailed information on configuration options, advanced features, and troubleshooting, refer to
80
+ [CometChat Widget Builder Guide](https://www.cometchat.com/docs/widget/builder-guide-html) .