Chat de IA para tu Web: Personaliza Colores y Diseño con tu Marca

Cómo agregar un chat de IA a tu página web

Introducción al uso de n8n para chatbots

• Si tienes una página web personal o de negocio y deseas añadir un chat de IA que responda preguntas, puedes hacerlo rápidamente con n8n.

• Se presentará un ejemplo práctico utilizando una página web creada en Figma y convertida a código, específicamente sobre plantas.

Creación del agente de IA

• Se creará un workflow en n8n llamado "agente suculenta" donde se configurará el modelo y la memoria del agente.

• Se probará el agente enviando un saludo, recibiendo respuestas relacionadas con las plantas decorativas disponibles.

Configuración del chat público

• Para hacer el chat público, es necesario activar la opción correspondiente en la documentación de n8n.

• Al copiar el webhook y pegarlo en una nueva página, se puede verificar que el chat funciona correctamente.

Integración del chat embebido

• Para embeber el chat en la página web, se debe cambiar la configuración a "embebido" y seguir las instrucciones específicas proporcionadas por n8n.

• El código necesario debe ser pegado en el footer (pie de página) del sitio web para asegurar su correcta visualización.

Personalización del chatbot

• Una vez integrado, se puede personalizar el diseño y los mensajes iniciales del chatbot para alinearlos con la identidad visual de la marca.

• La paleta de colores puede ajustarse mediante variables CSS; esto permite que los colores coincidan con los utilizados por la empresa.

Recursos adicionales para personalización

• Se ofrecen recursos listos para copiar y pegar que facilitan la personalización sin necesidad de conocimientos avanzados en programación.

• Instrucciones claras están disponibles para importar estilos CSS específicos desde n8n al archivo propio del usuario.

Ajustes finales y verificación

• Los cambios realizados deben ser guardados adecuadamente; esto incluye ajustes como colores hover y texto visible durante interacciones.

Cómo personalizar un chatbot en WordPress

Personalización del Chatbot

• Se presenta el contenedor del chatbot, que tiene un diseño verde claro con texto negro para el bot y el usuario. El botón de enviar cambia de gris a verde al escribir.

• La personalización de colores es posible y se sugiere que los usuarios jueguen con los colores de su marca. Se menciona que la diseñadora proporcionó los colores específicos para facilitar este proceso.

Integración en WordPress

• Se explica cómo integrar el chatbot en una página web creada con WordPress, utilizando Hostinger como plataforma. Se crea una página rápida usando una plantilla relacionada con aire acondicionado.

• Para agregar el código del chatbot, se debe acceder al editor de apariencia en WordPress y buscar la sección del footer (pie de página).

• En el footer, se agrega un código HTML específico que se proporciona como recurso. Este paso implica copiar y pegar el código necesario.

Finalización y Pruebas

• Es importante cambiar los colores según la marca y también configurar correctamente el webhook para que funcione adecuadamente.

• Una vez guardados los cambios, se refresca la página para verificar que el chat esté funcionando correctamente. Se realizan pruebas iniciales enviando mensajes simples.

Conclusiones Generales

• Agregar un chatbot a una página web no es complicado; lo más desafiante es crear un agente que responda adecuadamente a las consultas relacionadas con el negocio.