Integració amb Wordpress i millores tècniques i estètiques(frontend) - Izan lecina webㅤㅤ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

Per la part del xat al wordpress primer havia posat en un bloc html a tota la web :


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatBot Flotante</title>
<style>
/* Estilos para el chat flotante */
#chat-container {
width: 550px;
height: 400px;
border: 1px solid #ddd;
background-color: #f9f9f9;
border-radius: 10px;
padding: 10px;
position: fixed;
bottom: 20px;
right: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
z-index: 1000;
}

#chat-box {
flex-grow: 1;
overflow-y: auto;
margin-bottom: 10px;
padding: 5px;
border-bottom: 1px solid #ddd;
}

#input-container {
display: flex;
align-items: center;
}

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

button {
padding: 8px;
margin-left: 5px;
background-color: #666666;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
color: #dddddd;
background-color: #444444;
}

.message {
padding: 5px;
border-radius: 5px;
margin-bottom: 5px;
}

.user-message {
background-color: #dcf8c6;
text-align: right;
}

.bot-message {
background-color: #eee;
}

/* Estilo para el botón de minimizar */
#minimize-button {
position: absolute;
top: 10px;
right: 10px;
background-color: #666;
color: white;
border-radius: 50%;
padding: 8px;
border: none;
cursor: pointer;
font-size: 18px;
}

#minimize-button:hover {
background-color: #444;
}

/* Estilo para el chat minimizado */
#chat-container.minimized {
width: 100px;
height: 50px;
padding: 0;
flex-direction: down;
}

#chat-box.minimized {
display: none;
}

#input-container.minimized {
display: none; /* Ocultar el contenedor de la caja de texto cuando está minimizado */
}

#chat-input:disabled {
background-color: #f0f0f0; /* Color más claro para cuando está deshabilitado */
cursor: not-allowed;
}
</style>
</head>
<body>

<!-- Contenedor del chatbot flotante -->
<div id="chat-container">
<!-- Botón de minimizar -->
<button id="minimize-button" onclick="toggleMinimize()">¤</button>

<!-- Contenedor del chat -->
<div id="chat-box"></div>

<!-- Contenedor para la entrada de texto -->
<div id="input-container">
<input type="text" id="chat-input" placeholder="Escribe algo..." />
<button onclick="enviarMensaje()">Enviar</button>
</div>
</div>

<script>
// URL de tu backend Flask (la URL pública de Ngrok)
const url = "https://ea5e-34-16-212-210.ngrok-free.app/"; // URL de Ngrok sin doble slash

// Función que se ejecuta cuando el usuario hace clic en "Enviar"
function enviarMensaje() {
const input = document.getElementById("chat-input");
const mensaje = input.value.trim();

if (mensaje) {
// Mostrar el mensaje en el chat
agregarMensaje("Tú: " + mensaje);

// Preparar la solicitud a enviar al backend
const data = {
mensaje: 'hola'
};

// Hacer la solicitud POST al backend
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ mensaje: mensaje }),
})
.then(response => response.json())
.then(data => {
console.log("Respuesta del servidor:", data);
agregarMensaje("ChatBot: " + data.resposta);
})
.catch((error) => {
console.error('Error:', error);
agregarMensaje("ChatBot: Hubo un error en la comunicación.");
});
}

// Limpiar el campo de entrada
input.value = '';
}

// Función para agregar mensajes al chat
function agregarMensaje(mensaje) {
const chatBox = document.getElementById("chat-box");
const div = document.createElement("div");
div.textContent = mensaje;
chatBox.appendChild(div);

// Hacer que siempre se vea el último mensaje
chatBox.scrollTop = chatBox.scrollHeight;
}

// Función para alternar el estado minimizado del chat
function toggleMinimize() {
const chatContainer = document.getElementById("chat-container");
const chatInput = document.getElementById("chat-input");
const inputContainer = document.getElementById("input-container");

// Alternar la clase "minimized"
chatContainer.classList.toggle("minimized");

// Si el chat está minimizado, ocultar el contenedor de la caja de texto
if (chatContainer.classList.contains("minimized")) {
inputContainer.style.display = "none"; // Ocultar la caja de texto
} else {
inputContainer.style.display = "flex"; // Mostrar la caja de texto
}
}
</script>

</body>
</html>

pero finalment el vaig cambiar per un més visual:


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatBot Flotante</title>
<style>
/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

/* Contenedor del chat */
#chat-container {
width: 350px;
height: 400px;
border-radius: 12px;
position: fixed;
bottom: 20px;
right: 20px;
background: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
overflow: hidden;
transition: height 0.3s ease-in-out;
}

/* Encabezado del chat */
#chat-header {
background: #555;
color: white;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}

#minimize-button {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
}

/* Caja de mensajes */
#chat-box {
flex-grow: 1;
overflow-y: auto;
padding: 15px;
background: #f1f1f1;
}

.message {
padding: 8px;
border-radius: 8px;
margin-bottom: 8px;
max-width: 80%;
}

.user-message {
background: #dcf8c6;
align-self: flex-end;
text-align: right;
}

.bot-message {
background: #e0e0e0;
align-self: flex-start;
}

/* Input y botón de envío */
#input-container {
display: flex;
padding: 10px;
background: white;
border-top: 1px solid #ddd;
}

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

button {
padding: 10px;
margin-left: 8px;
background-color: #666;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #888;
color: white;
}

/* Modo minimizado */
#chat-container.minimized {
height: 50px;
}

#chat-box.minimized, #input-container.minimized {
display: none;
}
</style>
</head>
<body>

<div id="chat-container">
<div id="chat-header">
XatBot
<button id="minimize-button" onclick="toggleMinimize()">&#x2014;</button>
</div>
<div id="chat-box"></div>
<div id="input-container">
<input type="text" id="chat-input" placeholder="Escribe algo..." />
<button onclick="enviarMensaje()">Enviar</button>
</div>
</div>

<script>
function enviarMensaje() {
const input = document.getElementById("chat-input");
const mensaje = input.value.trim();
if (mensaje) {
agregarMensaje("Tú: " + mensaje, "user-message");
input.value = '';
setTimeout(() => agregarMensaje("ChatBot: Estoy aquí para ayudarte!", "bot-message"), 500);
}
}

function agregarMensaje(mensaje, clase) {
const chatBox = document.getElementById("chat-box");
const div = document.createElement("div");
div.textContent = mensaje;
div.classList.add("message", clase);
chatBox.appendChild(div);
chatBox.scrollTop = chatBox.scrollHeight;
}

function toggleMinimize() {
const chatContainer = document.getElementById("chat-container");
chatContainer.classList.toggle("minimized");
}
</script>

</body>
</html>