Modèle HTML de chatbot IA | Code d'interface de chat

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 November 2023

Bulle de savon

HTML

<!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>

Modèle HTML de chatbot IA | Code d'interface de chat

Recommandé

Diaporama d'images JavaScript

Un code de Metr

Bulle de savon

HTML

CSS

JS

Recommandé

Diaporama d'images JavaScript

Un code de Metr

Bulle de savon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS