# Chat en tu sitio web > Cómo instalar el chat de Yatendi en tu página web, personalizar sus colores y su mensaje de bienvenida. Fuente: https://yatendi.com/docs/canales/sitio-web/ Producto: Yatendi — agente de IA para atender clientes por WhatsApp y otros canales. --- Yatendi te da un **snippet** —unas líneas de código— para pegar en tu página. Al hacerlo aparece una burbuja de chat flotante, atendida por el mismo agente que atiende tus otros canales. Se configura en **Agentes → tu agente → pestaña Canales → Web**. ## Instalar el chat 1. Abre la pestaña **Canales** de tu agente y elige el canal **Web**. 2. Presiona **Copiar snippet**. 3. Pégalo en tu sitio, justo antes de la etiqueta de cierre ``. Dónde se pega según la plataforma: | Plataforma | Dónde va | | --- | --- | | **WordPress** | Apariencia → Editor de temas, o un plugin de "insertar código" | | **Wix** | Configuración → Código personalizado | | **Shopify** | Tema → Editar código → `theme.liquid` | | **Squarespace** | Configuración → Avanzado → Inyección de código | | **Sitio propio** | En el HTML, antes de `` | Si el sitio lo maneja otra persona, mándale el snippet y esta página: para cualquiera que trabaje con webs es un trámite de dos minutos. ## Personalizar cómo se ve Desde la misma pestaña: - **Color primario** — en formato hex (`#rrggbb`). Se aplica a la burbuja flotante y al encabezado del chat. Usa el color de tu marca. - **Mensaje de bienvenida** — lo primero que ve el visitante al abrir el chat. Si lo dejas vacío, no se muestra nada. Por ejemplo: *"Hola 👋 ¿En qué te ayudo?"*. - **Foto del negocio** — la imagen que aparece en el encabezado del chat. ## Dominios permitidos Puedes definir **en qué sitios funciona tu widget**. Solo las páginas de esos dominios pueden abrir el chat. Conviene configurarlo: evita que alguien copie tu snippet y use tu agente en otra página. Agrega tu dominio de producción y, si trabajas con uno de pruebas, también. ## Diferencias con los otros canales - **Sin ventana de 24 horas**: es tu sitio, no hay reglas de plataforma. - **El visitante suele ser anónimo.** No tienes su teléfono hasta que él lo dé, así que conviene que el agente pida un dato de contacto cuando la conversación avanza. Eso se configura en [Leads](/docs/configuracion/leads/). - **Contexto de navegación**: el agente sabe en qué página está el visitante, lo que le permite responder con más precisión. ## Verificar que quedó bien Abre tu sitio en una ventana de incógnito (para no ver una versión cacheada) y busca la burbuja. Escribe algo y confirma que responde, y que la conversación aparece en el [Inbox](/docs/dia-a-dia/inbox/) con la etiqueta *Web*. ## Problemas comunes **No aparece la burbuja** Tres causas, en orden de frecuencia: el snippet no quedó guardado, está pegado fuera del ``, o el dominio no está en la lista de dominios permitidos. **Aparece pero no responde** Revisa que el agente esté activo, en la pestaña [General](/docs/agente/general/). **Se ve mal en el celular** El chat es responsive por defecto. Si algo se rompe, suele ser un `z-index` o un contenedor del tema del sitio; quien maneje tu web lo resuelve rápido.