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

Single-view mode

Code samples

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

npm install @connectycube/chat-widget

// or

yarn add @connectycube/chat-widget

Add the following scripts on your html page somewhere in head element:

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

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 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 Name	Type	Description	Default Value

`appId`	`number \| string`	The ConnectyCube Application ID
`authKey`	`string`	The ConnectyCube Authentication Key
`config`	`object`	(Optional) Configuration options for ConnectyCube SDK
`userId`	`string`	A User Id from your system
`userName`	`string`	User name. This is how other users will see your user name
`userAvatar`	`string`	(Optional) User Avatar URL
`userProfileLink`	`string`	(Optional) User profile link URL
`splitView`	`boolean`	(Optional) Displays the chats in split view or single view	false
`showOnlineUsersTab`	`boolean`	(Optional) Displays users tab with the list of online users	false
`buttonTitle`	`string`	(Optional) The text displayed on the chat button	”Chat”
`buttonStyle`	`React.CSSProperties`	(Optional) Inline styles for the button
`portalStyle`	`React.CSSProperties`	(Optional) Inline styles for the portal
`badgeStyle`	`React.CSSProperties`	(Optional) Inline styles for the badge
`buttonClassName`	`string`	(Optional) CSS class or Tailwind CSS classes for the button
`portalClassName`	`string`	(Optional) CSS class or Tailwind CSS classes for the chat
`badgeClassName`	`string`	(Optional) CSS class or Tailwind CSS classes for the badge
`quickActions`	`object`	(Optional) Configuration for quick actions dialog. See QuickActions
`translation`	`string`	(Optional) Specifies the language for the chat widget. See Supported Translations	”en”
`hideNewChatButton`	`boolean`	(Optional) Allows to hide the chat creation button	false
`hideNewUserChatOption`	`boolean`	(Optional) Allows to hide the New Message option in New Chat dropdown	false
`hideNewGroupChatOption`	`boolean`	(Optional) Allows to hide the New Group option in New Chat dropdown	false
`hideWidgetButton`	`boolean`	(Optional) Allows to hide the button that opens/hides the chat widget	false
`enableContentReporting`	`boolean`	(Optional) Enable reporting bad content feature (will show Report button in user profile)	false
`enableBlockList`	`boolean`	(Optional) Enable block user feature (will show Block button in user profile)	false
`open`	`boolean`	(Optional) To control the visibility state of the chat widget	false
`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
`muted`	`boolean`	(Optional) Mutes or unmutes notifications and sounds	false
`showNotifications`	`boolean`	(Optional) Allows receiving browser notifications	false
`webPushNotifications`	`boolean`	(Optional) Allows receiving browser push notifications	false
`webPushVapidPublicKey`	`string`	(Optional) Vapid Public Key for push notifications	false
`serviceWorkerPath`	`string`	(Optional) Path to service worker for push notifications	false
`playSound`	`boolean`	(Optional) Enables or disables playing sound on incoming messages	true
`attachmentsAccept`	`string`	(Optional) This prop sets to the accept attribute in HTML	”/“
`defaultChat`	`object`	(Optional) force widget to open particular chat

Quick Actions

Prop Name	Type	Description
`title`	`string`	(Optional) Title for the quick actions section
`description`	`string`	(Optional) Description for the quick actions
`actions`	`string[]`	List of action strings

Supported Translations

Language Code	Language
`en`	English
`el`	Greek
`ua`	Ukrainian

Default Chat

Prop Name	Type	Description
`id`	`string`	A key that will be used to identify the chat
`opponentUserId`	`number`	User id to create chat with. Must be real ConnectyCube user id
`type`	`string`	Type of chat to create if not exist: 1on1 or group
`name`	`string`	Name of new chat
`metadata`	`map`	New chat metadata

Push notifications

Push notifications allow to receive a message while the browser tab with widget is closed.

For push notifications to work it need to do the following:

pass webPushNotifications: true prop
go to ConnectyCube Dashboard, Push Notifications, Credentials, WEBPUSH NOTIFICATIONS and fill all the required fields (Subject, PublicKey, PrivateKey)
for webPushVapidPublicKey prop to set the same PublicKey which you set in ConnectyCube Dashboard.
create a service worker and provide path to it via serviceWorkerPath prop. See chat widget code samples as a reference.

Recipes

Split view

React
Vanilla JS

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

const props = {
  ...
  splitView: true,
};

Single view

React
Vanilla JS

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

const props = {
  ...
  splitView: false,
};

Show online users tab

React
Vanilla JS

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

const props = {
  ...
  showOnlineUsersTab: true,
};

Display Chat button bottom left

React
Vanilla JS

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

const props = {
  ...
  buttonClassName: "left-2 right-auto",
  portalClassName: "left-2 right-auto"
};

Moderation

Content moderation is the process of reviewing and monitoring user-generated content on Widget platforms to ensure that it meets certain standards and guidelines. This includes reporting/removing inappropriate or offensive content and enforcing community guidelines and terms of service.

At then moment the following moderation features supported:

Report user
Block user

Report user

To enable Report user feature, you need to pass enableContentReporting: true prop. This will display a Report button in user profile:

For user reporting to work properly, it requires the following:

Go to ConnectyCube Daashboard
select your Application
Navigate to Custom module via left sidebar
Create new table called UserReports with the following fields:

reportedUserId - integer
reason - string

Chat widget: report table in ConnectyCube dashboard

Once the table is created, you can test the user reporting in Widget. You will see the reports appear in this table.

Block user

To enable Block user feature, you need to pass enableBlockList: true prop. This will display a Block button in user profile (see above).

Have an issue?

Join our Discord for quick answers to your questions

Changelog

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

Chat Widget

Demo

Code samples

Installation

Display widget

Before you start

React

Vanilla JS

Props

Quick Actions

Supported Translations

Default Chat

Push notifications

Recipes

Split view

Single view

Show online users tab

Display Chat button bottom left

Moderation

Report user

Block user

Have an issue?

Changelog