BLOG DETAIL

• abc
• 03 Nov 2025

How to develop a live chat using js

For HTML:

<section class="live-chat my-3">
    <div class="chat-container">
        <div class="chat-header">
            Chat with Plant Specialist
        </div>
        <div class="chat-box" id="chat-box">
            <div class="bot-message">Hi! I'm your Plant Specialist. How can I help you today?</div>
        </div>
        <div class="chat-input">
            <input type="text" id="user-input" placeholder="Ask me about your plant..." />
            <button onclick="sendMessage()">Send</button>
        </div>
    </div>
</section>

For CSS:

.live-chat {
    font-family: Arial, sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;

}

.chat-container {
    width: 400px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-header {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
}

.chat-box {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-box .user-message,
.chat-box .bot-message {
    max-width: 75%;
    padding: 10px;
    border-radius: 8px;
}

.user-message {
    align-self: flex-end;
    background-color: #dcf8c6;
}

.bot-message {
    align-self: flex-start;
    background-color: #f1f1f1;
}
.chat-input {
    display: flex;
    border-top: 1px solid #ddd;
}
.chat-input input {
    flex: 1;
    padding: 10px;
    border: none;
    font-size: 16px;
}
.chat-input button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 0 20px;
    cursor: pointer;
    font-size: 16px;
}

For JS:

function sendMessage() {
    const input = document.getElementById("user-input");
    const message = input.value.trim();
    if (!message) return;

    const chatBox = document.getElementById("chat-box");

    // Append user message
    const userMsg = document.createElement("div");
    userMsg.className = "user-message";
    userMsg.innerText = message;
    chatBox.appendChild(userMsg);

    input.value = "";

    // Simulate bot reply after short delay
    setTimeout(() => {
        const botMsg = document.createElement("div");
        botMsg.className = "bot-message";
        botMsg.innerText = generateBotReply(message);
        chatBox.appendChild(botMsg);

        chatBox.scrollTop = chatBox.scrollHeight;
    }, 600);
}

function generateBotReply(msg) {
    msg = msg.toLowerCase();

    if (msg.includes("water")) return "Most plants need watering once a week. Check if the topsoil is dry!";
    if (msg.includes("sunlight")) return "Place your plant near a window with indirect sunlight.";
    if (msg.includes("brown leaves")) return "Brown leaves can be due to overwatering or low humidity.";
    if (msg.includes("fertilizer")) return "Use a balanced fertilizer once a month during the growing season.";
    if (msg.includes("repot")) return "Repot when roots grow out of the drainage holes or every 1-2 years.";
    if (msg.includes("hello")) return "hello when roots grow out of the drainage holes or every 1-2 years.";

    return "That's interesting! Could you please give me more details about your plant issue?";
}