In this tutorial, you will learn how to implement an interactive WhatsApp chat on your website using HTML, CSS, and JavaScript. This chat will allow you to provide visitors to your site with a quick and easy way to communicate with you via WhatsApp. Additionally, it covers how to customize contacts, phone numbers, descriptions, and images to tailor the chat to your specific needs.
<!DOCTYPE html>
<html>
<head>
<title>WhatsApp Chat</title>
<style>
body {
text-align: center;
background-color: #f7f7f7;
padding: 20px;
position: relative;
}
.whatsapp-logo {
display: none;
position: fixed;
bottom: 20px;
right: -100px;
width: 100px;
height: 100px;
background: url(‘https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/512px-WhatsApp.svg.png?20220228223904’) no-repeat center center;
background-size: cover;
cursor: pointer;
z-index: 1000;
animation: slideIn 1s ease 1s forwards, fadeIn 1s ease 2s forwards;
}
.whatsapp-logo.hide-behind {
z-index: 999;
}
@keyframes slideIn {
100% {
right: 20px;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.contact-list {
display: none;
position: fixed;
bottom: 120px;
right: 20px;
width: 300px;
background-color: #25d366;
border-radius: 8px;
padding: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
z-index: 1001;
}
.close-button {
position: absolute;
top: 5px;
right: 5px;
background-color: #fff;
color: #25d366;
border: none;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
}
.contact + .contact {
margin-top: 10px;
border-top: 1px solid #fff;
padding-top: 10px;
}
.contact {
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 10px;
color: #fff;
}
.contact img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.contact-description {
font-size: 12px;
text-align: center;
}
.sub-window {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
background-color: #fff;
border-radius: 8px;
padding: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
z-index: 1002;
}
.sub-window h2 {
margin: 0;
}
.sub-window .chat-header {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.sub-window .chat-header img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
.sub-window .chat-header h2 {
font-size: 16px;
margin: 0;
}
.sub-window .chat-messages {
height: 200px;
overflow-y: scroll;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.sub-window .chat-messages .message {
padding: 5px 10px;
border-radius: 8px;
margin-bottom: 5px;
max-width: 80%;
}
.sub-window .chat-messages .message.sent {
background-color: #DCF8C6;
align-self: flex-end;
}
.sub-window .chat-messages .message.received {
background-color: #EAEAEA;
align-self: flex-start;
}
.sub-window .chat-input {
padding: 10px;
}
.sub-window .chat-input input[type=”text”] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.sub-window .chat-input button {
background-color: #25d366;
color: #fff;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
}
@media screen and (max-width: 600px) {
.contact-list {
width: 100%;
bottom: 0;
left: 0;
right: 0;
border-radius: 0;
height: 50%;
overflow: auto;
}
.sub-window {
width: 100%;
bottom: 0;
left: 0;
right: 0;
border-radius: 0;
height: 50%;
}
.chat-messages {
height: 40%;
}
}
</style>
</head>
<body>
<div class=”whatsapp-logo” id=”whatsappLogo” onclick=”toggleContactList()”></div>
<div class=”contact-list” id=”contactList”>
<button class=”close-button” onclick=”toggleContactList()”>Close</button>
<div class=”contact” onclick=”openNewChat(‘Customer Support’)”>
<img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/512px-WhatsApp.svg.png?20220228223904″ alt=”Contact”>
<div>
<p>Contact Name 1</p>
<p class=”contact-description”>Contact us for queries or support</p>
</div>
</div>
<div class=”contact” onclick=”openNewChat(‘Provider Support’)”>
<img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/512px-WhatsApp.svg.png?20220228223904″ alt=”Contact”>
<div>
<p>Contact Name 2</p>
<p class=”contact-description”>Contact us for queries or support</p>
</div>
</div>
</div>
<div class=”sub-window” id=”subWindow”>
<div class=”chat-header”>
<button class=”back-button” onclick=”closeChat()”>Back</button>
<img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/512px-WhatsApp.svg.png?20220228223904″ alt=”WhatsApp Logo”>
<h2 id=”subWindowTitle”>Write here your queries…</h2>
</div>
<div class=”chat-messages” id=”chatMessages”>
<!– Los mensajes se mostrarán aquí –>
</div>
<div class=”chat-input”>
<input type=”text” id=”messageInput” placeholder=”Write a message…”>
<button onclick=”sendMessage()”>Send</button>
</div>
</div>
<script>
// Código JavaScript
var sentMessages = {};
setTimeout(function() {
var whatsappLogo = document.querySelector(‘.whatsapp-logo’);
whatsappLogo.style.display = ‘block’;
}, 1000);
function toggleContactList() {
var contactList = document.getElementById(‘contactList’);
var whatsappLogo = document.getElementById(‘whatsappLogo’);
if (contactList.style.display === ‘none’) {
contactList.style.display = ‘block’;
whatsappLogo.classList.add(‘hide-behind’);
} else {
contactList.style.display = ‘none’;
whatsappLogo.classList.remove(‘hide-behind’);
}
}
function openNewChat(contactName) {
var subWindow = document.getElementById(‘subWindow’);
var subWindowTitle = document.getElementById(‘subWindowTitle’);
var chatMessages = document.getElementById(‘chatMessages’);
var messageInput = document.getElementById(‘messageInput’);
var messagesForContact = sentMessages[contactName] || [];
chatMessages.innerHTML = ”;
messagesForContact.forEach(function(message) {
var newMessage = document.createElement(‘div’);
newMessage.className = ‘message sent’;
newMessage.textContent = message;
chatMessages.appendChild(newMessage);
});
subWindowTitle.textContent = contactName;
messageInput.value = ”;
subWindow.style.display = ‘block’;
}
function closeChat() {
var subWindow = document.getElementById(‘subWindow’);
subWindow.style.display = ‘none’;
}
function sendMessage() {
var messageInput = document.getElementById(‘messageInput’);
var chatMessages = document.getElementById(‘chatMessages’);
var subWindowTitle = document.getElementById(‘subWindowTitle’);
var contactName = subWindowTitle.textContent;
if (!sentMessages[contactName]) {
sentMessages[contactName] = [];
}
sentMessages[contactName].push(messageInput.value);
var newMessage = document.createElement(‘div’);
newMessage.className = ‘message sent’;
newMessage.textContent = messageInput.value;
chatMessages.appendChild(newMessage);
messageInput.value = ”;
var encodedMessage = encodeURIComponent(sentMessages[contactName].join(‘\n’));
var phoneNumber = ‘+000000000000’;
var whatsappLink = ‘https://api.whatsapp.com/send?phone=’ + phoneNumber + ‘&text=’ + encodedMessage;
window.location.href = whatsappLink;
}
</script>
</body>
</html>
Steps:
Basic Structure: The code begins with the basic HTML structure of the page. The title is defined, and the necessary CSS styles and JavaScript script are linked.
Styles and Design: CSS styles are designed to create an attractive and responsive interface. The style section defines the chat layout, the appearance of the WhatsApp logo, and the design of the chat popup window.
Initial Setup: The JavaScript script contains the logic to control chat interaction. It starts by hiding the WhatsApp logo and then revealing it with an animation after a short period.
Contacts List: The contacts section displays a list of predefined contacts. Each contact is presented with an image, name, and description. Users can click on a contact to open a chat window.
Chat Window: When a contact is clicked, a popup chat window opens. Here, messages sent by the user are displayed on the right side, while actual WhatsApp responses cannot be shown due to API limitations.
Customization: To customize the chat, users can edit contact names, phone numbers, and descriptions in the contacts list section. They can also replace images with corresponding contact photos.
Additional Customization:
To change contact names, look for lines containing <p>Contact Name 1</p> and <p>Contact Name 2</p> and replace them with the desired names.
To change phone numbers, look for phoneNumber variables in the sendMessage() function and replace them with the corresponding phone numbers.
To change contact descriptions, look for lines containing <p class=”contact-description”>Contact us for queries or support</p> and replace the text with preferred descriptions.
To change contact images, replace the image URLs in the src attributes of <img> tags within the contacts sections.
With these steps, you’ll be able to customize the WhatsApp chat on your website to suit your needs and provide users with a convenient way to communicate with you via WhatsApp. Be sure to provide clear instructions to users on how to interact with the chat and how to use it to contact you!
