How to Create WhatsApp Web UI Clone Using HTML, CSS & JavaScript

By Piyush Gupta

Creating a WhatsApp Web UI clone using HTML, CSS, and JavaScript involves replicating the user interface and some basic functionalities. Below is a guide to help you get started:

HTML Structure:

Create an index.html file with the following content:

<!DOCTYPE html>

<head>

<title>WhatsApp</title>

</head>

<body>

<main>

<a href="#">New group</a>

<a href="#">New community</a>

<a href="#">Archived</a>

<a href="#">Starred messages</a>

<a href="#">Select chats</a>

<a href="#">Settings</a>

</div>

</header>

</form>

<div>

Computer not connected

</div>

<span>

Make sure your computer has an active Internet connection

</span>

</div>

<span>Friends

</span>

<span>Tuesday</span>

</div>

<span>You: hey there! how are you?</span>

</span>

</div>

<span>Family</span>

</div>

<span>Papa: You gotta be kidding me</span>

</span>

</div>

<span>Amor

</span>

<span>Saturday</span>

</div>

<span>You do not understand what I'm </span>

</span>

</div>

<span>Saturday</span>

</div>

<span>Reply in group fast</span>

</span>

</div>

</section>

</aside>

<h3>Friends

</h3>

<div class="info">You and 69 others</div>

</div>

<a href="#">Contact info</a>

<a href="#">Select messages</a>

<a href="#">Close chat</a>

<a href="#">Mute notifications</a>

<a href="#">Disappearing messages</a>

<a href="#">Clear messages</a>

<a href="#">Delete chat</a>

<a href="#">Report</a>

<a href="#">Block</a>

</div>

</header>

03/05/2023

</span>

</div>

<div class="chat-message-sender">Kshitiz</div>

Hey there, how are you doing?

</div>

</a>

</a>

</a>

</div>

Are you up to some fun this weekend?

</div>

I'm thinking of going to the beach

</div>

Sure man

</div>

</a>

</a>

</a>

</div>

When are you free? Let's meet at the cafe first.

</div>

<input type="search" name="message" id="compose-chat-box" placeholder="Type a message"

autocomplete="off">

</footer>

<a class="scroll-to-top-button" href="#"><img src="icons/arrow-down.svg" alt=""

class="icon scroll-to-top-button-icon" height=""></a>

</section>

</main>

</body>

</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"> <title>WhatsApp</title> <link rel="stylesheet" href="styles/core.css"> <link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/sidebar.css"> <link rel="stylesheet" href="styles/chat-window.css"> <link rel="stylesheet" href="styles/chat-tile.css"> <link rel="stylesheet" href="styles/chat-message.css"> </head> <body> <main>  <aside id="sidebar"> <header id="sidebar-header"> <img src="https://picsum.photos/id/10/50" alt="" class="avatar" id="profile-image"> <div class="toolbar"> <img src="icons/communities.svg" alt="" class="icon"> <img src="icons/status.svg" alt="" class="icon"> <img src="icons/new-chat.svg" alt="" class="icon"> <div class="dropdown"> <img src="icons/menu.svg" alt="" class="icon dropdown-button"> <div class="dropdown-content"> <a href="#">New group</a> <a href="#">New community</a> <a href="#">Archived</a> <a href="#">Starred messages</a> <a href="#">Select chats</a> <a href="#">Settings</a> <a href="#">Log out</a> </div> </div> </div> </header> <form id="search-toolbar"> <input type="search" name="" id="search-input" placeholder="Search or start a new chat"> <img src="icons/filter.svg" alt="" class="icon"> </form> <div class="connectivity-notification"> <img src="icons/warning.svg" alt="Offline warning"> <div> <div class="connectivity-notification-title"> Computer not connected </div> <span> Make sure your computer has an active Internet connection </span> </div> </div> <section id="sidebar-contents"> <div id="chats-list"> <div class="chat-tile"> <img src="https://picsum.photos/id/103/50" alt="" class="chat-tile-avatar"> <div class="chat-tile-details"> <div class="chat-tile-title"> <span>Friends

