Build a messaging inbox similar to Airbnb by using TalkJS
Tags: css, webdev, tutorial, javascript
Published: 2021-07-12 11:53:00

Imagine you are starting your very own marketplace start-up. Something along the lines of Airbnb. You would need a real-time chat that allows your users to talk to each other. Airbnb has a very simple and easy-to-follow interface for its chat. Why not build a lookalike of the Airbnb chat using the [TalkJS Chat API] (https://talkjs.com/)? The [Theme Editor] (https://talkjs.com/docs/Features/Themes/The_Theme_Editor.html) has just added some additional functionality which we will use to achieve a near lookalike of the Airbnb chat. Let’s get started!

## Things to do
As usual, you will need to follow the Getting Started guide to set up a basic inbox. The guide is self-explanatory and you should be up and running in no time. Once that is set up we can start styling the chat. We need to make the following changes.
+ Change header color to white (#FFF)
+ Remove avatar from the header
+ Add a faint gray border at the bottom of the header
+ Remove the desktop notifications toggle from the inbox list panel header and change its color to white
+ Add the user’s name near the avatar inside the chat
+ Add timestamp next to the user’s name
+ Change background to white for the panel footer
+ Make the message field more rounded
+ Add a couple of system messages

Login to your TalkJS account and create a new theme called ‘Airbnb’. Then select the ‘Roles’ option from the navbar and apply this theme to any of the roles that you have. We have applied it to the default role here.

## ChatHeader
The first component that we’ll edit is the ChatHeader. Remove lines 38-40. This will get rid of the avatar on the header. Now scroll down to the `.header` class and change the `background-color` to `#FFF` and add a `border-bottom` of `1px solid #F5F5F5`. After that, add a `margin-left` of `10px` for the `.content` class.
## ConversationListHeader
In this component, we first need to delete the available toggle. For that, remove line number 15. Now, in Line 16, change the content to ‘Messages’. Go to the `.toggle-label` class and add the following styles to it.
```css
font-weight: bold;
font-size: 16px;
margin-left: 10px;
```
## UserMessage
As usual, most of our changes are about the UserMessage component. Open up the component on the Theme Editor and replace lines 67-71 with the following.
```html
<div t:if="{{ conversation.others.length > 0 }}" class="message-author"
    style="color: black; font-size: 14px">
   {{ sender.name }} <span class = "time-sent"> {{ timestamp |  date: "%H:%m %p"}}</span>
</div>
```
After that, scroll down below to the `.message-row` class and add a `margin-left` and a `margin-right` of `30px` each. Delete the `.message-row.by-me` class to align all messages in the same direction. For the timestamp near the user’s name, add the following lines of code.
```css
.time-sent{
    font-weight: 100;
    font-size: 10px;
    color: #71717A;
}
```
Now, edit the `.message` class so that it looks like this.
```css
.message {
    white-space: normal;
    overflow: hidden;
    word-wrap: break-word;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
    background-color: #FFF;
    color: #000;
}
```
For the `.by-me .message` class, change the `background-color` to `#FFF` and the `color` to `#000`. You can delete the `border-color` property here as well.
## SystemMessage
![Airbnb System Messages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmoj4vjvegonlw1g4pbl.JPG)
The Airbnb chat displays messages like these when users discuss a potential property with the homeowners. Luckily, TalkJS has a SystemMessage component that lets us do the exact same thing. For this example, we will put an SVG of the Airbnb logo on our system message, but you can replace this with any logo. Add the SVG to Line 52 and move the existing contents of Line 52 to 53.

For the SVG, we add a class called logo. Then, make the following changes to the `.logo` class and the `.message` class.
```css
.logo{
    margin: 10px;
    float: left;
}
.message {
    white-space: pre-wrap;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 20rem;
    padding: 5px;
    overflow: hidden;    
    background-color: #F7F7F7;
    color: #717171;
    font-size: 11px;
    font-weight: bold;
}
```
Once these changes are made, you should have a system message that looks exactly like the one on Airbnb. But wait? How do you display system messages? For that, we need to head over to our `script.js` file and add an attribute to the conversation. The `welcomeMessages` attribute is used to display system messages in your TalkJS conversations. You can add any message that you would like to display to the user in an array of strings.
```javascript
conversation.setAttributes({
    welcomeMessages: ["To protect your payment, always communicate and pay through the Airbnb website or app", "Hosts can’t see your profile photo until after your booking is confirmed."]
})
```
## Layout
### Global
Select the global sub-section and change the font-family to "Helvetica", "Open Sans", sans-serif. Next, change the `fontSize` to `15px`. 
### Inbox conversation list panel
Head over to the Inbox conversation list panel sub-section and change the width to 100%. Change both the `maxWidth` and `minWidth` properties to `300px` each. After that change the `borderColor` to `#F5F5F5`. 
### Inbox chat panel
Set the `marginLeft` property to blank and both the `width` and `maxWidth` to `785px`. 
### Panel Header
For the Panel header, change the `backgroundColor` to `#FFF`. 
### Message field
We are almost at the end now. Select the Message field sub-section and add a `border-radius` of `30px`. Change the `borderColor` to  `#71717A` and `color` to `#000` (black). 
### Highlights
Lastly, open up the Highlights sub-section and change the `backgroundColor` to `#F7F7F7` and `color` to `#000`.
## Wrapping Up
With all of those changes made, your inbox should look something like this. If you saw the first screenshot of the Airbnb chat you will notice that our lookalike is almost identical to it. The Theme Editor is continuously growing in capabilities and giving us more and more options to tweak the theme of our TalkJS chat.

![Airbnb Chat Clone - TalkJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5km7s6zl7cyppi6fnz92.JPG)

Now, if you want the mobile view of the same chat, all you need to do is change the inbox to a chatbox in TalkJS and decrease the `width` of the chatbox to `380px`. That would look something like this.
![Airbnb Chat Clone - Mobile View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3te7flwl3i0uu2jp2ke.JPG)
That’s it for this one. Hope you had an amazing time coding up the Airbnb lookalike using the TalkJS Chat API and the Theme Editor. Until the next one, happy coding!