Gathering detailed insights and metrics for @connectycube/chat-widget
Gathering detailed insights and metrics for @connectycube/chat-widget
Installations
npm install @connectycube/chat-widgetDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
>=20.0.0
Node Version
20.19.3
NPM Version
10.8.2
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
3
Package Meta Information
Latest Version
0.32.1
Package Id
@connectycube/chat-widget@0.32.1
Unpacked Size
4.69 MB
Size
1.68 MB
File Count
233
NPM Version
10.8.2
Node Version
20.19.3
Published on
Jul 14, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
28
@connectycube/use-calls@connectycube/use-chat@radix-ui/react-alert-dialog@radix-ui/react-avatar@radix-ui/react-dialog@radix-ui/react-dropdown-menu@radix-ui/react-label@radix-ui/react-slot@radix-ui/react-switch@radix-ui/react-tabs@radix-ui/react-tooltipclass-variance-authorityclsxconnectycubeget-browser-fingerprinti18nextlinkify-reactlinkifyjslucide-reactnext-themesreact-hook-formreact-i18nextreact-iconsreact-intersection-observerreact-playersonnervirtuazustand
Dev Dependencies
23
@eslint/js@tailwindcss/postcss@tailwindcss/vite@types/node@types/react@types/react-dom@vitejs/plugin-react@vitest/coverage-v8eslinteslint-plugin-react-hookseslint-plugin-react-refreshglobalsjsdomprettiertailwind-mergetailwind-scrollbartailwindcsstw-animate-csstypescripttypescript-eslintvitevite-plugin-dtsvitest
Optional Dependencies
3
ConnectyCube Chat Widget
A React 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 React 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 React 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
https://connectycube-chat-widget.onrender.com
Split-view chat widget:
Single-view chat widget:
Documentation
https://developers.connectycube.com/js/chat-widget
Installation
React
1# npm 2npm install @connectycube/chat-widget 3 4# yarn 5yarn add @connectycube/chat-widget
Vanilla JS
Add the following scripts on your html page somewhere in head element:
1<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script> 2<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script> 3<script src="https://unpkg.com/connectycube@4/dist/connectycube.min.js"></script> 4<script src="https://unpkg.com/@connectycube/chat-widget@latest/dist/index.umd.js"></script>
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
React
Import and place the following component in your app:
1import ConnectyCubeChatWidget from "@connectycube/chat-widget"; 2 3... 4 5<ConnectyCubeChatWidget 6 appId="111" 7 authKey="11111111-2222-3333-4444-55555555" 8 config={{ debug: { mode: 1 } }} 9 userId="112233" 10 userName="Samuel" 11 showOnlineUsersTab={false} 12 splitView={true} 13/> 14 15// userName - how other users will see your user name 16// userId - a User Id from your system
See chat widget code samples https://github.com/ConnectyCube/connectycube-chat-widget-samples as a reference for faster integration.
React 19
By default, the widget uses the React 18-compatible build. To use it with React 19, import the dedicated ESM-only build instead:
1import ConnectyCubeChatWidget from '@connectycube/chat-widget/react19';
Vanilla JS
Place the following script in your app:
1<!doctype html> 2<html lang="en"> 3 <head> 4 <!-- ... --> 5 </head> 6 <body> 7 <!-- ... --> 8 <!-- @connectycube/chat-widget - start --> 9 <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script> 10 <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script> 11 <script src="https://unpkg.com/connectycube@4/dist/connectycube.min.js"></script> 12 <script src="https://unpkg.com/@connectycube/chat-widget@latest/dist/index.umd.js"></script> 13 <script> 14 const chatWidgetContainer = document.createElement('div'); 15 chatWidgetContainer.id = 'ConnectyCube_chat-widget'; 16 document.body.appendChild(chatWidgetContainer); 17 const props = { 18 appId: 111, 19 authKey: '11111111-2222-3333-4444-55555555', 20 config: { debug: { mode: 1 } }, 21 userId: '112233', // a User Id from your system 22 userName: 'Samuel', // how other users will see your user name 23 showOnlineUsersTab: false, 24 splitView: true, 25 hideWidgetButton: false, 26 onOpenChange: (open) => { 27 console.log('Chat widget is open:', open); 28 }, 29 onUnreadCountChange: (count) => { 30 console.log('Unread messages count:', count); 31 }, 32 }; 33 ReactDOM.createRoot(chatWidgetContainer).render(React.createElement(ConnectyCubeChatWidget, props)); 34 35 // use the code below as an example to toggle the chat widget visibility state for custom button 36 document.getElementById('someCustomButton').addEventListener('click', () => { 37 ConnectyCubeChatWidget.toggle(); 38 }); 39 </script> 40 <!-- @connectycube/chat-widget - end --> 41 </body> 42</html>
See chat widget code samples https://github.com/ConnectyCube/connectycube-chat-widget-samples 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
SSR (Server-Side Rendering) Guide
When using @connectycube/chat-widget in SSR environments (e.g., Next.js, Remix), some native Node.js modules like events may cause errors due to differences between Node and browser environments. Here are recommendations to ensure smooth SSR integration:
Usage
1# npm 2npm install @connectycube/chat-widget 3npx connectycube patch-ssr # Apply SSR patches 4# npx connectycube revert-ssr # Revert SSR patches 5 6# yarn 7yarn add @connectycube/chat-widget 8yarn connectycube patch-ssr # Apply SSR patches 9# yarn connectycube revert-ssr # Revert SSR patches
The connectycube CLI will be available as part of the connectycube package, which is installed automatically as a dependency of @connectycube/chat-widget. This script applies fixes to make the SDK compatible with SSR environments.
Have an issue?
Join our Discord for quick answers to your questions
Community
- Blog
- X (twitter)@ConnectyCube
Want to support our team:
Changelog
https://github.com/ConnectyCube/connectycube-chat-widget-samples/blob/main/CHANGELOG.md
No vulnerabilities found.
No security vulnerabilities found.