React widget

React chat widget you can easily embed into any website or app

With a TalkJS React widget you can take frontend development out of the equation. Get going with the default widget, or customize the design to fit your app.

Try for free Contact sales

import Talk from 'talkjs';
import { useCallback } from 'react';

function Chat() {
  const syncUser = useCallback(
    () =>
      new Talk.User({
        id: 'nina',
        name: 'Nina',
        email: 'nina@example.com',
        photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
        welcomeMessage: 'Hi!',
      }),
    []
  );

  return (
    <Session appId="tPKdyezd" syncUser={syncUser}>
      // UI component will go here...
    </Session>
  );
}

export default Chat;

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?

6m ago

I think so, yes.

5m ago

Maybe you're not binding the handler in the constructor. That might be the issue.

2m ago

typing...

just now

Write a reply...

Hey, I’m having trouble accessing my account. It says my password is incorrect.

5m ago

Hi there! No problem — let’s get that sorted. Have you tried resetting your password using the 'Forgot password?' link?

4m ago

Yes, but I haven’t received the reset email yet.

3m ago

Thanks for confirming. I’ve just sent a new reset link to your email. Please check your inbox and spam folder.

2m ago

Is there anything else I can help you with?

just now

Got it — checking my inbox now!

Integrate the React widget with just a few lines of code

You just need to tell us which conversation to display, who's chatting, and where to show it on the page. We take care of the rest! And if you want a deeper integration, we have all the APIs you'll need to add functionality or integrate into your own systems.

Getting started guide

import { Session, Chatbox } from "@talkjs/react";

<Session appId="t824ba8" userId="pete">
  <Chatbox conversation="workshop" className="chatbox"/>
</Session>

.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: #171717;
  background-color: #171717; 
  color: #fff;
  margin-right: 0.50rem;
}

Hey, have you heard about these micro communities people are joining?

8m ago

Yeah, I have! They seem like a great alternative to big social media platforms.

7m ago

Definitely. I joined one for local gardening enthusiasts. It's so much more engaging.

6m ago

That's cool. I've been looking to cut down my social media time. How do you like it?

2m ago

I love it. More meaningful interactions.

just now

I'll start looking into it!

Customize the chat widget design

You can customize the chat UI with HTML and CSS to exactly meet your needs. With TalkJS Themes you have complete control over the styling, layout, and document structure of the chat messages. You can even show metadata.

Explore our themes

Essential features, out-of-the-box

Replies

Voice messages

Mentions

Emoji reactions

Link previews

Edit messages

Private 1-1 chat

Group chat

Large public group chat

AI chatbot integration

Notifications

Threads

Read receipts

Message search

Conversation search

Persistent message history

File sharing

Media attachments

Typing indicator

Message translation

Announcements

Admin messages

Moderation

Mute user in channel

Ban user

Block user

Flag messages

Profanity filter

Spam protection

Domain filter

Silent messages

Location sharing

Presence indicators

Unread message count

Custom message actions

Custom message types

Analytics

Data export

Third-party integrations

Voice and video call integration

Webhooks

Multi-tenancy support

User roles

Channel list

React chat widget you can easily embed into any website or app

Integrate the React widget with just a few lines of code

Customize the chat widget design

Essential features, out-of-the-box

Ready to get started?

Let's talk