TypeScript
Build any chat use case into your TypeScript app
Quickly embed a customizable chat experience into your TypeScript app using the best chat APIs, feature-rich SDKs, and highly customizable components.
.message {
white-space: normal;
overflow: hidden;
border-radius: 0.75rem;
border-width: 1px;
border-style: solid;
word-wrap: break-word;
position: relative;
display: inline-block;
max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
border-color: #F2F2F2;
background-color: #F2F2F2;
color: #171717;
}
.has-avatar-spacer .message {
max-width: calc(100% - 3rem - 0.25rem - 0.25rem);
}
.by-me .message {
border-color: #3B82F6;
background-color: #3B82F6;
color: #fff;
margin-right: 0.50rem;
}
Hey, I'm trying to lift state up from a child component, but I'm getting undefined errors. Any ideas?
8m ago
Are you passing the state and the setState function correctly as props?
10m ago
I think so, yes.
7m ago
Maybe you're not binding the handler in the constructor. That might be the issue.
2m ago
Say something...
4
AI integration strategy
Andrea, Robert, Nikki, Filip
Andrea
10m ago
Hey team, how do you think we can integrate AI into our project?
Robert
8m ago
Maybe we can use AI for data analysis. It can help us find trends faster.
Nikki
7m ago
Good idea @Robert. What about automating customer support? AI chatbots could handle common queries.
Filip
2m ago
00:15
1x
Say something...
Quick integration
Connect users with a fully customizable chat using our real-time messaging infrastructure that works great with TypeScript.
Drop-in chat UI
Ship faster by using pre-built components that are highly customizable. Get up and running in just 10 minutes.
Fully-featured
All the essential messaging features you need. Replies, mentions, typing indicators, link previews, emojis, and more.
Javascript SDK for client-side integration
Use our fully-featured JavaScript SDK to integrate chat on your website or mobile app. It comes with a customizable, pre-built chat UI, so you can ship faster with less effort and maintain full control over the user experience.
REST API for server-side integration
Manage users, conversations, and messages from your backend with the TalkJS REST API. Ideal for server-side workflows and data control.
import { useCallback } from "react";
import Talk from "talkjs";
import { Session, Chatbox } from "@talkjs/react";
const onUnreads = useCallback((convs: Talk.UnreadConversation[]) => {
console.log("unreads:", convs);
}, []);
return (
<Session
appId={env.app.id}
userId="pete"
onUnreadsChange={onUnreads}>
<Chatbox conversation="workshop" className="chatbox"/>
</Session>
)
Because implementing TalkJS was as fast and easy as it was, we were able to greenlight and move this project along very quickly. Had we not chosen this path, the feature would have either been delayed, or shelved due to the resources needed to implement it.
Sean Elliot
Engineering Manager, Styleseat
Ready-made chat UI you can customize
The chat UI comes with three different layouts — that are highly customizable — which you can mix and match to suit your needs. You have complete control over the styling, the layout, and document structure of the chat messages and the possibility to show metadata.
Inbox
The TalkJS Inbox shows the chat history on the left, selected conversation on the right. It's designed to act as the messaging center of your app, usually living on its own page.
Chatbox
The TalkJS Chatbox is just the right half of the Inbox UI mode. It takes up less space and is designed to be embedded in your app near an order confirmation, a booking, or user profile.
Popup
You can also show a conversation in a popup that only shows up when the user clicks a button somewhere. When shown, the popup is positioned on the bottom right of your page.