To add a chat feature to your site or app, you can use a chat API. But what exactly is a chat API, and how do you use one? This article covers the basics of what a chat API is, the main features to look for, what sort of chat API options are available, and how you can use a chat API in your site or app.

Contents

What is a chat API?

What is an API? An Application Programming Interface (API) is a way for two pieces of software to talk to each other. Think of it as a common language in a world filled with different languages—a bit like how English functions as a global language today.

Using an API can speed up your development process. APIs allow developers to use and fine-tune functions from existing software, instead of having to build components from scratch each time.

A chat API is an API that offers chat functionality. The process of sending messages may seem simple, but in reality has many moving parts. Instead of having to build a chat app yourself, a chat API allows you to simply add chat to your existing site or app.

Chat API features

Chat APIs can come with a range of different features. Depending on your use case, some of these might be more important to you than others. For example, for direct messages between buyers and sellers on a marketplace, you may have very different needs than when you offer chat alongside a livestream event.

Here’s an overview of some common features that you may want to look for in a chat API:

Feature

Why it matters

Send and receive messages 

Messaging is at the core of any chat. A chat API takes care of all the storage, databases, and servers needed to make sure that each message reaches the correct recipient—whether you have 10 or 1,000,000 users. That gives you the space to focus on other parts of your project. 

Chat UI

Strong design and UX can make all the difference to the success of your chat with users. Some chat APIs come with a pre-built chat UI, while others don’t provide any frontend at all. If you can customize the chat UI to match your brand’s look and feel, all the better.

Replies 

Keep the conversation structure clear by using replies

Voice messages

Add a personal touch with voice comments

Link previews 

Automatically generate previews for shared links


Edit messages

Change your messages after sending

Emoji reactions

React quickly to messages with expressive emojis

Mentions

Tag users with @mentions to get their attention

Typing indicators

Display who’s active in a conversation

Conversation history

Provide access to the full history of any chat 

In-conversation search

Quickly find the message you need

Online presence indicators

Display who is currently available

Read receipts

Show whether others in a conversation have read a message

Unread messages

Show unread messages in a conversation, and mark messages as unread if you need to get back to them

Location sharing

Easily share your location

Message actions

Edit, report, or delete a message to keep a conversation clean and organized

File attachments

Attach files to easily exchange full information

Rich text formatting

Format messages with strong, emphasis, strikethrough, code, as well as list formatting

Channels, groups, topics

Organize your chat into dedicated channels, groups, or topics to ensure the right users are part of the right conversations

Localization and real-time translation

Offer users the chat UI in their local language.  Support global conversations with real-time translation, so that users can always communicate in their own language.

AI integration

Make life easier with AI integration for quick responses

Analytics and moderation

Keep on top of what’s happening in your chat with analytics and moderation options. This can include the number of messages sent in a specific timeframe, the number of active users and active conversations, as well as conversation insights for moderation purposes. 

Privacy and security

To keep your app data safe and your users secure, a chat API should meet the latest privacy and security standards. 

In addition, you’d want your chat API to be:

  • Universal – Your chat feature should work regardless of which platform your user is on. A chat API should ensure universal support, and keep up with any updates for each of the different platforms supported.
  • Flexible – Your messaging needs may change over time. Maybe initially, direct messages were just fine, but you now need large group chats, file sharing, or voice messages. Chat APIs tend to be modular, which allows you to use only exactly what you need, and add features as you go along.
  • Scalable – Your number of active users may change over time. Perhaps you’ve grown significantly, or need to support a high-number of concurrent users for a specific period of time. Most chat APIs allow you to automatically scale up or down depending on what resources you need, ensuring that you only pay for what you use.

Types of chat APIs

Chat API services can be divided into broadly three categories:

Platforms

Messaging apps such as WhatsApp, WeChat, Facebook Messenger, Telegram, or Discord each provide their own API. Many of your users may already be familiar with these apps, so it might seem easy enough to use one of them for your chat. At the same time, by choosing one of these platforms you’d be handing over control over your users’ data to an external provider, which not everyone may be comfortable with. Plus, these platforms generally don’t allow for much customization to meet your specific needs and match your own brand. All of these points are worth taking into account when considering using a chat API associated with one of the established messaging platforms.

