Customization

The following example uses the chatHeaderVisible prop on the Chatbox to hide the ChatHeader component.

1import { Chatbox } from '@talkjs/react-components';
2import '@talkjs/react-components/default.css';
3
4export default function App() {
5  return (
6    <Chatbox
7      appId="<APP_ID>"
8      userId="sample_user_alice"
9      conversationId="sample_conversation"
10      chatHeaderVisible={false}
11    />
12  );
13}

For example, if you want messages sent by the current user to have an orange background that matches your brand, inspect the message element in the developer tools. You’ll get something like the following:

You can now copy the selector, and modify the properties you want. For example, add some CSS to your page to set the message background and border:

1.t-chatbox .t-theme-message[t-sender='currentUser'] .t-message-body {
2  background-color: rgb(255, 98, 0);
3  border-color: rgb(255, 98, 0);
4}

This approach works for all TalkJS React components, since they render into the regular DOM and can be styled with standard CSS overrides.

The following example shows how to create a custom ChatHeader component with a gradient background, starting from a basic chatbox setup.

1. Define a custom chat header component.
2. When rendering the chatbox, pass a theme option that contains your custom chat header. This overrides the default ChatHeader.

For example as follows:

1import { useMemo } from 'react';
2import { Chatbox } from '@talkjs/react-components';
3import '@talkjs/react-components/default.css';
4import './chat-header.css';
5
6function MyChatHeader() {
7  return <div className="my-chat-header">Welcome to the chat!</div>;
8}
9
10export default function App() {
11  // Use useMemo so the theme object stays stable between renders.
12  const theme = useMemo(
13    () => ({
14      ChatHeader: MyChatHeader,
15    }),
16    []
17  );
18
19  return (
20    <Chatbox
21      appId="<APP_ID>"
22      userId="sample_user_alice"
23      conversationId="sample_conversation"
24      theme={theme}
25    />
26  );
27}

You now have a custom chat header component for your theme. When you override a single theme component like this, all other theme components continue to use the default theme.

For a full interactive example, check out the custom ChatHeader example in the TalkJS Sandbox.

The following example assumes you've placed the theme files in a folder called my-theme.

1import { Chatbox } from '@talkjs/react-components';
2import '@talkjs/react-components/base.css';
3import './my-theme/index.css';
4import * as myTheme from './my-theme';
5
6function MyChatbox() {
7  // Now use the modified theme when rendering the chatbox.
8  return (
9    <Chatbox
10      appId="<APP_ID>"
11      theme={myTheme}
12      userId="sample_user_alice"
13      conversationId="sample_conversation"
14    />
15  );
16}

The theme folder contains a number of JavaScript files. Each of these files exports a React component that represents a part of the chat interface. You can freely modify these components or add your own to create a fully customized theme.

For example, if you want to capture clicks on a message avatar picture, you can do something like the following:

1function Chat({conversationId}) {
2  const ref = useRef();
3
4  useEffect(() => {
5    async function click(event) {
6      const target = event.target;
7      if(target.matches(".t-theme-message .t-theme-avatar")) {
8        const messageId = target
9          .closest(".t-theme-message")
10          .getAttribute("t-message-id");
11
12        console.log("Clicked on avatar for message " + messageId);
13        // Do something with messageId, for example, fetch the sender with
14        // the JavaScript Data API, or perform another action.
15      }
16    }
17    ref.current.addEventListener("click", click);
18    return () => ref.current.removeEventListener("click", click);
19  }, []);
20
21  return <Chatbox ref={ref} conversationId={...}/>;
22}