</span> <span>Tuesday</span> </div> <div class="chat-tile-subtitle"> <span>You: hey there! how are you?</span> <span class="chat-tile-menu"> <img src="icons/pin.svg" alt="" class="pin"> </span> </div> </div> </div> <div class="chat-tile"> <img src="https://picsum.photos/id/104/50" alt="" class="chat-tile-avatar"> <div class="chat-tile-details"> <div class="chat-tile-title"> <span>Family</span> <span>10:34 Pm</span> </div> <div class="chat-tile-subtitle"> <span>Papa: You gotta be kidding me</span> <span class="chat-tile-menu"> <img src="icons/pin.svg" alt="" class="pin"> </span> </div> </div> </div> <div class="chat-tile"> <img src="https://picsum.photos/id/106/50" alt="" class="chat-tile-avatar"> <div class="chat-tile-details"> <div class="chat-tile-title"> <span>Amor

</span> <span>Saturday</span> </div> <div class="chat-tile-subtitle"> <span>You do not understand what I'm </span> <span class="chat-tile-menu"> <img src="icons/pin.svg" alt="" class="pin"> </span> </div> </div> </div> <div class="chat-tile"> <img src="https://picsum.photos/id/110/50" alt="" class="chat-tile-avatar"> <div class="chat-tile-details"> <div class="chat-tile-title"> <span>John</span> <span>Saturday</span> </div> <div class="chat-tile-subtitle"> <span>Reply in group fast</span> <span class="chat-tile-menu"> <img src="icons/pin.svg" alt="" class="pin"> </span> </div> </div> </div> </div> </section> </aside>   <section id="chat-window"> <header id="chat-window-header"> <img src="https://picsum.photos/id/103/50" alt="" class="avatar" id="profile-image"> <div id="active-chat-details"> <h3>Friends

</h3> <div class="info">You and 69 others</div> </div> <img src="icons/search.svg" alt="" class="icon"> <div class="dropdown"> <img src="icons/menu.svg" alt="" class="icon dropdown-button"> <div class="dropdown-content contact-menu"> <a href="#">Contact info</a> <a href="#">Select messages</a> <a href="#">Close chat</a> <a href="#">Mute notifications</a> <a href="#">Disappearing messages</a> <a href="#">Clear messages</a> <a href="#">Delete chat</a> <a href="#">Report</a> <a href="#">Block</a> </div> </div> </header> <div id="chat-window-contents"> <div class="datestamp-container"> <span class="datestamp"> 03/05/2023 </span> </div>  <div class="chat-message-group"> <img src="https://picsum.photos/50" alt="" class="chat-message-avatar"> <div class="chat-messages"> <div class="chat-message-container"> <div class="chat-message chat-message-first"> <div class="chat-message-sender">Kshitiz</div> Hey there, how are you doing? <span class="chat-message-time">7:22 am</span> </div> <div class="emoji-toolbar"> <img src="icons/emoji.svg" alt="" class="icon reaction-button"> <div class="reaction-emoji-selector"> <a href="#" class="icon">

</a> <a href="" class="icon">

</a> <a href="" class="icon"></a> <a href="" class="icon"></a> <a href="" class="icon"></a> </div> </div> </div> <div class="chat-message"> Are you up to some fun this weekend? <span class="chat-message-time">7:22 am</span> </div> <div class="chat-message"> I'm thinking of going to the beach <span class="chat-message-time">7:23 am</span> </div> </div> </div>  <div class="chat-message-group"> <img src="https://picsum.photos/id/102/50" alt="" class="chat-message-avatar"> <div class="chat-messages"> <div class="chat-message-container"> <div class="chat-message chat-message-first"> <div class="chat-message-sender">John</div> Sure man <span class="chat-message-time">7:30 am</span> </div> <div class="emoji-toolbar"> <img src="icons/emoji.svg" alt="" class="icon reaction-button"> <div class="reaction-emoji-selector"> <a href="#" class="icon">

</a> <a href="" class="icon">

</a> <a href="" class="icon"></a> <a href="" class="icon"></a> <a href="" class="icon"></a> </div> </div> </div> <div class="chat-message"> When are you free? Let's meet at the cafe first. <span class="chat-message-time">7:30 am</span> </div> </div> </div> </div> <footer id="chat-window-footer"> <img src="icons/emoji.svg" alt="" class="icon"> <img src="icons/attachment.svg" alt="" class="icon"> <input type="search" name="message" id="compose-chat-box" placeholder="Type a message" autocomplete="off"> <img src="icons/mic.svg" alt="" class="icon"> </footer> <a class="scroll-to-top-button" href="#"><img src="icons/arrow-down.svg" alt="" class="icon scroll-to-top-button-icon" height=""></a> </section>  </main>  <script src="scripts/scroll-to-top.js"></script> <script src="scripts/check-connectivity.js"></script> </body> </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">
    <title>WhatsApp</title>


    <link rel="stylesheet" href="styles/core.css">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/sidebar.css">
    <link rel="stylesheet" href="styles/chat-window.css">
    <link rel="stylesheet" href="styles/chat-tile.css">
    <link rel="stylesheet" href="styles/chat-message.css">

