You can easily customize (or omit entirely) the chat headers that TalkJS provides out the box. This opens up the possibility to create a completely new header element for your TalkJS UIs and include custom content in them such as product/order information, additional user information or something different altogether.

Removing the default header

To remove the default Chatbox header, simply create a chatbox as you normally would do, but also pass in the optional chatboxOptions object and set showChatHeader to false as shown below.

var chatbox = talkSession.createChatbox(conversation, {
    // Don't use the default header provided by TalkJS
    showChatHeader: false,
});

Although the above example uses the Chatbox, the header for the Inbox and Popup UI can similarly be removed.

Creating a custom header

To create a custom header start by moving the div where TalkJS is mounted to inside a new container div which we'll call chatbox-container. This div will be responsible for holding the custom header and the conversation UI. Next, add another div which we'll call chatbox-header to be used for our custom header, as shown in the example below.

<!-- Container element for all TalkJS UI elements -->
<div class="chatbox-container">

    <!-- Custom TalkJS chat header -->
    <div class="chatbox-header">

    </div>

    <!-- container element in which TalkJS will display a chat UI -->
    <div id="talkjs-container" style="height: 500px"><i>Loading chat...</i></div>
</div>

Now you can style the new custom-header as you wish or add additional features! For a full example implementation of using custom header see our how-to blog post.

Alternatively, if you would like to customize the conversation UI in addition to the header, you can read how to do this by viewing the blog post or documentation on themes. As always, do get in touch with us through live chat or send us an email if you need help with anything TalkJS related!