Please note that this project is no longer actively maintained or accepting Pull Requests. Please use the React Group Chat app instead.

---

Support Chat Demo

This project is a simplified demo of a support chat app (including dashboard and client view) using PubNub.

Try this demo without installing anything.

Learn more infomation about the Support Chat UI Kit from the PubNub UI Kit page.

Features:

• 1 to 1 style chat with automatic creation of new chats.
• PubNub Presence powered chat selection.
• Emoji selector.
• Channel Wildcards.
• Message history.

Requirements

• Node.js
• PubNub Account (Free)

PubNub Account

1. You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys from the PubNub Developer Portal.

2. Sign in to your PubNub Dashboard.

3. Click Create New App.

4. Give your app a name, and select Chat App as the app type.

5. Click Create.

6. Click your new app to open its settings, then click its keyset.

7. Enable the channel presence feature for your keyset.

Building and Running

• Keep in mind that this demo is a work in progress. Some features may not be available in this demo yet and you should always review the code before including it into your application.

1. You'll need to run the following commands from your terminal for both of the application views (dashboard and client).

2. Clone the GitHub repository.

   git clone https://github.com/PubNubDevelopers/support-chat-demo.git

3. CD into the the dashboard or client views:

   cd dashboard

   OR

   cd client

4. Open src/App.tsx. Replace the Publish and Subscribe keys with your keyset from your PubNub Dashboard.

5. Install the project.

   npm install

6. Run the project in your local environment.

   npm start

   A web browser should automatically open for each view and you can explore your very own Support Chat app! Click "Start Conversation" in the client view to create a new conversation between the dashboard view and client.

Further Information

Checkout PubNub Chat Docs page for more information about how to use the React and Redux SDKs to add in-app chat to your applications.