How to Add a WhatsApp Chatbox to Your Website Using HTML, CSS, and JavaScript

TechSultans November 12, 2024November 12, 2024 0 Comments

In this tutorial, we’ll walk you through the steps of creating a simple but effective WhatsApp chatbox widget for your website. This feature is useful for businesses or individuals who want to provide instant communication through WhatsApp directly from their site.

The WhatsApp chatbox will allow users to send messages to a predefined phone number (you can change this to your own number), and the widget will open WhatsApp directly in the browser. The chatbox is clean, mobile-responsive, and includes hover effects, animations, and input validation.

Let’s break it down and show you how to implement this feature without using any frameworks—just HTML, CSS, and JavaScript.

Step 1: Create the HTML Structure

First, we’ll create the basic HTML structure. This includes the WhatsApp button that users will click to open the chatbox, the chatbox itself, and an input field for typing messages.

Whatsapp Chatbox html

<div class="whatsapp-button-container">
    <div class="whatsapp-button" onclick="toggleChatbox()" onmouseenter="stopBounce()" onmouseleave="startBounce()">
      <i class="fab fa-whatsapp whatsapp-icon" id="whatsapp-icon"></i>
    </div>
    <div class="whatsapp-chatbox" id="whatsapp-chatbox">
      <div class="chatbox-header">
        <p>WhatsApp Chat</p>
        <button onclick="toggleChatbox()"><i class="fas fa-times"></i></button>
      </div>
      <textarea class="chatbox-textarea" id="message" placeholder="Type your message..." rows="3"></textarea>
      <button class="chatbox-button" onclick="sendMessage()" id="send-button" disabled>Chat</button>
    </div>
  </div>

Step 2: Styling with CSS

The next step is styling the chatbox widget with CSS. We want it to be visually appealing, with animations and hover effects to make it interactive. The whatsapp-button will bounce until hovered over to attract attention.

Here is the CSS for the WhatsApp button and the chatbox:

Whatsapp Chatbox css

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    /* Base styling */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f9f9f9;
    }

    .whatsapp-button-container {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      z-index: 50;
    }

    .whatsapp-button {
      width: 3rem;
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background-color: white;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: transform 0.3s;
    }

    .whatsapp-button:hover {
      transform: scale(1.1);
    }

    .whatsapp-icon {
      font-size: 1.75rem;
      color: #008069;
      animation: bounce 1s infinite;
    }

    .whatsapp-chatbox {
      width: 14rem;
      display: none;
      flex-direction: column;
      background-color: white;
      border: 1px solid #e0e0e0;
      border-radius: 0.5rem;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      position: absolute;
      bottom: 4rem;
      right: 0;
    }

    .chatbox-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #008069;
      color: white;
      padding: 0.5rem;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
    }

    .chatbox-header button {
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      font-size: 1.2rem;
    }

    .chatbox-textarea {
      padding: 0.5rem;
      border: 1px solid #e0e0e0;
      border-radius: 0.5rem;
      margin: 0.5rem;
      resize: none;
      outline: none;
    }

    .chatbox-button {
      background-color: #008069;
      color: white;
      padding: 0.5rem;
      border: none;
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      cursor: pointer;
      font-size: 1rem;
    }

    /* Bounce animation */
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-8px);
      }
    }
  </style>

Step 3: Adding Interactivity with JavaScript

Now, we’ll use JavaScript to add functionality to the chatbox. We need to handle opening and closing the chatbox, enabling/disabling the send button based on the input field, and opening WhatsApp with the message when the button is clicked.

Here’s the JavaScript for this:

Whatsapp Chatbox Js Code

<script>
    let chatboxVisible = false;
    const whatsappIcon = document.getElementById('whatsapp-icon');
    const whatsappChatbox = document.getElementById('whatsapp-chatbox');
    const messageInput = document.getElementById('message');
    const sendButton = document.getElementById('send-button');

    function toggleChatbox() {
      chatboxVisible = !chatboxVisible;
      whatsappChatbox.style.display = chatboxVisible ? 'flex' : 'none';
    }

    function stopBounce() {
      whatsappIcon.classList.remove('animate-bounce');
    }

    function startBounce() {
      whatsappIcon.classList.add('animate-bounce');
    }

    messageInput.addEventListener('input', () => {
      sendButton.disabled = !messageInput.value.trim();
    });

    function sendMessage() {
      const phoneNumber = '91980041'; // Replace with your phone number
      const message = encodeURIComponent(messageInput.value);
      const whatsappURL = `https://wa.me/${phoneNumber}?text=${message}`;
      window.open(whatsappURL, '_blank');
      messageInput.value = ''; // Clear the message after sending
      toggleChatbox();
    }
  </script>

Step 4: Customize and Integrate

To integrate this WhatsApp chatbox into your website:

Copy the HTML, CSS, and JavaScript code into their respective files (index.html, styles.css, and script.js).
Replace the phone number in the JavaScript (const phoneNumber = "9198025041";) with your own WhatsApp number.
Customize the design by modifying the styles in styles.css as needed. You can change the color, size, or positioning of the button and chatbox.

Conclusion

By following these steps, you’ve successfully added a simple WhatsApp chatbox to your website. This feature makes it easier for visitors to reach you instantly, improving user engagement and communication.

Feel free to tweak the design and functionality as per your requirements. You can also add additional features like automatic greetings or real-time message tracking, depending on your needs.

Bonus Tip: You can make this chatbox more dynamic by integrating it with a backend or using APIs to track messages or connect it to your CRM system.

Final Thoughts

In this tutorial, we’ve created a minimal yet effective WhatsApp chatbox using just HTML, CSS, and JavaScript. The flexibility of this solution means you can easily customize it to suit your website’s design and functionality needs.

By adding such a feature, you’re not only enhancing user experience but also enabling direct communication through one of the most popular messaging apps worldwide.