Chatbot para sitio web

4,748 IT-Brother

Abrir en el editor Publica tu código

Recomendado

18 October 2025

Botón HTML con efecto de desplazamiento (WEBLEB)

27 November 2024

Sitio web de portafolio completo

17 March 2026

Juego de obstáculos 3D para navegador con Three.js

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Bot Section</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="content">
        <h1>About Our Chat Bot</h1>
        <p>
            Welcome to our website! We are pleased to introduce our chat bot, which is ready to help you with various questions. 
        </p>
        <div class="images-container">
            <img src="https://via.placeholder.com/350x200" alt="Image 1">
            <img src="https://via.placeholder.com/350x200" alt="Image 2">
        </div>
        <p>
            You can ask our chat bot questions like "Hello", "How are you?", "What are you doing?" and get quick responses. 
            The chat bot is here to make your stay on our website as comfortable as possible.
        </p>
    </div>

<div id="chat-container">
        <div id="chat-header">
            <div class="close-chat">←</div>
            <span style="position: relative; left: 8px;">Chat Bot Assistant</span>
            <div class="reset-chat"><img src="reload.png" style="height: 30px; float: right; margin-right: 20px;"></div>
        </div>
        <div id="chat-box">
            <div id="messages"></div>
        </div>
        <div id="user-input-container">
            <input type="text" id="user-input" placeholder="Type a message...">
            <button id="send-button">Send</button>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS

body {
    background-color: #333;
    font-family: Arial, sans-serif;
    margin: 0;
    color: #333;
}

#content {
    position: relative;
    padding: 10px;
    max-width: 800px;
    margin: 100px auto;
    background: #fff;
    box-shadow: 0 0 10px #4a90e2;
    border-radius: 10px;
}

h1 {
    color: #4a90e2;
    text-align: center;
}

p {
    line-height: 1.6;
}

#content img {
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}

#chat-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #4a90e2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
    font-size: 30px;
    scale: 1.2;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#chat-header {
    background: #4a90e2;
    color: #fff;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Make sure the header is above other elements */
}

#chat-header span {
    font-size: 18px;
}

#chat-header .close-chat,
#chat-header .reset-chat {
    cursor: pointer;
    font-size: 18px;
}

#chat-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 70px);
    position: relative;
    top: -15px; /* Adjust the position of the chat box */
    overflow: auto;
    padding-top: 20px;
}

#chat-box::-webkit-scrollbar {
    width: 4px;
}

#chat-box::-webkit-scrollbar-thumb {
    background: #666666;
    border-radius: 10px;
}

#chat-box::-webkit-scrollbar-track {
    background: rgb(172, 172, 172);
}

#user-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0px;
    background: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 1;
}

#chat-container {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 400px;
    height: 75%;
    position: fixed;
    bottom: 54%;
    right: 50%;
    scale: 1.1;
    transform: translate(50%, 50%);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    background: #fff;
    padding-top: 20px; /* Add padding at the top of the chat container */
}

#user-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#send-button {
    width: 50px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #4a90e2;
    color: #fff;
    cursor: pointer;
    margin-left: 0px;
}

.message {
    position: relative;
    padding: 8px;
    margin: 5px 0;
    border-radius: 5px;
    max-width: 80%;
    left: 5px;
    word-wrap: break-word;
}

.user {
    background: #4a90e2;
    color: #fff;
}

.bot {
    background: #f06;
    color: #fff;
}

.images-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.images-container img {
    max-width: 48%;
    border-radius: 10px;
    margin-bottom: 20px;
}

.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin: 5px 0;
}

.dot {
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background: #ccc;
    border-radius: 50%;
    animation: bounce 1.5s infinite;
}

.dot:nth-child(2) {
    animation-delay: 0.3s;
}

.dot:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

const chatIcon = document.getElementById('chat-icon');
        const chatContainer = document.getElementById('chat-container');
        const closeChat = document.querySelector('.close-chat');
        const resetChat = document.querySelector('.reset-chat');

let isBotResponding = false;

chatIcon.addEventListener('click', function() {
            chatContainer.style.display = 'flex';
            chatIcon.style.display = 'none';
        });

closeChat.addEventListener('click', function() {
            chatContainer.style.display = 'none';
            chatIcon.style.display = 'flex';
        });

resetChat.addEventListener('click', function() {
            resetMessages();
        });

document.getElementById('send-button').addEventListener('click', function() {
            if (!isBotResponding) { 
                sendMessage();
            }
        });

document.getElementById('user-input').addEventListener('keypress', function(event) {
            if (event.key === 'Enter' && !isBotResponding) { 
                sendMessage();
            }
        });

function addMessage(text, sender) {
            const messageContainer = document.createElement('div');
            messageContainer.classList.add('message', sender);
            messageContainer.textContent = text;
            document.getElementById('messages').appendChild(messageContainer);
        }

function getBotResponse(userInput) {
            let botResponse = '';

switch (userInput.toLowerCase()) {
                case 'hi':
                    botResponse = 'Hi!';
                    break;
                case 'how are you?':
                    botResponse = 'I`m fine, thanks!';
                    break;
                case 'what are you doing?':
                    botResponse = 'I am answering the questions!';
                    break;
                default:
                    botResponse = 'Sorry, but i can`t understand. Can you repeat the auestion.';
            }

setTimeout(() => {
                addMessage(botResponse, 'bot');
                isBotResponding = false; 
                hideLoadingIndicator(); 
            }, 2000); 
        }

function showLoadingIndicator() {
            const loadingIndicator = document.createElement('div');
            loadingIndicator.classList.add('loading-indicator');

for (let i = 0; i < 3; i++) {
                const dot = document.createElement('div');
                dot.classList.add('dot');
                loadingIndicator.appendChild(dot);
            }
            document.getElementById('messages').appendChild(loadingIndicator);
        }

function hideLoadingIndicator() {
            const loadingIndicator = document.querySelector('.loading-indicator');
            if (loadingIndicator) {
                loadingIndicator.remove();
            }
        }

function resetMessages() {
            document.getElementById('messages').innerHTML = '';
        }