Telegram Group Join Now
Create Chatbot Template UI Using HTML And CSS
Hello Coder, Welcome to Codewithrandom Blog. In this article, we create a Chatbot Template with HTML and CSS Code. We give a complete code examination of the Chatbot UI Template Design⬇. We share the First Html Code Of the Chatbot UI Template Design and then the Css code Of the Chatbot UI Template Design.
We use a little bit of javascript in the Chatbot UI Template Design project. Because when we click on chat, the chatbot ui template opens for chatting so that’s it.
50+ HTML, CSS & JavaScript Projects With Source Code
| Code by | Abhishek Dana |
| Project Download | Link Available Below |
| Language used | HTML, CSS, and JavaScript |
| External link / Dependencies | YES |
| Responsive | YES |
ADVERTISEMENT
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.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
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.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
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 Code For Chatbot Template:-
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.
How To Create Movie App UI Using HTML & CSS
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>
Css Code For Chatbot Template:-
By CSS we will design our input tags button and will make it responsive as well.
Create A Travel/Tourism Website Using HTML and CSS
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.
Quiz App With Timer using HTML, CSS & JavaScript
.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;
}
}
}
ADVERTISEMENT
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.
ADVERTISEMENT
Create A Todo List App in HTML CSS & JavaScript
ADVERTISEMENT
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%
ADVERTISEMENT
.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;
}
}
ADVERTISEMENT
JavaScript Code For Chatbot Template:-
In the Javascript part, we haven’t used much logic just we have used onclick function in login button.
Portfolio Website Using HTML CSS And JavaScript ( Source Code)
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 chat box 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.
Final Video Output Of Chatbot Template:
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.
10+ Javascript Project Ideas For Beginners( Project Source Code)
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.
Which code editor do you use for this Chatbot UI Template Design coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
Yes!
ok