</head>

<body>
    <main>

        <!-- Sidebar -->
        <aside id="sidebar">
            <header id="sidebar-header">
                <img src="https://picsum.photos/id/10/50" alt="" class="avatar" id="profile-image">
                <div class="toolbar">
                    <img src="icons/communities.svg" alt="" class="icon">
                    <img src="icons/status.svg" alt="" class="icon">
                    <img src="icons/new-chat.svg" alt="" class="icon">
                    <div class="dropdown">
                        <img src="icons/menu.svg" alt="" class="icon dropdown-button">
                        <div class="dropdown-content">
                            <a href="#">New group</a>
                            <a href="#">New community</a>
                            <a href="#">Archived</a>
                            <a href="#">Starred messages</a>
                            <a href="#">Select chats</a>
                            <a href="#">Settings</a>
                            <a href="#">Log out</a>
                        </div>
                    </div>
                </div>
            </header>
            <form id="search-toolbar">
                <input type="search" name="" id="search-input" placeholder="Search or start a new chat">
                <img src="icons/filter.svg" alt="" class="icon">
            </form>
            <div class="connectivity-notification">
                <img src="icons/warning.svg" alt="Offline warning">
                <div>
                    <div class="connectivity-notification-title">
                        Computer not connected
                    </div>
                    <span>
                        Make sure your computer has an active Internet connection
                    </span>
                </div>
            </div>
            <section id="sidebar-contents">
                <div id="chats-list">
                    <div class="chat-tile">
                        <img src="https://picsum.photos/id/103/50" alt="" class="chat-tile-avatar">
                        <div class="chat-tile-details">
                            <div class="chat-tile-title">
                                <span>Friends </span>
                                <span>Tuesday</span>
                            </div>
                            <div class="chat-tile-subtitle">
                                <span>You: hey there! how are you?</span>
                                <span class="chat-tile-menu">
                                    <img src="icons/pin.svg" alt="" class="pin">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="chat-tile">
                        <img src="https://picsum.photos/id/104/50" alt="" class="chat-tile-avatar">
                        <div class="chat-tile-details">
                            <div class="chat-tile-title">
                                <span>Family</span>
                                <span>10:34 Pm</span>
                            </div>
                            <div class="chat-tile-subtitle">
                                <span>Papa: You gotta be kidding me</span>
                                <span class="chat-tile-menu">
                                    <img src="icons/pin.svg" alt="" class="pin">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="chat-tile">
                        <img src="https://picsum.photos/id/106/50" alt="" class="chat-tile-avatar">
                        <div class="chat-tile-details">
                            <div class="chat-tile-title">
                                <span>Amor </span>
                                <span>Saturday</span>
                            </div>
                            <div class="chat-tile-subtitle">
                                <span>You do not understand what I'm </span>
                                <span class="chat-tile-menu">
                                    <img src="icons/pin.svg" alt="" class="pin">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="chat-tile">
                        <img src="https://picsum.photos/id/110/50" alt="" class="chat-tile-avatar">
                        <div class="chat-tile-details">
                            <div class="chat-tile-title">
                                <span>John</span>
                                <span>Saturday</span>
                            </div>
                            <div class="chat-tile-subtitle">
                                <span>Reply in group fast</span>
                                <span class="chat-tile-menu">
                                    <img src="icons/pin.svg" alt="" class="pin">
                                </span>
                            </div>
                        </div>
                    </div>


                </div>
            </section>
        </aside>
        <!-- Sidebar ends -->

        <!-- Chat window -->
        <section id="chat-window">
            <header id="chat-window-header">
                <img src="https://picsum.photos/id/103/50" alt="" class="avatar" id="profile-image">
                <div id="active-chat-details">
                    <h3>Friends </h3>
                    <div class="info">You and 69 others</div>
                </div>
                <img src="icons/search.svg" alt="" class="icon">
                <div class="dropdown">
                    <img src="icons/menu.svg" alt="" class="icon dropdown-button">
                    <div class="dropdown-content contact-menu">
                        <a href="#">Contact info</a>
                        <a href="#">Select messages</a>
                        <a href="#">Close chat</a>
                        <a href="#">Mute notifications</a>
                        <a href="#">Disappearing messages</a>
                        <a href="#">Clear messages</a>
                        <a href="#">Delete chat</a>
                        <a href="#">Report</a>
                        <a href="#">Block</a>
                    </div>
                </div>
            </header>
            <div id="chat-window-contents">

                <div class="datestamp-container">
                    <span class="datestamp">
                        03/05/2023
                    </span>
                </div>
                <!-- Message group 1 -->
                <div class="chat-message-group">
                    <img src="https://picsum.photos/50" alt="" class="chat-message-avatar">
                    <div class="chat-messages">
                        <div class="chat-message-container">
                            <div class="chat-message chat-message-first">
                                <div class="chat-message-sender">Kshitiz</div>
                                Hey there, how are you doing?
                                <span class="chat-message-time">7:22 am</span>
                            </div>
                            <div class="emoji-toolbar">
                                <img src="icons/emoji.svg" alt="" class="icon reaction-button">
                                <div class="reaction-emoji-selector">
                                    <a href="#" class="icon"></a>
                                    <a href="" class="icon"></a>
                                    <a href="" class="icon"></a>
                                    <a href="" class="icon"></a>
                                    <a href="" class="icon"></a>
                                    <a href="" class="icon"></a>
                                </div>
                            </div>
                        </div>
                        <div class="chat-message">
                            Are you up to some fun this weekend?
                            <span class="chat-message-time">7:22 am</span>
                        </div>
                        <div class="chat-message">
                            I'm thinking of going to the beach
                            <span class="chat-message-time">7:23 am</span>
                        </div>
                    </div>
                </div>
                <!-- Message group 2 -->
                <div class="chat-message-group">
                    <img src="https://picsum.photos/id/102/50" alt="" class="chat-message-avatar">
                    <div class="chat-messages">
                        <div class="chat-message-container">
                            <div class="chat-message chat-message-first">
                                <div class="chat-message-sender">John</div>
                                Sure man
                                <span class="chat-message-time">7:30 am</span>
                            </div>
                            <div class="emoji-toolbar">
                                <img src="icons/emoji.svg" alt="" class="icon reaction-button">
                                <div class="reaction-emoji-selector">
                                    <a href="#" class="icon"></a>
                                    <a href="" class="icon"></a>
                                    <a href="" class="icon"></a>
                                    <a href="" class="icon"></a>
                                    <a href="" class="icon"></a>
                                    <a href="" class="icon"></a>
                                </div>
                            </div>
                        </div>
                        <div class="chat-message">
                            When are you free? Let's meet at the cafe first.
                            <span class="chat-message-time">7:30 am</span>
                        </div>

                    </div>
                </div>


            </div>
            <footer id="chat-window-footer">
                <img src="icons/emoji.svg" alt="" class="icon">
                <img src="icons/attachment.svg" alt="" class="icon">
                <input type="search" name="message" id="compose-chat-box" placeholder="Type a message"
                    autocomplete="off">
                <img src="icons/mic.svg" alt="" class="icon">
            </footer>
            <a class="scroll-to-top-button" href="#"><img src="icons/arrow-down.svg" alt=""
                    class="icon scroll-to-top-button-icon" height=""></a>
        </section>
        <!-- Chat window ends -->

    </main>

    <!-- Import Scripts -->
    <script src="scripts/scroll-to-top.js"></script>
    <script src="scripts/check-connectivity.js"></script>
