How To Create a Popup Chat Window With CSS?

Last Updated : 16 Aug, 2024

One of the many ways to assist your users actively is by adding a popup chat window on your website. This tutorial will walk you through the process of building a basic but useful popup chat box with HTML, CSS, and JavaScript.

Approach:

Design the layout with the "Open Chat," header, message input, and "Send" button.
Set up the HTML structure and position the chat window on the right side.
Style the chat window with CSS using colours, fonts, borders, and transitions.
Implement JavaScript to toggle chat visibility and handle message inputs.
Display messages in the chat history when the "Send" button is clicked.

Step 1: HTML Structure

Start by setting up the basic HTML structure for the chat window. This includes a button to open the chat window and the chat form itself.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup Chat Window</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <h2>Welcome to Our Support Chat</h2>
    <p>Click the button below to start chatting with us.</p>

    <!-- Button to open the chat window -->
    <button id="chatToggle" class="chat-button">Open Chat</button>

    <!-- Chat Window -->
    <div id="chatBox" class="chat-window">
        <div class="chat-header">
            <span>Chat with Support</span>
            <button class="close-button" onclick="toggleChat()">X</button>
        </div>
        <div class="chat-body">
            <textarea id="chatInput" placeholder="Type your message here..."></textarea>
        </div>
        <div class="chat-footer">
            <button class="send-button">Send</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

Step 2: Styling with CSS

After that, add the CSS to design the chat form, chat window, and open button. The chat window's attractive appearance and proper positioning will be guaranteed by the CSS.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

h2 {
    margin-bottom: 10px;
}

.chat-button {
    background-color: #28a745;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.chat-button:hover {
    background-color: #218838;
}

.chat-window {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 1000;
}

.chat-header {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-body {
    padding: 10px;
    background-color: #f9f9f9;
}

.chat-footer {
    padding: 10px;
    text-align: right;
}

.close-button {
    background: none;
    border: none;
    color: #fff;
    font-size: 2px;
}

Step 3: JavaScript Functionality

Last but not the least; use JavaScript to manage the opening and closing of the chat window. This will make sure that the chat window that is supposed to be opened and closed by the click of the respective buttons will be opened and closed.

JavaScript

document.getElementById("chatToggle").addEventListener("click", toggleChat);

function toggleChat() {
    const chatBox = document.getElementById("chatBox");
    if (chatBox.style.display === "none" || chatBox.style.display === "") {
        chatBox.style.display = "block";
    } else {
        chatBox.style.display = "none";
    }
}

document.querySelector(".send-button").addEventListener("click", function () {
    const message = document.getElementById("chatInput").value;
    if (message) {
        alert("Message sent: " + message);
        document.getElementById("chatInput").value = "";
    }
});

Output:

How to center a popup window on screen?

gmoksi039

Improve

Article Tags :

How To Create a Popup Chat Window With CSS?

Approach:

Step 1: HTML Structure

Step 2: Styling with CSS

Step 3: JavaScript Functionality

Similar Reads

Thank You!

What kind of Experience do you want to share?