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

# Widget de chat en vivo incrustado en tu página

> Muestra el chat en vivo dentro del contenido de tu página, junto a precios, formularios o reservas, en lugar de una burbuja flotante.

El widget de chat en vivo **incrustado** muestra el chat dentro del contenido de tu página, como una sección más, en lugar de una burbuja flotante en la esquina. Así puedes poner la conversación justo donde el visitante está decidiendo: junto a los precios, al lado de un formulario o en la página de reservas. Solo cambia dónde se ve el chat. El enrutamiento, la captura de datos y la gestión de conversaciones funcionan igual que siempre.

## Para qué te sirve

* **Más visibilidad:** el chat aparece cerca de las secciones de mayor intención, como la portada, los formularios o los botones de compra.
* **Se integra con tu diseño:** se ve como parte de la página y no tapa el contenido.
* **Sin cambios en tus automatizaciones:** el enrutamiento, la captura de contactos y la gestión del chat en vivo siguen igual.
* **Funciona en cualquier lado:** embudos, sitios web, páginas de aterrizaje, sitios HTML propios y cualquier página donde se pueda instalar un widget de chat.

El widget incrustado es **adaptable a celulares** por defecto: se ajusta a pantallas pequeñas sin salir del contenido de la página.

## Cómo configurarlo

**1. Crea o abre un widget**

Ve a **Sitios → Widgets de chat** y haz clic en **+ Nuevo**, o abre un widget existente.

**2. Elige Chat en vivo**

Selecciona la opción **Chat en vivo**.

**3. Cambia la ubicación a incrustado**

En la pestaña **Estilo**, en **Ubicación del widget**, elige **Incrustado / en línea (se muestra dentro del contenido)**. Con esto el widget aparece dentro del diseño de la página y no flotando sobre ella.

**4. Personaliza el widget**

* **Tema y apariencia:** colores, avatar, encabezado y estilo acorde a tu sitio.
* **Ventana de chat:** mensaje de introducción, campos del formulario de contacto (nombre, teléfono, etc.), campos obligatorios y texto de los botones.
* **Mensajes y comportamiento:** respuestas automáticas, asignación del chat en vivo, horario de atención y mensajes de chat cerrado.

**5. Copia el código**

Haz clic en **Obtener código** (arriba a la derecha) y copia el script de inserción.

**6. Pega el código en tu página**

**En embudos o sitios de Chateea:** abre el creador, agrega un elemento de **Código personalizado** donde quieras que aparezca el chat, pega el código, guarda y publica.

**En sitios externos:** abre el editor de tu sitio o el archivo HTML, pega el código en la sección deseada y publica los cambios.

El widget se muestra exactamente donde colocaste el código.

Una vez publicado, el visitante puede iniciar la conversación, dejar sus datos de contacto y chatear en tiempo real, igual que con el chat flotante.

## Cuándo conviene usarlo

* Resolver dudas antes de que el visitante envíe un formulario.
* Acompañar a quien compara planes o precios.
* Ayudar en páginas de reservas o de consultas.
* Responder objeciones en los pasos de un embudo.
* Guiar al visitante en páginas de servicios.
* Dar una opción de conversación visible en tu sección de contacto.

## Buenas prácticas

* Colócalo cerca de contenido de alta intención: formularios, ofertas, reservas.
* Usa los mismos colores y estilo de la página para que se vea natural.
* Revisa márgenes y alineación para que no quede apretado en secciones angostas.
* Después de publicar, revisa cómo se ve en el celular.
* Escribe mensajes de introducción y confirmación claros, que inviten a actuar.

## Comportamiento que debes conocer

* El widget incrustado **no flota**: se queda en su lugar dentro de la página.
* Puedes usar el chat flotante en otras páginas de tu sitio.
* No cambia el enrutamiento, las automatizaciones ni la captura de datos en el CRM.
* Si usas **dimensiones personalizadas** y cambias entre flotante e incrustado, el tamaño vuelve a los valores recomendados para la nueva ubicación.

## Solución de problemas

| Problema | Qué revisar |
| - | - |
| **El widget no aparece** | Que el código esté bien pegado y que la página esté publicada |
| **Se ve mal el diseño** | El ancho del contenedor en tu editor y posibles conflictos de CSS |
| **El chat no responde** | La asignación del chat en vivo y la configuración del horario de atención |

## Preguntas frecuentes

> **¿Puedo usar widgets incrustados y flotantes a la vez?**
>
> Sí. Puedes usar el incrustado en algunas páginas y el flotante en otras.

> **¿Afecta el funcionamiento del chat?**
>
> No. El chat funciona exactamente igual.

> **¿Puedo poner varios widgets incrustados en la misma página?**
>
> No se recomienda, porque puede causar problemas de experiencia y de seguimiento.

## Artículos relacionados

> **[Configura el chat en vivo en tu sitio web](https://help.chateea.com/docs/primeros-pasos/configura-el-chat-en-vivo.md)**
>
> Crea, personaliza e instala el widget de chat.

> **[Chat en vivo en Conversaciones](https://help.chateea.com/docs/conversaciones/chat-en-vivo.md)**
>
> Atiende a tus visitantes en tiempo real.

> **[Sonido de notificación en el widget](https://help.chateea.com/docs/sitios/sonido-de-notificacion-en-widget-de-chat.md)**
>
> Controla las alertas que recibe el visitante.

> **[Automatizar respuestas del widget de chat](https://help.chateea.com/docs/sitios/automatizar-respuestas-del-widget-de-chat.md)**
>
> Flujos que se activan cuando el cliente responde.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.