</body>

</html>

check-connectivity.js

const connectivityNotification = document.getElementsByClassName(

"connectivity-notification"

)[0];

connectivityNotification.classList.add("hidden");

window.addEventListener("online", () => {

connectivityNotification.classList.add("hidden");

console.log(connectivityNotification.classList);

console.log("online");

});

window.addEventListener("offline", () => {

connectivityNotification.classList.remove("hidden");

console.log("offline");

});

const connectivityNotification = document.getElementsByClassName( "connectivity-notification" )[0]; connectivityNotification.classList.add("hidden"); window.addEventListener("online", () => { connectivityNotification.classList.add("hidden"); console.log(connectivityNotification.classList); console.log("online"); }); window.addEventListener("offline", () => { connectivityNotification.classList.remove("hidden"); console.log("offline"); });

const connectivityNotification = document.getElementsByClassName(
  "connectivity-notification"
)[0];

connectivityNotification.classList.add("hidden");

window.addEventListener("online", () => {
  connectivityNotification.classList.add("hidden");
  console.log(connectivityNotification.classList);
  console.log("online");
});
window.addEventListener("offline", () => {
  connectivityNotification.classList.remove("hidden");
  console.log("offline");
});

scroll-to-top.js

const chatWindowContents = document.getElementById("chat-window-contents");