Open source

Open source chat APIs give you complete control over your chat. You can download, inspect and modify the code yourself, and share your changes with others. Often, an open source chat API can be self-hosted, giving you yet further control. That said, if you self-host you’re also responsible for managing the entire infrastructure required to operate the chat. And you’ll need to take care to keep your app updated to guard against any security threats. Individuals or teams working on open source projects may have lower capacity, so these chat APIs can also be slower to adopt new features. A pre-built chat UI isn’t always part of open source chat API offerings, which means that you’d have to do that work yourself.

Proprietary services

Proprietary chat API services can offer you a ready-to-go messaging infrastructure, combined with some of the control and customization options you can get from open source. With a proprietary chat service, hosting, security are all taken care of, while you keep control over your customer data. Some proprietary chat API services ship with pre-built UIs and extensive customization options, so you can really make it your own. Having your own chat, instead of using a third-party platform, can give your site or app that premium feel.

TalkJS is a proprietary chat API service with a range of SDKs to get you started. TalkJS also offers a complete suite of customizable pre-built UIs that you can integrate seamlessly in any chat or messaging use case.

In what follows we’ll show you how to use a chat API in your own site or app with TalkJS.

How to add a chat API to your app

You can add a full-fledged chat component to your site or web app with the TalkJS chat API, in just three basic steps. To follow along with these steps, you’ll need a TalkJS account, which is always free to try for development.

Step 1: Load TalkJS

To load TalkJS, add the following JavaScript code snippet:

<!-- minified snippet to load TalkJS without delaying your page -->
<script>
(function(t,a,l,k,j,s){
s=a.createElement('script');s.async=1;s.src='https://cdn.talkjs.com/talk.js';a.head.appendChild(s)
;k=t.Promise;t.Talk={v:3,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l
.push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]);
</script>

Step 2: Add a chat container

To add a container to display your chat, place the following code snippet in your HTML:

<!-- container element in which TalkJS will display a chat UI -->
<div id='talkjs-container' style='width: 90%; margin: 30px; height: 500px'>
    <i>Loading chat...</i>
</div>

Step 3: View a conversation

To view an existing chat conversation, add the following code to your app:

Talk.ready.then(function () {
    const me = new Talk.User('sample_user_alice');
    const talkSession = new Talk.Session({
        appId: '<APP_ID>',
        me: me,
    });

    const conversation = talkSession.getOrCreateConversation(
        'sample_conversation'
    );
    conversation.setParticipant(me);

    const chatbox = talkSession.createChatbox();
    chatbox.select(conversation);
    chatbox.mount(document.getElementById('talkjs-container'));
});

In this code snippet, replace <APP_ID> with your own app ID, which you can get directly from your TalkJS dashboard.

You should get something like the following:

A TalkJS chatbox with a single message by a user named 'Sebastian', saying: 'Hey, how can I help?'

Once you’re set up, you can customize the chat’s features and appearance to truly fit your brand. Here are some examples of the TalkJS pre-built UI, with three different customized themes:

Three windows with the TalkJS Inbox pre-built chat UI, with several conversations in each inbox. The first window is styled with a light theme, the second with a dark theme, and the third with a white-and-pink ‘dawn’ theme.

Are you working with a framework? Then you can also use one of the following dedicated getting started guides:

Final remarks

Do you want to add chat to your app or site? From the basic messaging infrastructure to security, a fully-fledged working chat has many moving parts. Building one yourself takes time, and would likely require a specialized team.

Using a chat API allows you to focus on your own site or app's core concept, while speeding up your overall time to production. Among the many categories of chat API available, proprietary services such as TalkJS offer a great mix of flexibility and ease of use, allowing you to add a complete chat with just a few lines of code.


Do you have any questions about chat APIs? We’re here to help. Get in touch.

You’ve successfully subscribed to TalkJS
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.