Skip to content
logo logo Connectycube
Home Features Pricing Contact

Chat Widget

The ConnectyCube Web Chat Widget is designed to simplify the process of adding chat functionality to your Web apps. 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. Key benefits include:

  • Easy integration: plug the widget into your existing Web 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 mode

ConnectyCube chat widget, split view image demo

Single-view mode

ConnectyCube chat widget, single view image demo

Installation

Terminal window
npm install @connectycube/chat-widget


// or


yarn add @connectycube/chat-widget

Display widget

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.
  2. 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 Auth Key) that you’ll need for authentication.

React

Import and place the following component in your app:

import ConnectyCubeChatWidget from "@connectycube/chat-widget";


...


<ConnectyCubeChatWidget
  appId="123"
  authKey="11111111-2222-3333-4444-55555555"
  userId="45"
  userName="Samuel"
  showOnlineUsersTab={false}
  splitView={true}
/>


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

<!doctype html>
<html lang="en">
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
    <!-- @connectycube/chat-widget - start -->
    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/connectycube@4/dist/connectycube.min.js"></script>
    <script src="https://unpkg.com/@connectycube/chat-widget@latest/dist/index.umd.js"></script>
    <script>
      const chatWidgetContainer = document.createElement('div');
      chatWidgetContainer.id = 'ConnectyCube_chat-widget';
      document.body.appendChild(chatWidgetContainer);
      const props = {
        appId: 123,
        authKey: '11111111-2222-3333-4444-55555555',
        userId: '45', // a User Id from your system
        userName: 'Samuel', // how other users will see your user name
        showOnlineUsersTab: false,
        splitView: true,
      };
      ReactDOM.createRoot(chatWidgetContainer).render(React.createElement(ConnectyCubeChatWidget, props));
    </script>
    <!-- @connectycube/chat-widget - end -->
  </body>
</html>

See chat widget code samples as a reference for faster integration.

Props

Prop NameTypeDescriptionDefault Value
appIdnumber | stringThe ConnectyCube Application ID
authKeystringThe ConnectyCube Authentication Key
configobject(Optional) Configuration options for ConnectyCube SDK
userIdstringA User Id from your system
userNamestringUser name. This is how other users will see your user name
userAvatarstring(Optional) User Avatar URL
userProfileLinkstring(Optional) User profile link URL
mutedboolean(Optional) Do not play sound on incoming messagefalse
splitViewboolean(Optional) Displays the chats in split view or single viewfalse
showOnlineUsersTabboolean(Optional) Displays users tab with the list of online usersfalse
buttonTitlestring(Optional) The text displayed on the chat buttonChat
buttonStyleReact.CSSProperties(Optional) Inline styles for the button
portalStyleReact.CSSProperties(Optional) Inline styles for the portal
badgeStyleReact.CSSProperties(Optional) Inline styles for the badge
buttonClassNamestring(Optional) CSS class or Tailwind CSS classes for the button
portalClassNamestring(Optional) CSS class or Tailwind CSS classes for the chat
badgeClassNamestring(Optional) CSS class or Tailwind CSS classes for the badge
quickActionsobject(Optional) Configuration for quick actions dialog. See QuickActions
translationstring(Optional) Specifies the language for the chat widget. See Supported Translationsen
hideNewChatButtonboolean(Optional) Allows to hide the chat creation buttonfalse
hideWidgetButtonboolean(Optional) Allows to hide the button that opens/hides the chat widgetfalse
openboolean(Optional) To control the visibility state of the chat widgetfalse
onOpenChange(open: boolean) => void(Optional) Callback function to get update about chat widget visibility
onUnreadCountChange(count: boolean) => void(Optional) Callback function to get update about unread messages count

Quick Actions

Prop NameTypeDescriptionDefault Value
titlestring(Optional) Title for the quick actions section
descriptionstring(Optional) Description for the quick actions
actionsstring[]List of action strings
ConnectyCube chat widget, Quick Actions demo

Supported Translations

Language CodeLanguage
enEnglish
elGreek
uaUkrainian

Recipes

Split view

<ConnectyCubeChatWidget
  ...
  splitView={true}
/>

Single view

<ConnectyCubeChatWidget
  ...
  splitView={false}
/>

Show online users tab

<ConnectyCubeChatWidget
  ...
  showOnlineUsersTab={true}
/>

Display Chat button bottom left

<ConnectyCubeChatWidget
  ...
  buttonClassName={"left-2 right-auto"}
  portalClassName={"left-2 right-auto"}
/>

Code samples

See chat widget code samples as a reference for faster integration.

Changelog

https://github.com/ConnectyCube/connectycube-chat-widget-samples/blob/main/CHANGELOG.md