Blazor chat

Build any chat use case into your Blazor app

Quickly embed a customizable chat experience into your Blazor app using the best chat APIs, feature-rich SDKs, and a highly customizable pre-built UI.
.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: #EC4899; background-color: #EC4899; color: #fff; margin-right: 0.50rem; }
Dev A
Hey, I'm trying to lift state up from a child component, but I'm getting undefined errors. Any ideas?
8m ago
You
Are you passing the state and the setState function correctly as props?
6m ago
Dev A
I think so, yes.
5m ago
ok-hand
thinking
You
Maybe you're not binding the handler in the constructor. That might be the issue.
2m ago
Dev A
typing...
just now
Write a reply...
You
Hey, I’m having trouble accessing my account. It says my password is incorrect.
5m ago
SupportBot
Hi there! No problem — let’s get that sorted. Have you tried resetting your password using the 'Forgot password?' link?
4m ago
thinking
thumbs-up
You
Yes, but I haven’t received the reset email yet.
3m ago
SupportBot
Thanks for confirming. I’ve just sent a new reset link to your email. Please check your inbox and spam folder.
2m ago
SupportBot
Is there anything else I can help you with?
just now
Got it — checking my inbox now!
Quick integration
Connect users with a fully customizable chat using our real-time messaging infrastructure that works great with your Blazor backend.
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.
Classtime
Decathlon
Riot Games
Hyundai

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.
<script> protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); // Populate users any way you prefer Me = new User() { Id = 123456, Name = "Alice", Email = new string[] { "alice@example.com" } , PhotoUrl = "https://talkjs.com/images/avatar-1.jpg", WelcomeMessage = "Hey there! How are you? :-)", }; OtherUsers = new List<User>(); OtherUsers.Add(new User() { Id = 654321, Name = "Sebastian", Email = new string[] { "sebastian@example.com" }, PhotoUrl = "https://talkjs.com/images/avatar-5.jpg", WelcomeMessage = "Hey, how can I help?", }); StateHasChanged(); } </script>
Retreat Guru logo
We were able to offload all messaging to TalkJS — hugely simplifying our development of an otherwise complex stack.
Deryk Wenaus
CTO, Retreat Guru

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.