Chatbot para sitio web

3273 IT-Brother

Abrir en el editor Publica tu código

Recomendado

5 March 2025

Sitio web del planificador de citas

19 October 2024

Sitio web de portafolios para desarrolladores HTML

14 January 2025

Ejemplo de página web de portafolio

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);
    }
}

JS

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 = '';
        }

Recomendado

Sitio web del planificador de citas

Sitio web de portafolios para desarrolladores HTML

Ejemplo de página web de portafolio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS