# 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 Split-view chat widget: Single-view chat widget: ## Documentation ## Installation ### React ``` npm install @connectycube/chat-widget ``` or ``` yarn add @connectycube/chat-widget ``` ### Vanilla JS Add the following scripts on your html page somewhere in `head` element: ``` ``` ## 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 #### React Import and place the following component in your app: ```js import ConnectyCubeChatWidget from "@connectycube/chat-widget"; ... // userName - how other users will see your user name // userId - a User Id from your system ``` See chat widget code samples as a reference for faster integration. #### Vanilla JS Place the following script in your app: ```html ``` See chat widget code samples as a reference for faster integration. ## Props See all available props ## Recipes See all available recipes ## Have an issue? Join our [Discord](https://discord.com/invite/zqbBWNCCFJ) for quick answers to your questions ## Community - [Blog](https://connectycube.com/blog) - X (twitter)[@ConnectyCube](https://x.com/ConnectyCube) - [Facebook](https://www.facebook.com/ConnectyCube) **Want to support our team**:

## Changelog