Chat UI design using HTML and CSS | Chatbot Ui Template Html Free










Table of Contents

Chat UI design using HTML and CSS | Chatbot Ui Template Html Free




Chat UI design using HTML and CSS | Chatbot Ui Template Html Free

Learners You must have observed that on some websites after loading it, you will get a small message icon in the left button corner after clicking on it there is a popup preview for chatting with the website handler or Bot (AI).  If you don’t know just join me on this blog and make sure your finger is free for scrolling down .

Chat UI design using HTML and CSS | Chatbot Ui Template Html Free

 

Hey learners..!

 

Welcome to our today’s blog with code with random. In this blog, we gonna learn how we can design a Chatbox UI.

In this blog, we are not going to learn how it works we will just closely observe how we can design a chatbox layout or a popup layout.

Apart from this, it is another level of interaction with users. This shows a dynamic movement of the page.

I hope you must have got an idea about the project.

Let’s have a look at our project.

Chat UI design using HTML and CSS | Chatbot Ui Template Html Free

 

After clicking on the message us, the chatbox UI will popup as:
Chat UI design using HTML and CSS | Chatbot Ui Template Html Free

 

HTML SECTION

 
Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.

We have the following part in the HTML section.
First, we have div with class chat-box-header within this there is a button written text with a Message us with an icon.
Below in separate Div, there is a UI design element.
Go through the below code and run it in your IDE or where you used to design just HTML without CSS styling.

<div class="chat-box"> <div class="chat-box-header"> <h3>Message Us</h3> <p> <i class="fa fa-times"></i> </p> </div> <div class="chat-box-body"> <div class="chat-box-body-send"> <p>This is my message.</p> <span>12:00</span> </div> <div class="chat-box-body-receive"> <p>This is my message.</p> <span>12:00</span> </div> <div class="chat-box-body-receive"> <p>This is my message.</p> <span>12:00</span> </div> <div class="chat-box-body-send"> <p>This is my message.</p> <span>12:00</span> </div> <div class="chat-box-body-send"> <p>This is my message.</p> <span>12:00</span> </div> <div class="chat-box-body-receive"> <p>This is my message.</p> <span>12:00</span> </div> <div class="chat-box-body-receive"> <p>This is my message.</p> <span>12:00</span> </div> <div class="chat-box-body-send"> <p>This is my message.</p> <span>12:00</span> </div> </div> <div class="chat-box-footer"> <button id="addExtra"> <i class="fa fa-plus"></i> </button> <input placeholder="Enter Your Message" type="text"> <i class="send far fa-paper-plane"></i> </div> </div> <div class="chat-button"> <span></span> </div> <div class="modal"> <div class="modal-content"> <span class="modal-close-button">&times;</span> <h1>Add What you want here.</h1> </div> </div>

 

CSS SECTION

By CSS we will design our input tags button and will make it responsive as well.

The Below code will analyze you more. So just add in your HTML half complete file and wait to watch some magic.

@import url('https://fonts.googleapis.com/css?family=Raleway|Ubuntu&display=swap'); body{ background: #E8EBF5; padding: 0; margin: 0; font-family: Raleway; } .chat-box{ height: 90%; width: 400px; position: absolute; margin: 0 auto; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 15; box-shadow: 0 0 10px rgba(0, 0, 0, 0.005); right: 0; bottom: 0; margin: 15px; background: #fff; border-radius: 15px; visibility: hidden; &-header{ height: 8%; border-top-left-radius: 15px; border-top-right-radius: 15px; display: flex; font-size: 14px; padding: .5em 0; box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow:0 0 3px rgba(0,0,0,.2), 0 -1px 10px rgba(172, 54, 195, 0.3); box-shadow: 0 1px 10px rgba(0,0,0,0.025); & h3{ font-family: ubuntu; font-weight: 400; float: left; position: absolute; left: 25px; } & p{ float: right; position: absolute; right: 16px; cursor: pointer; height: 50px; width: 50px; text-align: center; line-height: 3.25; margin: 0; } } &-body{ height: 75%; background: #f8f8f8; overflow-y: scroll; padding: 12px; &-send{ width: 250px; float: right; background: white; padding: 10px 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.015); margin-bottom: 14px; & p{ margin: 0; color: #444; font-size: 14px; margin-bottom: .25rem; } & span{ float: right; color: #777; font-size: 10px; } } &-receive{ width: 250px; float: left; background: white; padding: 10px 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.015); margin-bottom: 14px; & p{ margin: 0; color: #444; font-size: 14px; margin-bottom: .25rem; } & span{ float: right; color: #777; font-size: 10px; } } &::-webkit-scrollbar { width: 5px; opacity: 0; } } &-footer{ position: relative; display: flex; & button{ border: none; padding: 16px; font-size: 14px; background: white; cursor: pointer; &:focus{ outline:none; } } & input{ padding: 10px; border: none; -webkit-appearance: none; border-radius: 50px; background: whitesmoke; margin: 10px; font-family: ubuntu; font-weight: 600; color: #444; width: 280px; &:focus{ outline: none; } } & .send{ vertical-align: middle; align-items: center; justify-content: center; transform: translate(0px, 20px); cursor: pointer; } } } .chat-button{ padding: 25px 16px; background: #2C50EF; width: 120px; position: absolute; bottom: 0; right: 0; margin: 15px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius: 25px; box-shadow: 0 2px 15px rgba(#2C50EF,.21); cursor: pointer; & span{ &::before{ content: ''; height: 15px; width: 15px; background: #47cf73; position: absolute; transform: translate(0, -7px); border-radius: 15px; } &::after{ content: "Message Us"; font-size: 14px; color: white; position: absolute; left: 50px; top: 18px; } } } .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; width: 24rem; border-radius: 0.5rem; } .modal-close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; } .close-button:hover { background-color: darkgray; } .show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; z-index: 30; } @media screen only and(max-width: 450px) { .chat-box{ min-width: 100% !important; } }

 

Javascript section

In the Javascript part, we haven’t used much logic just we have used onclick function in login button.

As when we’ll click on login form it will display the chatbox UI form page.

Similarly, when we will click on the cancel button it will hide.

$('.chat-button').on('click' , function(){ $('.chat-button').css({"display": "none"}); $('.chat-box').css({"visibility": "visible"}); }); $('.chat-box .chat-box-header p').on('click' , function(){ $('.chat-button').css({"display": "block"}); $('.chat-box').css({"visibility": "hidden"}); }) $("#addExtra").on("click" , function(){ $(".modal").toggleClass("show-modal"); }) $(".modal-close-button").on("click" , function(){ $(".modal").toggleClass("show-modal"); })

 

For a live preview, you can follow the below codepen…

See the Pen Chat Box UI Design by Abhishek Dana (@abhishekdana) on CodePen.

 

 

By this blog… We have learned how we can design a popup login form.

Now I’m looking for your reviews.
So, How was the blog , Learners!

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.

I hope that I’m able to make you understand this topic and you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills blogger hearts with enthusiasm for writing more and new blogs.

 

You can follow me on Instagram

 
Written by @Ankit kumar
 
Code by  @Abhishek dana
Check out more from us :
Share on:

0 thoughts on “Chat UI design using HTML and CSS | Chatbot Ui Template Html Free”

Leave a Comment