---
title: "CSS y JavaScript personalizados"
slug: "chatbot-custom-css-and-javascript"
updated: 2026-06-18T08:49:22Z
published: 2026-06-18T08:49:22Z
canonical: "docs.document360.com/chatbot-custom-css-and-javascript"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS y JavaScript personalizados

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](https://docs.document360.com/docs/es/create-chatbot) con al menos una fuente conectada.
- Revisa los [ajustes estándar de Apariencia](https://docs.document360.com/docs/es/chatbot-appearance) 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](https://docs.document360.com/docs/es/chatbot-playground) antes de publicarlos.

---

## Cómo añadir CSS y JavaScript personalizados

1. Navega hasta **Chatbot de IA** (![Frame image](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Frame%201707479697.png)) en la barra de navegación izquierda y haz clic **en Personalizar**.
2. Navega a la pestaña **CSS & JavaScript personalizado** ().

![Custom CSS and JavaScript editor interface showing separate input fields for CSS and JavaScript code.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1769166545388.png)

1. Introduce tu código CSS en el **campo CSS personalizado** para modificar el estilo del chatbot.
2. Introduce tu código JavaScript en el campo **JavaScript personalizado** para añadir interactividad personalizada.
3. Haz clic **en Guardar** para guardar tu código.
4. 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.