const scrollToTopButton = document.getElementsByClassName(

"scroll-to-top-button"

)[0];

const scrollToTopButtonIcon = document.getElementsByClassName(

"scroll-to-top-button-icon"

)[0];

chatWindowContents.addEventListener("scroll", (event) => {

const scrollPositionFromTop = chatWindowContents.scrollTop;

const scrollFromBottom =

chatWindowContents.scrollHeight -

scrollPositionFromTop -

chatWindowContents.clientHeight;

if (scrollFromBottom === 0) {

scrollToTopButton.classList.add("shrink");

scrollToTopButtonIcon.classList.add("shrink");

} else {

scrollToTopButton.classList.remove("shrink");

scrollToTopButtonIcon.classList.remove("shrink");

}

});

scrollToTopButton.addEventListener("click", (event) => {

event.preventDefault();

chatWindowContents.scrollTop =

chatWindowContents.scrollHeight - chatWindowContents.clientHeight;

});

const chatWindowContents = document.getElementById("chat-window-contents");
const scrollToTopButton = document.getElementsByClassName(
  "scroll-to-top-button"
)[0];
const scrollToTopButtonIcon = document.getElementsByClassName(
  "scroll-to-top-button-icon"
)[0];

chatWindowContents.addEventListener("scroll", (event) => {
  const scrollPositionFromTop = chatWindowContents.scrollTop;
  const scrollFromBottom =
    chatWindowContents.scrollHeight -
    scrollPositionFromTop -
    chatWindowContents.clientHeight;
  if (scrollFromBottom === 0) {
    scrollToTopButton.classList.add("shrink");
    scrollToTopButtonIcon.classList.add("shrink");
  } else {
    scrollToTopButton.classList.remove("shrink");
    scrollToTopButtonIcon.classList.remove("shrink");
  }
});

scrollToTopButton.addEventListener("click", (event) => {
  event.preventDefault();
  chatWindowContents.scrollTop =
    chatWindowContents.scrollHeight - chatWindowContents.clientHeight;
});

Running the Project:

Open the index.html file in a web browser.
You should see a basic WhatsApp-like layout with a sidebar, chat area, and message input.
Type a message and press the send button or enter key to see it appear in the chat.

Additional Enhancements:

Add More Contacts: Duplicate the .contact div in the HTML to add more contacts.
Receive Messages: Add a function to simulate receiving messages.
Responsive Design: Use media queries to make the design responsive.
User Authentication: Add login and signup functionality for user authentication.
Chat History: Store and retrieve chat history from a database or local storage.

This guide provides a foundational setup for a WhatsApp Web UI clone using basic web technologies. You can expand upon it with more advanced features and integrations to create a more robust application.

Er. Piyush Gupta

I am Social enterpreneur, e-marketer and an international level coder. I will support for startup business

Reviews

There are no reviews yet. Be the first one to write one.

0.0

0 out of 5 stars (based on 0 reviews)

Excellent0%

Very good0%

Average0%

Poor0%

Terrible0%

How to Create WhatsApp Web UI Clone Using HTML, CSS & JavaScript

HTML Structure:

check-connectivity.js

scroll-to-top.js

Running the Project:

Additional Enhancements:

Er. Piyush Gupta

Reviews

Recent Posts

Google Play Store से पैसे कैसे कमाए 2025?

Canva क्या है और Canva से पैसे कैसे कमाए? 2025

How to earn money from cryptocurrency? 2025 complete information

2025 Social Media Holiday Calendar

How to Create Popup Cookies Consent Box in HTML CSS & JavaScript

How to Create Random Color Palette in HTML CSS & JavaScript

100+ Template Collection Pre-Built websites for free

How to Create Pride Month – Celebrate Your Colors email template

How to Create WhatsApp Web UI Clone Using HTML, CSS & JavaScript

HTML Structure:

check-connectivity.js

scroll-to-top.js

Running the Project:

Additional Enhancements:

Er. Piyush Gupta

Follow Me:

Reviews

Recent Posts

Google Play Store से पैसे कैसे कमाए 2025?

Canva क्या है और Canva से पैसे कैसे कमाए? 2025

How to earn money from cryptocurrency? 2025 complete information

2025 Social Media Holiday Calendar

How to Create Popup Cookies Consent Box in HTML CSS & JavaScript

How to Create Random Color Palette in HTML CSS & JavaScript

100+ Template Collection Pre-Built websites for free

How to Create Pride Month – Celebrate Your Colors email template