Custom AI Chatbot
chatbot para integracion con ia en wordpress
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/leonardopenarandadev/chatbotai/archive/refs/heads/main.zipWordPress Custom AI Chatbot
Un plugin de WordPress que agrega un asistente virtual (chatbot) completamente personalizable a tu sitio web. Este plugin se conecta de forma segura a una IA externa para procesar los mensajes y proveer respuestas dinámicas.
Características
- 🎨 Personalización Visual: Cambia el color principal del chatbot directamente desde el panel de control para que coincida con la marca de tu sitio.
- 🖼️ Icono Personalizable: Sube tu propio icono para el botón de chat utilizando la galería multimedia nativa de WordPress.
- 🔒 Conexiones Seguras: La conexión a la API externa se realiza a través del backend (servidor) de WordPress, por lo que nunca se exponen claves de API ni direcciones de endpoints en el lado del cliente (navegador).
- 📱 Diseño Adaptativo (Responsive): La interfaz del chatbot está diseñada para verse y funcionar perfectamente en dispositivos móviles y de escritorio.
- ⚡ Rápido y Ligero: Sin dependencias pesadas que afecten el rendimiento de tu web, construido utilizando llamadas asíncronas con AJAX.
Instalación
- Descarga o clona este repositorio dentro de la carpeta
wp-content/plugins/de tu instalación de WordPress. (La carpeta debe llamarsechatbot-plugin). - Ve al panel de administración de WordPress y dirígete a la sección Plugins.
- Encuentra el plugin llamado "Custom AI Chatbot" y haz clic en Activar.
Configuración
Una vez activado, verás un nuevo menú llamado "Chatbot IA" en la barra lateral del administrador de WordPress.
- Color del Chatbot: Usa el selector de color para establecer la paleta del chatbot.
- Icono del Chatbot: Haz clic en "Subir Icono" para elegir una imagen de tu biblioteca de medios.
- URL de la API Externa: Ingresa el endpoint (URL) del servicio de Inteligencia Artificial que procesará los mensajes.
- Clave de la API: Si la IA requiere autenticación, añade el token aquí. Esto se enviará como un encabezado
Authorization: Bearer <token>en las peticiones que se realicen por debajo de la mesa.
Una vez guardes los cambios, el botón flotante del chatbot aparecerá en todas las páginas públicas de tu sitio web listo para usar.
Estructura Técnica
- Backend (PHP): La lógica de configuración y el proxy AJAX residen en los archivos PHP. Específicamente,
frontend/class-chatbot-frontend.phpes responsable de capturar los mensajes, pasarlos a la IA externa víawp_remote_post, y devolver la respuesta a la interfaz. - Frontend (JS/CSS): Interfaz limpia que se maneja a través de
jQuery(ya incluido en WP por defecto) enviando peticiones asíncronas para mantener la experiencia fluida sin recargar la página.
Modificaciones para APIs Locales
La función que recibe la respuesta de la IA actualmente asume que la API devuelve un JSON con un formato estándar (como {"response": "Hola"} o {"reply": "Hola"}).
Si la API de la empresa tiene una estructura diferente, puedes ajustar la función handle_chatbot_message en frontend/class-chatbot-frontend.php para interpretar correctamente la respuesta y mostrarla en la pantalla.