Implementing the TalkJS inbox as a popup in your app
TalkJs is a javascript chat API and SDK with a pre-built UI that allows developers to implement a live chat connection between users in an app.
TalkJs includes a number of great pre-built UI options that allow you to customize and implement chat the way you need in your app. It comes with three out of the box Chat UI Modes.
The Inbox: a fully built out message center that contains a conversation history
The Chatbox: a chatbox just used for a single conversation
The Popup Widget: a popup overlay for a single conversation
While working on my final project in my Flatiron curriculum, I wanted my app to have a live chat feature that allowed users to communicate. I thought the implementation would be fairly easy but quickly found that I was not able to get the chat layout the way I had envisioned. Below I want to explore my method of achieving the chat layout I had envisioned.
The Issue
I wanted my chat feature to be a popup. Great! TalkJs has a popup widget, I can just implement this and all done! The problem was that I wanted my popup to be able to house multiple conversations, similar to the Inbox feature. But the Inbox feature, had no ready-to-go popup implementation. The TalkJs Docs are great, and have many examples of ways to implement their features, but there was no exact example of how I wanted to implement this feature.
The chat feature I envisioned was a popup widget, that also contained an Inbox like feature that could show all the chats a user was engaged in, but also that inbox/popup feature would be able to start new chats from that popup when a user clicked a button on another users page to chat with them. Basically the popup chat would be a hub for all your conversations, but rather than being on a page for itself, I wanted it to always be with the user as a popup feature.
At first I did what the docs suggested. I put my Inbox on its own page, and then tried to implement a popup widget on each different users page. I then added the Popup widget to each users individual page. The problem I ran into was I was unable to swap between users. Once I had opened a popup chat with, let’s say, otherUser2, the popup would continue to be otherUser2 even if I opened the widget on another users page, passing in their user data to the widget. Now I understand there may have been a way to resolve this, but even if I got that working, it was not the feature I wanted, so I decided to scrap it. Eventually I decided that if there was no way for the popup widget that came with TalkJs to fit my needs exactly, I would create my own popup.
My Solution
The solution was fairly simple, even though it took my many hours of brainstorming, trial and error, and scouring the docs. I would create a popup of my own using CSS. And I would house the Inbox feature within that popup.
Note: I am using react with hooks, and Material UI as my CSS framework.
Material UI has components that make it easy to create popups. The first thing you need to do is create your button and popover component. If you are using custom CSS would will need to create your popover from scratch. There are many libraries and tutorials on how to do this.
For my example:
I created my button and popover components and added them to my App.js component. The main takeaway from this image is that I have a component called InboxComponent contained within this Popover. I pass in one of the prop TalkJs Inbox requires, the current user.
Here is where I deviated a bit from the normal doc examples to implement the feature I wanted. The Inbox allows you to continue conversations you or another user started with you, but there was no clear example showing how you could start a new conversation using the inbox. My solution was to pass in a prop that contained information for another user, otherUser. This prop is stored in state and is updated when the current user clicks a button to chat with another user.
I would advise looking at the docs on the implementation of the Inbox chat UI for this next section. The main difference between their example and the code I added was a conditional to check if the otherUser exist. If the other user does not exist it will just render the normal Inbox, but if the otherUser prop exist then it will start a new conversation with that user in the Inbox!
The main difference in this code compared to the example code in the docs is the addition of the conditional for the otherUser. This allowed me view my old conversations, but also start new conversations all in this component!
The last detail I will note is I added a function that would open the popup component, when you clicked on a button to chat with a new user. In the image below I have clicked on a button to chat with a new user. Notice that this conversation is not in the convo history on the left. But the current active chat box is the new user. If I decide to type to this user the conversation will be added to the left side. This is the main reason for the conditional piece of code for the other user in the InboxComponent. Without that conditional there is no way to start a chat with a new user and view the Inbox.
The tl;dr
- Create your own popup component
- Create Inbox with conditional to check if there is another user or not
- Add code to open popup and pass other users information to the Inbox component
This post is a bit long-winded, but I wanted to share my approach at implementing a popup chat hub using TalkJs. This was my naive approach at solving the problem I faced.
Resources:
