Team Chat

Beautiful, responsive group chat demo experience for collaborative and social applications.

Chat

Author:

Elvis Wolcott

Github RepoTutorial

Team Chat

Our team chat demo demonstrates how to build a feature-rich chat and team collaboration application using PubNub Chat. Learn how to manage users, join chat rooms, and send messages with PubNub. Head over to our documentation and get started building chat today.

Features

  • Group messaging that lets teams communicate in realtime, increasing productivity.

  • User and channel metadata so you can view channel details, member’s lists, and more without storing data in a separate database.

  • User presence detection to show who’s online or offline at any moment.

  • Typing indicators that add responsiveness and improve communication.

  • GIPHY integration so you can share GIFs and personalize your chats.

  • Rich media to share emojis and links, improving the end-user experience.

  • Profanity filtering to replace bad words in messages, keeping chats friendly for everyone.

Play with the app

1. Send messages - Select a conversation channel and send a message in the message window. Feel free to include an emoji or two to personalize your message! PubNub will deliver the message with lightning speeds to all members of that conversation.

2. Show typing indicators - When you send messages the app shows typing indicators on the screen that inform online members that you’re typing a message.

3. Join or leave conversations - Click on the + icon next to the list of conversations to join a new conversation from the list. You can also leave conversations by clicking the leave icon next to each conversation. We’ve made sure the default conversation “introductions” includes all members. You cannot leave this conversation.

4. Share GIFs with GIPHY - Type /giphy phrase in the message window and press enter. We’ll select a random gif for you and share it with other users in the app. You can also select your gif from a catalog by clicking on the GIPHY icon. Type a phrase and select a gif to share in the app. 

5. Share rich media links - Rich media content adds previews to web links and gets users engaged on the app. Just type a message that includes a youtube link or an image. Our app will automatically extract the content from the link and display it in the chats.

6. Filter profanity in messages - The PubNub Profanity Filter will analyze the message and automatically censor the message with ***. Just type a swear word or a phrase in the message window and press enter.

SDKs & Frameworks

  • React provides tools to leverage the PubNub JavaScript SDK within a React application.

  • Redux manages state of data components inside an application.

  • Javascript connects and communicates with the network.

For more information, head over to PubNub Chat documentation and get started building chat today.

Feedback & Support

Need help? Contact PubNub Support.

More Demos for you

Support Chat

Support Chat

Support Chat lets you build effective support chat to increase customer...

Learn more
10CHAT

10CHAT

A simple chat app powered by PubNub.

Learn more
Babel

Babel

This message will self-destruct in five seconds. Babel is an open source...

Learn more

Talk to an expert

Contact Sales