Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a popup chat window with CSS and JavaScript?
On a website, in the bottom-right, you must have seen a popup chat windows. Can be mostly seen on website hosting websites. This allows a user to directly ask sales questions before buying the product. Such popup chat window can be easily created on a web page with CSS and JavaScript. Let us see how.
Syntax
.chat-button {
position: fixed;
bottom: value;
right: value;
display: block;
}
.chat-window {
position: fixed;
display: none;
z-index: value;
}
Create the Chat Button
First, create a button using the <button> element −
<button class="openChatBtn" onclick="openForm()">Chat</button>
Position the Chat Button
To position the chat button, use the position property with the value fixed. The right and bottom properties are used to position and place the button on bottom-right −
.openChatBtn {
background-color: rgb(123, 28, 179);
color: white;
padding: 16px 20px;
border: none;
font-weight: 500;
font-size: 18px;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
Create the Chat Window
The chat window consists of a form with a textarea for messages and buttons for sending and closing −
<div class="openChat">
<form>
<h1>Chat</h1>
<label for="msg"><b>Message</b></label>
<textarea placeholder="Type message.." name="msg" required></textarea>
<button type="submit" class="btn">Send</button>
<button type="button" class="btn close" onclick="closeForm()">Close</button>
</form>
</div>
Style the Chat Window
The position is set fixed for the chat window. The display to set to none since we don't want the chat window to be visible always. The window can be seen only when the chat button is clicked −
.openChat {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #ff08086b;
z-index: 9;
}
JavaScript Functions
Add JavaScript functions to open and close the chat window −
function openForm() {
document.querySelector(".openChat").style.display = "block";
}
function closeForm() {
document.querySelector(".openChat").style.display = "none";
}
Complete Example
Here's the complete code to create a popup chat window −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
}
* {
box-sizing: border-box;
}
.openChatBtn {
background-color: rgb(123, 28, 179);
color: white;
padding: 16px 20px;
border: none;
font-weight: 500;
font-size: 18px;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
border-radius: 5px;
}
.openChatBtn:hover {
opacity: 1;
}
.openChat {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #ff08086b;
z-index: 9;
border-radius: 10px 10px 0 0;
}
form {
max-width: 300px;
padding: 20px;
background-color: white;
}
form h1 {
margin-top: 0;
color: rgb(123, 28, 179);
}
form textarea {
width: 100%;
font-size: 16px;
padding: 15px;
margin: 5px 0 22px 0;
border: 1px solid #ccc;
font-weight: 500;
background: #f9f9f9;
color: rgb(0, 0, 0);
resize: none;
min-height: 100px;
border-radius: 4px;
}
form textarea:focus {
background-color: rgb(219, 255, 252);
outline: none;
border-color: rgb(123, 28, 179);
}
form .btn {
background-color: rgb(34, 197, 107);
color: white;
padding: 12px 20px;
font-weight: bold;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
opacity: 0.8;
border-radius: 4px;
}
form .btn:hover {
opacity: 1;
}
form .close {
background-color: #f44336;
}
</style>
</head>
<body>
<h1>Popup Chat Window Example</h1>
<p>Click the purple "Chat" button in the bottom-right corner to open the chat window.</p>
<button class="openChatBtn" onclick="openForm()">Chat</button>
<div class="openChat">
<form>
<h1>Chat</h1>
<label for="msg"><b>Message</b></label>
<textarea placeholder="Type your message here..." name="msg" required></textarea>
<button type="submit" class="btn">Send</button>
<button type="button" class="btn close" onclick="closeForm()">Close</button>
</form>
</div>
<script>
function openForm() {
document.querySelector(".openChat").style.display = "block";
}
function closeForm() {
document.querySelector(".openChat").style.display = "none";
}
</script>
</body>
</html>
A webpage displays with a purple "Chat" button fixed in the bottom-right corner. When clicked, a chat window appears with a form containing a textarea for messages and Send/Close buttons. The chat window can be closed by clicking the red "Close" button.
Conclusion
Creating a popup chat window involves using CSS position: fixed for positioning, display: none/block for visibility control, and JavaScript functions to toggle the chat window. This provides an effective way to add customer support functionality to websites.
4K+ Views
