Chatbot para incluir en tu blog

<style>

  #chat-toggle {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background-color: #0084ff;

    color: white;

    border: none;

    border-radius: 50%;

    width: 60px;

    height: 60px;

    font-size: 24px;

    cursor: pointer;

    box-shadow: 0 4px 8px rgba(0,0,0,0.3);

    z-index: 9999;

  }

  #chat-box {

    display: none;

    position: fixed;

    bottom: 90px;

    right: 20px;

    width: 300px;

    background-color: white;

    border: 1px solid #ccc;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

    overflow: hidden;

    z-index: 9999;

    color: black;

    background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=300&q=80');

    background-size: cover;

    background-position: center;

  }

  #chat-header {

    background-color: #0084ff;

    color: white;

    padding: 10px;

    font-weight: bold;

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

  #chat-body {

    height: 200px;

    overflow-y: auto;

    padding: 10px;

    background: rgba(255,255,255,0.8);

  }

  .chat-message {

    margin-bottom: 8px;

  }

  #chat-input {

    display: flex;

    border-top: 1px solid #ccc;

    background: rgba(255,255,255,0.9);

  }

  #user-input {

    flex: 1;

    border: none;

    padding: 10px;

  }

  #send-btn {

    background-color: #0084ff;

    color: white;

    border: none;

    padding: 10px;

    cursor: pointer;

  }

  #audio-toggle {

    background: none;

    border: none;

    color: white;

    font-size: 16px;

    cursor: pointer;

  }

</style>

<!-- Botón flotante -->

<button id="chat-toggle">💬</button>

<!-- Ventana del chat -->

<div id="chat-box">

  <div id="chat-header">

    Asistente

    <button id="audio-toggle" title="Activar/desactivar audio">🔈</button>

  </div>

  <div id="chat-body">

    <div class="chat-message">Hola 👋 ¿En qué puedo ayudarte?</div>

    <div class="chat-message" style="font-size: 12px; font-style: italic; margin-top: 10px;">

      Desarrollado por Sebastián Tacundo, profesor docente remoto.

    </div>

  </div>

  <div id="chat-input">

    <input type="text" id="user-input" placeholder="Escribe tu mensaje..." />

    <button id="send-btn">Enviar</button>

  </div>

</div>

<script>

  const toggleBtn = document.getElementById('chat-toggle');

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

  const userInput = document.getElementById('user-input');

  const sendBtn = document.getElementById('send-btn');

  const chatBody = document.getElementById('chat-body');

  const audioToggle = document.getElementById('audio-toggle');

  let audioEnabled = true;

  audioToggle.addEventListener('click', () => {

    audioEnabled = !audioEnabled;

    audioToggle.textContent = audioEnabled ? '🔈' : '🔇';

  });

  toggleBtn.addEventListener('click', () => {

    chatBox.style.display = chatBox.style.display === 'block' ? 'none' : 'block';

  });

  sendBtn.addEventListener('click', sendMessage);

  userInput.addEventListener('keyup', (event) => {

    if (event.key === 'Enter') {

      sendMessage();

    }

  });

  function sendMessage() {

    const message = userInput.value.trim();

    if (message) {

      addMessage('Tú', message);

      speakText(`Tú dijiste: ${message}`);

      respond(message);

      userInput.value = '';

    }

  }

  function addMessage(sender, text) {

    const msg = document.createElement('div');

    msg.classList.add('chat-message');

    // Usamos innerHTML para que los caracteres con acento se muestren bien

    msg.innerHTML = `${sender}: ${text}`;

    chatBody.appendChild(msg);

    chatBody.scrollTop = chatBody.scrollHeight;

  }

  function respond(text) {

    let response = "No entendí eso 🤔";

    const lower = text.toLowerCase();

    if (lower.includes('hola')) {

      response = "¡Hola! ¿Cómo estás? 😊";

    } else if (lower.includes('bien')) {

      response = 'Me alegro... ¿en qué puedo ayudarte? 🧐';

    } else if (lower.includes('que es scratch')) {

      response = "Scratch es una plataforma para aprender a programar usando bloques. Podés crear historias, juegos, etc.";

    } else if (lower.includes('gracias')) {

      response = "¡De nada! 😊";

    } else if (lower.includes('scratch')) {

      response = "Scratch es una plataforma para aprender a programar usando bloques 😊";

    } else if (lower.includes('eventos')) {

      response = "¡Los eventos permiten que tus personajes reaccionen a lo que pasa en el juego, como clic en la bandera verde! 😊";

    } else if (lower.includes('ejemplos de eventos')) {

      response = "Por ejemplo, cuando hacés clic en la bandera verde, eso activa un evento. Algunos eventos comunes en Scratch son: “al hacer clic en la bandera verde”, “al presionar la tecla espacio”, etc. 😊";

    }

    setTimeout(() => {

      addMessage('EduBot', response);

      speakText(`EduBot responde: ${response}`);

    }, 500);

  }

  function speakText(text) {

    if (!audioEnabled) return;

    // Reemplazamos comillas tipográficas y caracteres especiales por equivalentes simples

    const cleanText = text

      .replace(/[“”«»„]/g, '"')   // comillas dobles normales

      .replace(/[‘’‚‛]/g, "'")    // comillas simples normales

      .replace(/&amp;/g, "y")     // ampersand por "y"

      .replace(/&lt;/g, "<")

      .replace(/&gt;/g, ">")

      .replace(/&#39;/g, "'")

      .replace(/&#160;/g, " ")    // espacio no separable

      .replace(/&nbsp;/g, " ")

      .replace(/&quot;/g, '"');

    const utterance = new SpeechSynthesisUtterance(cleanText);

    utterance.lang = 'es-ES';

    utterance.pitch = 1;

    utterance.rate = 1;

    speechSynthesis.speak(utterance);

  }

  // Mensaje inicial con voz

  setTimeout(() => {

    speakText("Hola, soy EduBot, tu asistente. Este chatbot fue desarrollado por Sebastián Tacundo, profesor docente remoto.");

  }, 1000);

</script>