AI Chatbot HTML Template | Chat Interface Code

1,845 codex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chatbot Assistant</title>
    <style>
        /* Basic Reset & Body Styling */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f2f5;
            color: #333;
        }

/* Chat Container Styling */
        .chat-container {
            width: 100%;
            max-width: 650px;
            height: 85vh; /* Adjust height as needed */
            display: flex;
            flex-direction: column;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
        }

/* Chat Header Styling */
        .chat-header {
            background-color: #007bff; /* Primary blue */
            color: white;
            padding: 18px 20px;
            text-align: center;
            font-size: 1.3em;
            font-weight: 600;
            border-bottom: 1px solid #0056b3;
        }

/* Chat Window (Messages Display Area) Styling */
        .chat-window {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #e9ecef; /* Light grey background for chat area */
            display: flex;
            flex-direction: column;
        }

/* Individual Message Styling */
        .message {
            max-width: 75%;
            padding: 12px 18px;
            border-radius: 20px;
            margin-bottom: 12px;
            line-height: 1.5;
            word-wrap: break-word;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
            position: relative;
        }

/* User Message Styling */
        .message.user {
            background-color: #dcf8c6; /* Light green for user messages */
            align-self: flex-end;
            margin-left: auto; /* Pushes to the right */
            border-bottom-right-radius: 5px; /* Sharpen corner for user message */
        }

/* AI Message Styling */
        .message.ai {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            align-self: flex-start;
            margin-right: auto; /* Pushes to the left */
            border-bottom-left-radius: 5px; /* Sharpen corner for AI message */
        }

/* Chat Input Area Styling */
        .chat-input {
            display: flex;
            padding: 15px 20px;
            border-top: 1px solid #e0e0e0;
            background-color: #f8f9fa;
        }

/* Input Field Styling */
        .chat-input input[type="text"] {
            flex-grow: 1;
            padding: 12px 18px;
            border: 1px solid #ced4da;
            border-radius: 25px;
            margin-right: 10px;
            font-size: 1em;
            outline: none;
            transition: border-color 0.3s ease;
        }

.chat-input input[type="text"]:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

/* Send Button Styling */
        .chat-input button {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 25px;
            padding: 12px 25px;
            cursor: pointer;
            font-size: 1em;
            font-weight: 500;
            transition: background-color 0.3s ease, transform 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.chat-input button:hover {
            background-color: #0056b3;
            transform: translateY(-1px);
        }

.chat-input button:active {
            transform: translateY(0);
        }

/* Scrollbar Styling (Webkit browsers) */
        .chat-window::-webkit-scrollbar {
            width: 8px;
        }

.chat-window::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

.chat-window::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

.chat-window::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

/* Responsive Adjustments */
        @media (max-width: 768px) {
            .chat-container {
                height: 98vh;
                margin: 0;
                border-radius: 0;
                box-shadow: none;
            }
            body {
                padding: 0;
            }
            .chat-header {
                font-size: 1.1em;
                padding: 15px;
            }
            .chat-window {
                padding: 15px;
            }
            .chat-input {
                padding: 10px 15px;
            }
            .chat-input input[type="text"] {
                padding: 10px 15px;
                font-size: 0.9em;
            }
            .chat-input button {
                padding: 10px 20px;
                font-size: 0.9em;
            }
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            AI Chatbot Assistant
        </div>
        <div class="chat-window" id="chat-window">
            
            <div class="message ai">Hello! I'm your AI Assistant. How can I help you today?</div>
            <div class="message user">Hi there! I'd like to know more about your product features.</div>
            <div class="message ai">Certainly! Our product offers real-time data analytics, customizable dashboards, and seamless integration with popular CRM platforms. What specific features are you interested in?</div>
            <div class="message user">Can you tell me about the pricing plans?</div>
        </div>
        <div class="chat-input">
            <input type="text" id="user-input" placeholder="Type your message here...">
            <button id="send-button">Send</button>
        </div>
    </div>

function sendMessage() {
            const messageText = userInput.value.trim();
            if (messageText !== '') {
                // Create and append user message
                const userMessageDiv = document.createElement('div');
                userMessageDiv.classList.add('message', 'user');
                userMessageDiv.textContent = messageText;
                chatWindow.appendChild(userMessageDiv);

// Scroll to the latest message
                chatWindow.scrollTop = chatWindow.scrollHeight;

// Clear the input field
                userInput.value = '';

// Simulate an AI response after a short delay
                setTimeout(() => {
                    const aiMessageDiv = document.createElement('div');
                    aiMessageDiv.classList.add('message', 'ai');
                    // Simple example of a dynamic response
                    if (messageText.toLowerCase().includes("pricing")) {
                        aiMessageDiv.textContent = "We have several pricing tiers: Basic, Pro, and Enterprise. Would you like a detailed breakdown of each?";
                    } else if (messageText.toLowerCase().includes("features")) {
                        aiMessageDiv.textContent = "Our key features include analytics, reporting, and integrations. Is there something specific you'd like to explore?";
                    } else {
                        aiMessageDiv.textContent = "Thank you for your message. I'm processing your request and will get back to you shortly.";
                    }
                    
                    chatWindow.appendChild(aiMessageDiv);
                    // Scroll to the latest message again after AI response
                    chatWindow.scrollTop = chatWindow.scrollHeight;
                }, 1000); // Simulate network delay
            }
        }

// Event listener for the Send button
        sendButton.addEventListener('click', sendMessage);

// Event listener for the Enter key in the input field
        userInput.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        });

// Scroll to the bottom on page load (useful if there are initial messages)
        window.onload = () => {
            chatWindow.scrollTop = chatWindow.scrollHeight;
        };
    </script>
</body>
</html>

CSS

AI Chatbot HTML Template | Chat Interface Code

Recommended