Hello Coder, Welcome to the Codewithrandom Blog. In this article, we create a Chatbot Template Using HTML and CSS. this is a free Chatbot UI Template, in this design, we have sent message ui and the coming message template.
We share the First Html Code and then the CSS code Of the Chatbot Template Design.
We use a little bit of javascript in the Chatbot Template Design project. Because when we click on chat, the chatbot ui template popups for chatting so that's why we use JS.
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.
Hey learners..!
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.
Html Chatbot Template Code:-
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 a 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">×</span>
<h1>Add What you want here.</h1>
</div>
</div>
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: 0.5em 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px rgba(0, 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, 0.015);
margin-bottom: 14px;
& p {
margin: 0;
color: #444;
font-size: 14px;
margin-bottom: 0.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, 0.015);
margin-bottom: 14px;
& p {
margin: 0;
color: #444;
font-size: 14px;
margin-bottom: 0.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, 0.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);
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;
}
}
Step1: We will first import the Google "Raleway" font using the Google import link so that we may utilise it in our chatbot's user interface.
We will now give the webpage some fundamental styling using the universal selector. We'll set the background to "light blue" using the background attribute. We will use the font-family attribute to change the font family to "Raleway" and set the padding and margin to "zero."
@import url('https://fonts.googleapis.com/css?family=Raleway|Ubuntu&display=swap');
body {
background: #E8EBF5;
padding: 0;
margin: 0;
font-family: Raleway;
}'
Step2: The height and width will be adjusted to "90%" and "400px," respectively, using the class selector (.chat-box), and the position property will be set to "absolute." We configured the overflow to be "hidden" using the overflow attribute.
.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;
}
}
}
Step3: Now we will add styling to the button using the class selector (.chart-button) . We will give a paddding of 25px and the background color is set as "dark-blue"and the width of the button is set as "120px"and the position is set as "Absolute" . Using the bottom and right property we will leave zero space from bottom and right.
Using the media query we will add responsive to the chatbot ui we will set maximum width if the screen size goes below and equal to the defined width we will change the width of the chat bot to 100%
.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 Code For Chatbot Template:-
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");
})
The chat button is given a click event at the beginning of the code.
The chat button will now be visible while the chat box is hidden.
The onclick event for the.chat-box header p element is added in the next line of code, and when it is triggered, it switches the display from block to none.
Clicking on #addExtra causes the last line of code to change visibility from hidden to visible.
The Chatbot Template will be hidden by the code when the user presses the chat button and will be revealed once more when they click the close button.
By this blog... We have learned how we can design a Chatbot Template.
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
Top comments (0)