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

# Web Widget

Personaliza e integra el widget de chat en tu sitio web.

En la pestaña **Widget** puedes personalizar la experiencia de tu asistente en el sitio y obtener el código para integrarlo en tu página web. Puedes compartir un enlace, incrustar una burbuja de chat. Una vista previa en tiempo real, situada a la derecha, muestra cada cambio a medida que lo realizas, y permite alternar entre las vistas de Chat y Canales.

<Frame>
  <img src="https://mintcdn.com/custumu/q385Gtjr7ZgL6yzI/images/image-1.png?fit=max&auto=format&n=q385Gtjr7ZgL6yzI&q=85&s=dd7da67d42c2f78612df0c2d2224ef4d" alt="Image" width="1594" height="912" data-path="images/image-1.png" />
</Frame>

## Activar o desactivar el widget

La tarjeta Web Widget, situada en la pestaña Canales, funciona como un interruptor. Un asistente nuevo comienza con esta opción desactivada, por lo que no se mostrará nada en su sitio hasta que la active. Solo los gestores del asistente pueden activarlo.

<Frame>
  <img src="https://mintcdn.com/custumu/abDa16aJo-t-BpaI/images/image-2.png?fit=max&auto=format&n=abDa16aJo-t-BpaI&q=85&s=d1c4e1c5009a6c89db6d95c6922f5cfb" alt="Image" width="1595" height="911" data-path="images/image-2.png" />
</Frame>

## Personalización

Todos los métodos de incrustación comparten la misma configuración, agrupada en las categorías Apariencia, Conversación, Avance, Canales y Avanzado. Todos los cambios se reflejan en la vista previa en tiempo real y no se aplican hasta que se hace clic en Guardar.

### **Apariencia**

Controla el aspecto del widget en tu sitio.

* **Posición del botón de la burbuja:** la esquina donde aparece el lanzador, abajo a la derecha o abajo a la izquierda. El Omnibar siempre queda centrado. Si el elemento incrustado trae un atributo `position`, ese valor sobreescribe esta opción en esa página.
* **Apariencia del tema:** los colores del chat. Automático sigue la preferencia del sistema del visitante, o puedes forzarlo a claro u oscuro.
* **Color de acento:** se usa en todo el widget para el botón del chat, los botones, los enlaces y los mensajes de tus visitantes. Haz clic en el círculo para elegir un color o escribe un valor hex.

### Conversación

Define lo primero que ven los visitantes al abrir el chat.

* **Saludo:** el mensaje de bienvenida que aparece en la parte superior de una nueva conversación.
* **Mensajes sugeridos:** respuestas rápidas que los visitantes pueden pulsar para comenzar.
* **Dictado:** permita a los visitantes dictar mensajes mediante el micrófono.

### Canales

Ofrece a tus visitantes otras formas de contactarte desde un menú en el botón del widget. Si hay canales configurados, al tocarlo se abre primero ese menú, con un botón para empezar el chat.

* **Canales conectados:** los canales de mensajería que tengas conectados (WhatsApp, Messenger, Instagram, Telegram) se agregan solos y sus enlaces se mantienen al día. Quita uno para ocultarlo del menú.
* **Canales personalizados:** agrega un enlace, un correo o un teléfono para llevar a tus visitantes a otro lado.

Avanzada

* **Ocultar Con la tecnología de**: quita la marca **Con la tecnología de Custumu** del widget.

<Info>
  Quitar la marca «Con la tecnología de» requiere un plan Business o Enterprise.
</Info>

* **Restablecer valores:** devuelve cada ajuste del widget a su valor inicial, incluidos los colores, el mensaje de invitación y los canales. Nada cambia hasta que guardes.

## Atributos del elemento

El elemento `<custumu-chat>` lee un conjunto fijo de atributos. Cualquier otro se ignora.

| Atributo | Valores | Descripción |
| - | - | - |
| `mode` | `button`, `omnibar`, `auto` | La forma del widget en esa página: el botón de la burbuja en la esquina (el valor inicial), el Omnibar centrado, o `auto` (el Omnibar hasta que el visitante tiene una conversación). |
| `position` | `right`, `left` | Sobreescribe la **posición del botón de la burbuja** en esa página. |
| `theme-appearance` | `auto`, `light`, `dark` | Sobreescribe la **apariencia del tema** en esa página. |


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