Chat box open on click

HTML

CSS

Output

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Show and hide chat box on click</title>
</head>

<body>
    <h1 class="heading">Click on right bottom chat icon to open Chat box</h1>
    
    <div id="chat-circle" class="btn btn-raised">
        <img src="https://www.teknowize.com/attachments/file_1658874188.svg" width="24" width="24" alt="chat">
    </div>

<div class="container-fluid mt-2">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <div class="chaboxShowHide">
                    <div class="chatBox-mainDiv">
                        <div class="chatBox-head">
                            <img src="https://www.teknowize.com/attachments/file_1658873983.svg" alt="three dots">
                            <p class="m-0">Chat Box</p>
                            <img src="https://www.teknowize.com/attachments/file_1658874045.svg" alt="arrow left"
                                class="chatClsBtn">
                        </div>
                        <div class="chatboxChatDiv px-4">
                            <div class="chatboxMsgDate">
                                <div class="dateDiv">Today</div>
                            </div>
                            
                            <div class="selfMsg">
                                <p class="bold-font">How would I do that when this happens?</p>
                                <span>10:30 AM</span>
                            </div>
                            
                            <div class="otherMsg">
                                <span>10:31 AM</span>
                                <p class="bold-font">When you refer back to the generalized form, you would see that... </p>
                            </div>
                            
                            
                            <div class="selfMsg">
                                <p class="bold-font">When this generalized form appears?</p>
                                <span>10:30 AM</span>
                            </div>
                            
                            <div class="otherMsg">
                                <span>10:30 AM</span>
                                <p class="bold-font">How would I do that when this happens?</p>
                            </div>
                            
                            
                            <div class="selfMsg">
                                <p class="bold-font">How would I do that when this happens?</p>
                                <span>10:30 AM</span>
                            </div>
                            
                            <div class="otherMsg">
                                <span>10:30 AM</span>
                                <p class="bold-font">How would I do that when this happens?</p>
                            </div>
                            
                            
                            <div class="selfMsg">
                                <p class="bold-font">How would I do that when this happens?</p>
                                <span>10:30 AM</span>
                            </div>
                            
                            <div class="otherMsg">
                                <span>10:30 AM</span>
                                <p class="bold-font">Bye</p>
                            </div>
                            
                        </div>
                        <div class="chatBox-typingInput" style="position:absolute;bottom: 0px;width: 100%">
                            <div class="chatbox-send-btn"><input type="text" class="form-control" placeholder="Ask something...">
                                <img src="https://www.teknowize.com/attachments/file_1658874241.svg" width="24" width="24" alt="chat">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>

</html>

CSS

body {
            height: 100vh;
            position: relative;
            overflow: hidden;
        }
        .heading {
            color: rgb(6, 2, 114);
            text-align: center;
            padding: 3rem;
        }
        #chat-circle {
            position: fixed;
            bottom: 48px;
            right: 15px;
            background: #5A5EB9;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            padding: 5px;
            cursor: pointer;
            box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.6), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        }
        .chaboxShowHide {
            display: none;
        }
        .chatBox-mainDiv {
            position: relative;
            background: #FFFFFF;
            border: 1px solid #F0F0F0;
            height: calc(100vh - 240px);
            overflow: hidden;
            z-index: 3;
        }
        .chatBox-head {
            background: #6C63FF;
            border: 1px solid #6C63FF;
            border-radius: 0px;
            padding: 0.5rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
        }
        .chatBox-head span {
            color: white;
            font-size: 20px;
        }
        .chatClsBtn {
            cursor: pointer;
        }
        .chatboxChatDiv {
            overflow-y: auto;
            height: calc(100vh - 342px);
        }
        .chatboxChatDiv::-webkit-scrollbar {
            width: 8px;
        }
        .chatboxChatDiv::-webkit-scrollbar-thumb {
            box-shadow: inset 0 0 2px #EDEDED;
            background: #EDEDED;
            border-radius: 10px;
        }
        .chatboxMsgDate {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 1rem 0;
        }
        .chatboxMsgDate::before {
            content: '';
            width: 100%;
            height: 1px;
            background: #F0F0F0;
            position: absolute;
            display: flex;
            align-items: center;
        }
        .dateDiv {
            background: #F0F0F0;
            border-radius: 5px;
            color: #616161;
            font-size: 10px;
            padding: 0.5rem 1rem;
            z-index: 1;
        }
        .selfMsg {
            display: flex;
            align-items: end;
            margin: 1.5rem 0;
        }
        .selfMsg p {
            font-size: 14px;
            max-width: 75%;
            background: #D8EEFF;
            border-radius: 5px 5px 0px 5px;
            margin: 0;
            padding: 1rem;
            word-break: break-all;
        }
        .selfMsg span {
            font-size: 10px;
            color: #616161;
            margin: 0;
            margin-top: auto;
            margin-left: 0.5rem;
        }
        /*  */
        .otherMsg {
            display: flex;
            align-items: end;
            justify-content: end;
            margin: 1.5rem 0;
        }
        .otherMsg p {
            font-size: 14px;
            max-width: 75%;
            background: #F3F3F3;
            border-radius: 5px 5px 5px 0px;
            margin: 0;
            padding: 1rem;
            word-break: break-all;
        }
        .otherMsg span {
            font-size: 10px;
            color: #616161;
            margin: 0;
            padding: 0;
            margin-top: auto;
            margin-right: 0.5rem;
        }
        .chatBox-typingInput {
            padding: 0.5rem 1.5rem;
            background: white;
        }
        .chatbox-send-btn {
            display: flex;
            align-items: center;
            background: #F3F3F3;
            border-radius: 5px;
            padding: 0 0.3rem;
        }
        .chatbox-send-btn input {
            border: none;
            outline: none;
            box-shadow: none;
            background: none;
        }
        .chatbox-send-btn input:focus {
            outline: none;
            box-shadow: none;
            background: none;
        }
        .chatbox-send-btn input::placeholder {
            font-size: 14px;
            color: #A3A3A3;
        }
        .chatbox-send-btn img {
            cursor: pointer;
        }

Ui Code Snippets

Chat box open on click

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Chat box open on click

HTML

CSS

JS

Output

Network Marketing

SEO Course