SaaS solutions
Add in-app chat to your SaaS product
TalkJS is a chat API with the chat UI included, so you don’t build the inbox, notifications and message history yourself. It adds chat between the people who use your product. What’s left for you is deciding which project, ticket or deal each chat belongs to, and who can join it.
import { Chatbox } from '@talkjs/react-components';
import '@talkjs/react-components/default.css';
import { getTalkSession } from '@talkjs/core';
import { useEffect } from 'react';
function Chat() {
const appId = '<APP_ID>';
const userId = 'frank';
const otherUserId = 'nina';
const conversationId = 'new_conversation';
const session = getTalkSession({ appId, userId });
useEffect(() => {
session.currentUser.createIfNotExists({ name: 'Frank' });
session.user(otherUserId).createIfNotExists({ name: 'Nina' });
const conversation = session.conversation(conversationId);
conversation.createIfNotExists();
conversation.participant(otherUserId).createIfNotExists();
}, [session, conversationId, otherUserId]);
return (
<Chatbox
style={{ width: "400px", height: "600px" }}
appId={appId}
userId={userId}
conversationId={conversationId}
/>
);
}
In-app chat or a support chat widget: which does your SaaS need?
A support chat widget connects a visitor or a customer with your own team. In-app chat connects your users with each other: teammates working on the same project, or your customer and the clients they serve in your product. If both people in the conversation are your users, you need in-app chat.
TalkJS is in-app chat. It comes with an inbox, a chat window and a popup, plus read receipts and file sharing, so a conversation in your product works like the messaging apps your users already know.
How do I keep one customer’s chats away from another’s?
Give each chat the ID of the thing it’s about. If your product has projects, tickets or deals, use the record’s ID as the conversation ID: one record, one conversation, and you can open it from the record’s own page.
The catch: record IDs are often predictable. If a user is in the chat for project 12345, they can try 12344 from their browser’s developer tools, and that project may belong to another customer. Close that gap in one of two ways:
- The quick fix is to make the ID impossible to guess: on your server, compute an HMAC of the record ID with a secret only your backend knows, and use the result as the conversation ID.
- For more control, create conversations and add participants only from your backend with the REST API, and turn off browser synchronization for conversations in the dashboard. Then a guessed ID gets nobody into a conversation.
import crypto from 'crypto';
// project.id is the record this chat is about
const conversationId = crypto
.createHmac('sha256', process.env.CONVERSATION_ID_SECRET)
.update(String(project.id))
.digest('hex');Either way, turn on authentication in your dashboard. Each user then connects with a token your server signs for their user ID, and TalkJS rejects requests without a valid one. Nobody can chat as someone else.
How do SaaS users get chat messages when they’re offline?
By email. Once a user has been offline for a while, TalkJS sends them one email for the messages they missed. You set how long it waits, up to 15 minutes. When they reply to that email, the reply shows up in the conversation, so they can answer without logging back in.
Mobile apps get push notifications, and SMS notifications are available too, charged separately.
See notifications for the settings.
<Session appId="9352938974" userId={me.id}>
<Chatbox conversationId={conversation.id}/>
</Session>How long does it take to add chat to a SaaS app?
Days, not months. Install the SDK for your framework, sign a token for each user on your server, and render an inbox or a chat window where your users need it. TalkJS has SDKs for React, Vue, Angular, Svelte, Next.js, React Native, Flutter and plain JavaScript.
Every plan includes a free development mode, so you can build and test chat in your product before you pay.
Can I sell chat to my own customers as an add-on?
Yes. Coosto, a social media management platform, built a chat widget on TalkJS that its customers add to their own websites, and sells it to them for a fixed monthly price.
You’ll also choose between one TalkJS app for everyone and one per customer. If chat is a feature inside your product, one app holds every customer account. If you resell chat, or each customer needs a TalkJS account of their own, our partner program gives you a multi-license plan to manage those accounts and their billing.
How Coosto brought communication directly into their platform
By integrating TalkJS, discover how Coosto added seamless in-platform chat, helping users collaborate more effectively while increasing the overall value and functionality of their product.
Read the full case study
Customize everything and anything
TalkJS provides prebuilt themes you can use right away or customize to match your brand’s design and user experience.
Themes give you complete control over how your chat looks and feels—from overall layout and message styling to fonts, colors, and interactive elements. You can fine-tune every visual detail, extend functionality, or design a fully bespoke chat interface.
Whether you start from a default theme or build your own, TalkJS provides a flexible foundation to create a consistent and responsive chat experience within your product.
In just a couple of days, I was demoing a fully working chat experience in our product, and the proof-of-concept took under an hour to build and integrate.
What does chat cost for a SaaS product?
We price TalkJS per monthly active user, with unlimited conversations and messages on every plan. Each user with a chat session in a month counts once, whichever customer account they belong to. Basic is $279 a month with 10,000 monthly active users included, and Growth is $569 a month with 25,000. See pricing for what each plan includes.