CSS y JavaScript personalizados en Eddy AI Chatbot te permiten añadir tu propio código para personalizar aún más la apariencia o el comportamiento del chatbot más allá de lo que ofrecen los ajustes estándar de Apariencia. Puedes inyectar estilos personalizados para anular el diseño visual predeterminado del chatbot y añadir JavaScript para introducir interactividad personalizada o gestión de eventos. Los cambios se aplican al chatbot en vivo solo después de que hagas clic en Publicar.
Cuándo usar CSS y JavaScript personalizados
- Usa CSS personalizado cuando necesites cambios de estilo que no estén disponibles en la pestaña de Apariencia — por ejemplo, modificar el tamaño de la fuente, el radio del borde, los estilos de botones o los colores de las burbujas de chat.
- Utiliza JavaScript personalizado cuando necesites activar eventos personalizados, integrar el chatbot con herramientas de terceros o añadir comportamientos que respondan a las acciones del usuario dentro del chatbot.
Antes de que empieces
- Debes haber creado un chatbot de IA Eddy con al menos una fuente conectada.
- Revisa los ajustes estándar de Apariencia antes de escribir CSS personalizado — muchas personalizaciones visuales comunes (color, icono, posición, espaciado) pueden hacerse sin necesidad de código.
- El código personalizado se aplica globalmente al chatbot. Prueba los cambios a fondo en el Playground antes de publicarlos.
Cómo añadir CSS y JavaScript personalizados
- Navega hasta Chatbot de IA (
) en la barra de navegación izquierda y haz clic en Personalizar. - Navega a la pestaña CSS & JavaScript personalizado ().
- Introduce tu código CSS en el campo CSS personalizado para modificar el estilo del chatbot.
- Introduce tu código JavaScript en el campo JavaScript personalizado para añadir interactividad personalizada.
- Haz clic en Guardar para guardar tu código.
- Haz clic en Publicar para aplicar los cambios a tu chatbot en vivo.
El chatbot en tu sitio web ahora refleja tu código personalizado.
Mejores prácticas
- Haz un cambio a la vez: añade y prueba un solo cambio de CSS o JavaScript antes de añadir el siguiente. Esto facilita aislar los problemas si algo se rompe.
- Usa el Playground para previsualizar antes de publicar : guarda primero tus cambios y luego revisa el Playground para confirmar que el chatbot se ve y se comporta como se espera antes de lanzarlo.
- Analiza cuidadosamente tus selectores CSS — usa selectores específicos para dirigir con precisión los elementos del chatbot y evita que accidentalmente sobrescribas otros estilos en tu página web.
- Mantén JavaScript al mínimo : usa JavaScript solo para comportamientos que no se pueden lograr con la configuración de Apariencia o la configuración estándar de chatbots. Un exceso de JavaScript puede afectar al tiempo de carga del chatbot.
- Comenta tu código personalizado — añade comentarios a tu CSS y JavaScript para que tu equipo pueda entender y mantener las personalizaciones con el tiempo.