You are currently viewing Chatbot UI Template Design Using HTML And CSS

Chatbot UI Template Design Using HTML And CSS

Chatbot UI Template Design Using HTML And CSS

In this article, we create a Chatbot UI Template Design with HTML and CSS Coding. 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.

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.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

 

Chatbot UI Template Design
Chatbot UI Template Design Preview

 

Hey learners..!

Welcome to our today’s blog with code with random. In this blog, we gonna learn how we can Create Chatbot UI Template Design.

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.

Chatbot UI Template Design
Chatbot UI Template Design

 

After clicking on the message us, the chatbox UI will popup as:
Chatbot UI Template Design
Chatbot Pop Up

 

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.

Ecommerce Website Using Html Css And Javascript Source Code

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;
    }
}

 

Javascript section

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");
})

 

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.

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.

 You can follow me on Instagram
 
Written by @Ankit kumar
 
Code by  @Abhishek dana

This Post Has 0 Comments

  1. Anonymous

    ok

Leave a Reply