<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
HACKATHON: Create cutting-edge enterprise apps using Retool + WeavyRead more
delightchat7
Chat Features

Chat UI Features

From design to production, our Chat API and application development tools come with everything your developers and your users need to get the most out of in-app chat UI

Get started with Weavy for free; forever - no credit card required.

In-app Chat UI essentials

All the standard chat features your users need, plus a little extra

Direct messages

Enable one-on-one communications between users.

Group chats

Empower group conversations. The more the merrier.

Video calls

With Zoom and Teams integrations, users can start calls from chat.

Attachments

Give users the power to share files from the cloud or their computer.

Rich preview

Share and preview documents, images, movies, and music.

Secure

Keep conversations safe with best-in-class security.

Unread message counter
Presense indicators
Notifications
Read receipts
URL previews
User mentions
Delivery confirmation
Typing indicators
Cloud storage
Google Drive support
Dropbox support
OneDrive support

Chat UI types

Direct messages

The bare minimum for any API for chat is the ability to send direct messages. Direct messages are exactly what they sound like: messages sent directly from one party to another. Direct messages are typically secured and can include text, multimedia, and other data types, ensuring a versatile and intimate communication channel. The Chat API handles the routing and delivery of these messages, maintaining the confidentiality and immediacy that users expect from a personal conversation. Direct messages are powered by a chat UI which at the most basic level gives users a full view of their conversation, but can also be made more accessible via different notification types, status indicators, and additional functionality.


Group chats

Group chats are a fundamental component of any modern Chat API, free or paid. Group chats take the feature set of direct messaging and allow three or more users to interact with each other in the chat client. Unlike direct messages, which are one-to-one, group chats facilitate a many-to-many communication model. Users can send messages, share files, and engage in real-time discussions with the entire group. The Chat API manages the complex task of delivering messages to all members, maintaining the conversation history, and ensuring that new participants can access past messages. A group chat UI can take many different forms, but at the most basic level it allows all users to easily differentiate between which user sent what messages in the context of a conversation. These differentiators can include things like user profile picture, text bubbles, and user labels. The group chat UI allows for all messages to be sorted by time in order to create a clear and coherent log of the conversation.

Notification types

User mentions

User mentions, often referred to as @ replies, @ messages, or tagging, is a mechanism where one user can directly address another user in a group chat. Though this is not necessarily true of all chat API integrations, user mentions typically elevate the level of notification the tagged user receives from the chatting API. By using a special character, typically the '@' symbol followed by the username (e.g., @JackWeavy), the mentioned user receives a special notification that they have been called out in the conversation. This functionality is essential for drawing attention, asking for input, or ensuring that a particular message is seen by the intended recipient in a busy chat environment. The Chat API processes these mentions in real-time, often highlighting them within the chat UI interface. This enhances engagement and interaction, making communication more efficient and user-centric. Even without the additional notification features, user mentions make an easy way for users to make clear who they are directing a message to within a group chat UI.


Notifications

Notifications are a component of Chat APIs that largely exist outside of the chat client itself. Notifications are automated messages sent to users to alert them about new messages or events within a chat application. These notifications can be in the form of push notifications on mobile devices, email alerts, or in-browser pop-ups. They serve to enhance user engagement by prompting users to return to the chat app to view new messages or to participate in ongoing conversations. Notifications are crucial for real-time communication platforms, as they ensure that information is conveyed promptly, maintaining the flow of conversation. They can be customized to user preferences, often allowing users to select the types of notifications they wish to receive and their frequency.

 

Unread message counter

An unread message counter displays the number of messages a user has not yet opened or read within a chat application or chat UI. This counter is typically visible on the chat app's icon, within the chat list, or next to individual conversation threads. It serves as a visual reminder and a call to action, prompting users to check their messages. The counter increases with each new unread message and decreases as the user reads each one. For a seamless user experience, the Chat API must accurately track message status across devices and update the count in real-time, ensuring users are always aware of their unread communications. This feature is essential for user engagement and retention, as it helps users manage their conversations and stay informed about where their attention is needed.

Status indicators

Typing indicators

