Hello Coder , Welcome to our Codewithrandom website, Today we learn how to create a Chatbot Template Using HTML and CSS in this project we will use basic syntax and technology for your better understanding but we will try to give a fancy and modern look in this Chatbot template. like new real Chatbot so we will create also responsive bot but for only some limited answers so lets start.
Chatbot Template Using HTML and CSS
Chatbot Video Preview:-
I am going to embedding a demo for this chatbot template so, you can understand how chatbot are working and all.
100 Day , 100 HTML CSS JavaScript Projects
Live Preview Of Chatbot
In This Project I Am Linking A Live Preview Of Full Chatbot With Template So , You Can See Live By Working On It How Chatbot Are Working , When You Start The Chatbot Or Open This Project Chatbot Will Greet You And Then Respond You But Reponses Are Prewritten , Because We Are Creating Only Chatbot Template.
HTML Code
HTML code is one of the main part of our project that’s what this is necessary for providing a good structure to our template , so we can apply CSS and apply JavaScript on it. In this following html code w have a div tag with classname chat and inside the chat we have our a another div with classname chat-tittle and then we have a h1 tag with chatbot tittle and then a h2 with his name after that we used <img>
For the chatbot profile image , after that we have a another div with classname message , inside the message we have a another div with classname message_content and all and at the last we have a input type with a send button which is performed for appending message.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="chat">
<div class="chat-title">
<h1>Fabio Ottaviani</h1>
<h2>Supah</h2>
<figure class="avatar">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156381/profile/profile-80.jpg" /></figure>
</div>
<div class="messages">
<div class="messages-content"></div>
</div>
<div class="message-box">
<textarea type="text" class="message-input" placeholder="Type message..."></textarea>
<button type="submit" class="message-submit">Send</button>
</div>
</div>
<div class="bg"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.concat.min.js"></script>
</body>
</html>In this above html code we linked some extranal javascript code for accessing and manupulating of dom nd many more all details will be provided about this on javscript section which is written at last of the page.
Create Portfolio Website Using HTML and CSS (Source Code)
Css code
One of the main part of our chatbot template is css because we have to give a proper design and look on html structure so we are using ther css , in this following css code we have designed a border box with a gradient background color as a main chatbot box. After that we placed all tittle and h2 closest of image of our chatbot and then we are created a messge appending box. And at the last we designed a input box with send button.
/*--------------------
Mixins
--------------------*/
/*--------------------
Body
--------------------*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(135deg, #044f48, #2a7561);
background-size: cover;
font-family: "Open Sans", sans-serif;
font-size: 12px;
line-height: 1.3;
overflow: hidden;
}
.bg {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background: url("https://images.unsplash.com/photo-1451186859696-371d9477be93?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925") no-repeat 0 0;
filter: blur(80px);
transform: scale(1.2);
}
/*--------------------
Chat
--------------------*/
.chat {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 80vh;
max-height: 500px;
z-index: 2;
overflow: hidden;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.5);
border-radius: 20px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
/*--------------------
Chat Title
--------------------*/
.chat-title {
flex: 0 1 45px;
position: relative;
z-index: 2;
background: rgba(0, 0, 0, 0.2);
color: #fff;
text-transform: uppercase;
text-align: left;
padding: 10px 10px 10px 50px;
}
.chat-title h1, .chat-title h2 {
font-weight: normal;
font-size: 10px;
margin: 0;
padding: 0;
}
.chat-title h2 {
color: rgba(255, 255, 255, 0.5);
font-size: 8px;
letter-spacing: 1px;
}
.chat-title .avatar {
position: absolute;
z-index: 1;
top: 8px;
left: 9px;
border-radius: 30px;
width: 30px;
height: 30px;
overflow: hidden;
margin: 0;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.24);
}
.chat-title .avatar img {
width: 100%;
height: auto;
}
/*--------------------
Messages
--------------------*/
.messages {
flex: 1 1 auto;
color: rgba(255, 255, 255, 0.5);
overflow: hidden;
position: relative;
width: 100%;
}
.messages .messages-content {
position: absolute;
top: 0;
left: 0;
height: 101%;
width: 100%;
}
.messages .message {
clear: both;
float: left;
padding: 6px 10px 7px;
border-radius: 10px 10px 10px 0;
background: rgba(0, 0, 0, 0.3);
margin: 8px 0;
font-size: 11px;
line-height: 1.4;
margin-left: 35px;
position: relative;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.messages .message .timestamp {
position: absolute;
bottom: -15px;
font-size: 9px;
color: rgba(255, 255, 255, 0.3);
}
.messages .message::before {
content: "";
position: absolute;
bottom: -6px;
border-top: 6px solid rgba(0, 0, 0, 0.3);
left: 0;
border-right: 7px solid transparent;
}
.messages .message .avatar {
position: absolute;
z-index: 1;
bottom: -15px;
left: -35px;
border-radius: 30px;
width: 30px;
height: 30px;
overflow: hidden;
margin: 0;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.24);
}
.messages .message .avatar img {
width: 100%;
height: auto;
}
.messages .message.message-personal {
float: right;
color: #fff;
text-align: right;
background: linear-gradient(120deg, #248A52, #257287);
border-radius: 10px 10px 0 10px;
}
.messages .message.message-personal::before {
left: auto;
right: 0;
border-right: none;
border-left: 5px solid transparent;
border-top: 4px solid #257287;
bottom: -4px;
}
.messages .message:last-child {
margin-bottom: 30px;
}
.messages .message.new {
transform: scale(0);
transform-origin: 0 0;
-webkit-animation: bounce 500ms linear both;
animation: bounce 500ms linear both;
}
.messages .message.loading::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
display: block;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
z-index: 2;
margin-top: 4px;
-webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
border: none;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.messages .message.loading span {
display: block;
font-size: 0;
width: 20px;
height: 10px;
position: relative;
}
.messages .message.loading span::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
display: block;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
z-index: 2;
margin-top: 4px;
-webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
margin-left: -7px;
}
.messages .message.loading span::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
display: block;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
z-index: 2;
margin-top: 4px;
-webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
margin-left: 7px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
/*--------------------
Message Box
--------------------*/
.message-box {
flex: 0 1 40px;
width: 100%;
background: rgba(0, 0, 0, 0.3);
padding: 10px;
position: relative;
}
.message-box .message-input {
background: none;
border: none;
outline: none !important;
resize: none;
color: rgba(255, 255, 255, 0.7);
font-size: 11px;
height: 17px;
margin: 0;
padding-right: 20px;
width: 265px;
}
.message-box textarea:focus:-webkit-placeholder {
color: transparent;
}
.message-box .message-submit {
position: absolute;
z-index: 1;
top: 9px;
right: 10px;
color: #fff;
border: none;
background: #248A52;
font-size: 10px;
text-transform: uppercase;
line-height: 1;
padding: 6px 10px;
border-radius: 10px;
outline: none !important;
transition: background 0.2s ease;
}
.message-box .message-submit:hover {
background: #1D7745;
}
/*--------------------
Custom Srollbar
--------------------*/
.mCSB_scrollTools {
margin: 1px -3px 1px 0;
opacity: 0;
}
.mCSB_inside > .mCSB_container {
margin-right: 0px;
padding: 0 10px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: rgba(0, 0, 0, 0.5) !important;
}
/*--------------------
Bounce
--------------------*/
@-webkit-keyframes bounce {
0% {
transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
4.7% {
transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
9.41% {
transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
14.11% {
transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
18.72% {
transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
24.32% {
transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
29.93% {
transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
35.54% {
transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
41.04% {
transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
52.15% {
transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
63.26% {
transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
85.49% {
transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}
@keyframes bounce {
0% {
transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
4.7% {
transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
9.41% {
transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
14.11% {
transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
18.72% {
transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
24.32% {
transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
29.93% {
transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
35.54% {
transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
41.04% {
transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
52.15% {
transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
63.26% {
transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
85.49% {
transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}
@-webkit-keyframes ball {
from {
transform: translateY(0) scaleY(0.8);
}
to {
transform: translateY(-10px);
}
}
@keyframes ball {
from {
transform: translateY(0) scaleY(0.8);
}
to {
transform: translateY(-10px);
}
}In this CSS code, we created a message loader that looks like a bubble animation when the chatbot is preparing to send a response. The animation lets the user know that the chatbot is working to send a message.
JavaScript Code
For adding appending chats responding and many more feature we have to add JavaScript for functionality and many more, so we used external JavaScript library like jQuery for dom manipulation and many more. We are also toring some response in array because chat have to respond when user ask any message is only for demo.
var $messages = $('.messages-content'),
d, h, m,
i = 0;
$(window).load(function() {
$messages.mCustomScrollbar();
setTimeout(function() {
fakeMessage();
}, 100);
});
function updateScrollbar() {
$messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
scrollInertia: 10,
timeout: 0
});
}
function setDate(){
d = new Date()
if (m != d.getMinutes()) {
m = d.getMinutes();
$('<div class="timestamp">' + d.getHours() + ':' + m + '</div>').appendTo($('.message:last'));
}
}
function insertMessage() {
msg = $('.message-input').val();
if ($.trim(msg) == '') {
return false;
}
$('<div class="message message-personal">' + msg + '</div>').appendTo($('.mCSB_container')).addClass('new');
setDate();
$('.message-input').val(null);
updateScrollbar();
setTimeout(function() {
fakeMessage();
}, 1000 + (Math.random() * 20) * 100);
}
$('.message-submit').click(function() {
insertMessage();
});
$(window).on('keydown', function(e) {
if (e.which == 13) {
insertMessage();
return false;
}
})
var Fake = [
'Hi there, I\'m Fabio and you?',
'Nice to meet you',
'How are you?',
'Not too bad, thanks',
'What do you do?',
'That\'s awesome',
'Codepen is a nice place to stay',
'I think you\'re a nice person',
'Why do you think that?',
'Can you explain?',
'Anyway I\'ve gotta go now',
'It was a pleasure chat with you',
'Time to make a new codepen',
'Bye',
':)'
]
function fakeMessage() {
if ($('.message-input').val() != '') {
return false;
}
$('<div class="message loading new"><figure class="avatar"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156381/profile/profile-80.jpg" /></figure><span></span></div>').appendTo($('.mCSB_container'));
updateScrollbar();
setTimeout(function() {
$('.message.loading').remove();
$('<div class="message new"><figure class="avatar"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156381/profile/profile-80.jpg" /></figure>' + Fake[i] + '</div>').appendTo($('.mCSB_container')).addClass('new');
setDate();
updateScrollbar();
i++;
}, 1000 + (Math.random() * 20) * 100);
}Weather App Using HTML, CSS And JavaScript
Conclusion
In summary, this tutorial guides you through creating a stylish chatbot template using basic HTML and CSS. The project emphasizes simplicity and includes a responsive design. You can watch a video preview and see a live demonstration. The provided HTML structure, CSS styling, and JavaScript functionality are beginner-friendly. The tutorial is a helpful resource for anyone looking to build a modern chatbot template.
Thanks for visiting our website
Stay with us😊🌹
Follow on Instagram For Interesting Coding Post :- codewith_random
FAQ:-
What tools do I need to create a chatbot template using HTML and CSS?
To get started, you only need a text editor (like Notepad or VSCode) and a web browser. These tools will be sufficient for coding and previewing your chatbot template.
Can I customize the chatbot’s appearance to match my website’s style?
Absolutely! customize the HTML and CSS to suit your preferences and integrate the chatbot seamlessly with your website’s design.
Is JavaScript required for creating the chatbot template?
No, javscript is not required for creting cghatbot we added for functioanlity like real chatbot exprience
