 platform](https://res.cloudinary.com/practicaldev/image/fetch/s--ggYGk1kR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlwbw328hnjxmtkq8nhx.png)
Text messaging, or as it is mostly called texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.
Nowadays, everyone composes text messages, most times through messaging apps like WhatsApp, Messager, and Telegram. In fact, most if not all social media platforms have in-built messaging features.
It is becoming a trend that, websites like e-commerce platforms, and most Software as a Service platforms also have this feature. They usually use it for Customer service, where they provide assistance to customers in need. In tech, we call it, a ChatBox.
A chatbox is a system for messaging with visitors integrated into a business site. It is easily customized to start, automate and integrate personalized conversations across various channels.
You can ask live chat questions or provide requests, and it will reply and take action. A chat widget can be dispatched in practically all chat applications. A lot of apps use it now and people clearly understand that chats are future marketing.
Knowing how to build such software will be pretty cool for your portfolio trust me.
In this section, we are going to focus just on the UI, that's the User Interface. Yes! No functionalities at all.
In subsequent tutorial, We will add some cool functionalities to it.
Let's ride on and build that beauty.
Understanding the Task
It’s important to divide your work or design into different parts, I always do that, it helps me break it down into smaller components that I can easily build, then join them all together to form the bigger component.
if you are used to my post, you surely know I call it the “Divide and Conquer “ approach😉. But In this case, we will divide it into two sections.
Pretty much like this
For the sake of easy identification, we are going to call them
Chatbox-header
Chatbox-body
Now that we have our small sections, let's get into our editor, and build this art
Structure of Code
The root code of almost all components is almost always the same, just that their structure differs as you build it up.
This is how my base looks like
<body>
<!-- First Layer -->
<div>
<!-- Second Layer -->
<div>
<!-- Chatbox-header -->
<div></div>
<!-- Chatbox-body -->
<div></div>
</div>
</div>
</body>
Chatbox-header
As earlier agreed, we will reference the different parts as Chatbox-header and Chatbox-body.
Let’s build up this Chatbox-header 👨💻
<!--Second Layer -->
<div>
<!--Chatbox-header -->
<div class="flex gap-3 flex-wrap py-3 px-4 bg-cyan-400 rounded-t-md">
<!--Group of Images -->
<div class="flex items-center [&>*]:w-[2.7rem] [&>*]:h-[2.7rem] [&>*]:rounded-full [&>*]:bg-rose-400 [&>*]:p-0.5 [&>*]:-ml-2 [&>*:hover]:z-20 [&>*:hover]:scale-105 [&>*>img]:h-full [&>*>img]:w-full [&>*>img]:rounded-full [&>*>img]:object-cover transition-all duration-300">
<!--Image 1 -->
<div>
<img src="https://pbs.twimg.com/profile_images/727559320729059329/ERfjehCz_400x400.jpg" alt="">
</div>
<!--Image 2 -->
<div>
<img src="https://pbs.twimg.com/profile_images/1397151839850729475/1FvqSN6H_400x400.jpg" alt="">
</div>
<!--Image 3 -->
<div>
<img src="https://blizz.co.ug/images/artists/06409663226af2f3114485aa4e0a23b4.jpg" alt="">
</div>
</div>
<!--Names and description -->
<div class="text-white">
<h2 class="mb-1 font-semibold">Elnora, Leila, Lucinda </h2>
<p class="text-xs">We typically reply in few minutes</p>
</div>
</div>
</div>
For a header, the code is quite bulky 😅. Let's understand this together.
In this section, we split it into 2, a group of image icons, and the Names and descriptions next to them.
-
Group of images: This part can be summarised by just
[&>*]If we understand what this property does, then we understood the code already.
The property [&>*] simply means “select each child individually”, this allows us to apply the same styling properties to all the immediate children.
Now that we know what it does, let's go through the different properties used here.
To each child, we gave it a width of w-[2.7rem], the same as the height h-[2.7rem], we also gave it a border-radius of rounded-full, padding of p-0.5, transform property of scale-105 on hover and a margin-left of -ml-2 to make them stack on top of each other.
We also use a similar approach to select the images inside their containers. This was achieved using [&>*>img]. In English it can be translated as, *for every immediate child, select the image within it (*Is tailwindcss, not wonderful 😍).
For each of these images, we gave them a width and height of w-full and h-full respectively, made them responsive with object-cover and rounded with border-radius of rounded-full
-
Name and descriptions: There is nothing complex here to understand, we just gave the text some
font-sizeandfont-weight. To give some space between the two we add amargin-bottomofmb-1
The container holding both of this Group of images and Names and descriptions, we made it a flexbox by adding flex property, added a background-color of bg-cyan-400
If everything was done perfectly, we will obtain something like this
Beautiful already, isn't it?😍
Chatbox-body
Similar to the header, this section isn't difficult at all, and even if it was, we will cook it together 😉.
<!-- Chatbox-body -->
<div class="bg-slate-800 h-[29rem] relative">
<!-- Chatbox-body message-box-->
<div class="px-4 py-8">
<div class="flex gap-3">
<!-- Icon image -->
<div class="w-12 h-12 rounded-full bg-rose-400 p-0.5">
<img src="https://pbs.twimg.com/profile_images/1397151839850729475/1FvqSN6H_400x400.jpg" alt="" class="h-full w-full object-cover rounded-full">
</div>
<!-- Text Message -->
<div class="text-sm p-5 w-[75%] bg-slate-600 text-slate-100 rounded-lg relative before:absolute before:content-[''] before:w-3 before:h-3 before:bg-slate-600 before:rotate-45 before: before:-left-1 before:top-4">
<p>Hi There!</p>
<p>Looking to get Started? I can help answer to your personal questions!</p>
</div>
</div>
</div>
This section doesn't require much explanation. I want to take our attention to the Text message box. You might have noticed that we can use the property before, this was to create the tooltip-like arrow that is pointing toward the icon image on the text message box.
Here is what you will get in this section
Now let's terms and conditions component at the bottom of the Chatbox-body
<!-- Chatbox-body -->
<div class="bg-slate-800 h-[29rem] relative">
<!-- Chatbox-body message-box-->
<div class="px-4 py-8">
<div class="flex gap-3">
<!-- Icon image -->
<div class="w-12 h-12 rounded-full bg-rose-400 p-0.5">
<img src="https://pbs.twimg.com/profile_images/1397151839850729475/1FvqSN6H_400x400.jpg" alt="" class="h-full w-full object-cover rounded-full">
</div>
<!-- Text Message -->
<div class="text-sm p-5 w-[75%] bg-slate-600 text-slate-100 rounded-lg relative before:absolute before:content-[''] before:w-3 before:h-3 before:bg-slate-600 before:rotate-45 before: before:-left-1 before:top-4">
<p>Hi There!</p>
<p>Looking to get Started? I can help answer to your personal questions!</p>
</div>
</div>
<!-- Terms and Conditions-->
<div class="text-slate-100 text-sm px-5 py-8 bg-slate-600 rounded-b-md absolute bottom-0">
<p class="w-[98%] mb-3">
By using the chat, I confirm I have read the
<span class="text-cyan-500 underline cursor-pointer hover:no-underline">privacy policy</span> and do not object the use of personal data.
</p>
<div class="w-fit px-6 py-2 cursor-pointer rounded-full border border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:text-slate-100 active:scale-95 transition duration-300">
<h2>I agree</h2>
</div>
</div>
</div>
And that's done 😎✌️
This completes this section.
We just built a Chatbox Component 🤩. And I bet you realized it was very easy than we thought in the beginning 😏.
WAIT a minute, Looks like we forgot something 🤔. Ooh! Yeah, we forgot that exit button at the bottom of the Component.
Let's add it too.
For this component, we are going to put it right at the button. We are also going to add some styling to the Chatbox, and the body, so as to center our component and of course make it beautiful.
<body class="bg-slate-900 flex items-center justify-center min-h-screen">
<!-- First Layer -->
<div class="w-[22rem] sm:w-[25rem] rounded-md px-2">
<!-- Second Layer -->
<div class="relative">
<!-- Chatbox-header -->
<div></div>
<!-- Chatbox-body -->
<div></div>
<!-- Exit button -->
<div class="w-12 h-12 rounded-full flex items-center justify-center bg-cyan-400 text-white cursor-pointer absolute right-4 -bottom-14 sm:-right-14 sm:bottom-0 z-20">
<p class="text-3xl"> × </p>
</div>
</div>
</div>
</body>
Now we can say we are done.
Conclusion
We just built a fully responsive Chatbox component. Isn't it amazing? We did all of this without any stress and without leaving our HTML file.
Right Now, you should be proud of yourself, trust me.
In the future, we will make this fully functional with some Javascript.
You can have a Live preview on Codepen or find the code on GitHub
Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additional component and styling you added to your Chatbox.
If you have any worries or suggestions, don’t hesitate to bring them up! 😊
See ya! 👋
Top comments (0)