Typing indicators are visual cues that inform users when someone in the chat is composing a message. These indicators often appear as a small animation, such as pulsing dots or a text label that says "typing…", near the user's name or within the chat interface. These animations are usually a chat component included in a JS Chat UI kit or React Chat UI kit. They are a real-time feature designed to enhance conversational flow by signaling that a response is forthcoming, which helps to manage expectations and maintain engagement during a live chat session. Typing indicators contribute to a more dynamic and interactive user experience, closely mimicking the nuances of face-to-face conversations where non-verbal cues indicate that someone is about to speak. The API for chat handles the logic of displaying and hiding these indicators based on user activity.


Delivery confirmation

Ever worry your message never reached its intended recipient? Delivery confirmation gives users a visual indication in the Chat UI that their message has been sent to (but not necessarily read by) other users. This feature is crucial for ensuring reliable communication, as it provides assurance that the message has reached its intended destination. Typically, this is indicated through checkmarks or some form of visual cue within the chat interface. Delivery confirmation has become a fixture in the chat UI of Javascript chat applications, react chat applications, and APIs for chat.

 

Read receipts

Like delivery notifications, read receipts are a crucial component of user feedback in a chat UX. Read receipts are acknowledgments that inform the sender when their message has been read by the recipient. This feature enhances communication by providing transparency about the message's status after delivery. In a chat interface, read receipts are often symbolized by icons or text changes, such as checkmarks turning from grey to blue or the word "Read" appearing next to the message. In group chats, a read receipt can denote which members of the chat have read a sent message, helping to delineate who know what and when they know it. Read receipts play a crucial role in managing conversation expectations and pacing, as senders can adjust their follow-up based on the recipient's awareness of the message. These must be handled in real-time, ensuring accurate and timely status reports to maintain trust and efficiency in digital communication.

Additional functionality

Video call integrations

Video call integrations allow users to seamlessly connect their Zoom, Microsoft Teams, or other video conferencing accounts with their chat application. This integration enables users to initiate video calls and share meeting links directly within the chat interface, without the need to switch between different apps or manually copy and paste links. This is a great API integration example, within the chat UI the user can click a button that allows them to generate a new meeting link. When this happens Chat API then interacts with the video conferencing service's API to create a new meeting and retrieves the meeting link. This link is automatically posted into the chat, where all participants can access it with a single click.

Attachments

Attachments in a Chat API enhance the user experience by allowing the sharing of files directly within a chat conversation. To enable this, the API may integrate with cloud storage services like Google Drive or Dropbox, allowing users to link their accounts and share files from the cloud seamlessly. This negates the need for local uploads, streamlining the sharing process. For uploading files from local storage, the Chat API can utilize a JavaScript file uploader or React file uploader. These sophisticated components offer users a smooth interface to select and upload files, often supporting features like drag-and-drop, progress indicators, and multiple file selections. Once a file is chosen, the uploader interacts with the Chat API to securely transfer the file to a server or cloud repository. The Chat UI displays a message within the chat containing a reference to the uploaded file. 


Media rich previews

Media-rich previews are visual thumbnails or media previews that provide a glimpse into the content of the file before it is opened. When a user attaches a file—be it an image, video, document, or link—the Chat API generates a preview that is displayed within the chat interface. For images and videos, the preview typically consists of a small thumbnail that can be opened into a larger image or video playback window. For documents, it might be an icon representing the file type (like PDF or Word) along with the document title, or even the text of the document. These previews are not just aesthetic; they serve a functional purpose by giving users an idea of the content without requiring them to download or open the file. 


URL previews

URL previews display a preview of the content in a link sent within a chat. They typically display the title of the web page, a brief description or excerpt of the content, and often an image that represents the linked content. The purpose of URL previews is to give users a clear idea of what the link leads to before they decide to click on it. To generate these previews, the Chat API or an associated service will fetch metadata from the linked web page, such as Open Graph tags or meta tags, which web developers use to define how URLs are displayed when shared on social media and other platforms.

prebuiltui2

We never go out of style

Our pre-built kits for various frontend frameworks let you put the you in UI

Whether you're a Javascript jockey or write in React, our UI kits give you all the chat components you need to quickly add our API in the library you love.

JS UI Kit

By far, the fastest and easiest way to add chat to your app - just style and launch it.

React UI kit

From a complete messenger experience to individual components listing conversations and more.

More UI Kits

We're constantly adding more UI kits, follow our GitHub for updates.

Ask AI
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account