Widget web

El widget web es el chat del agente que aparece como un botón flotante en una esquina de tu página. Se personaliza en la pestaña Widget del agente y se instala copiando el Código de instalación y pegándolo en el HTML de tu web, antes del cierre de </body>.

#Antes de empezar

• El agente debe estar Activo para responder (ver Estados del agente).
• En la pestaña Canales, el Widget Web debe estar Activo. Ver Activar o pausar un canal.
• Necesitas poder editar el HTML de la web, o un apartado para añadir código (en WordPress y en la mayoría de creadores de webs hay uno para scripts del pie de página).

#Personalizar el widget

Entra en el agente y abre la pestaña Widget (también llegas desde Canales › Widget Web › Configurar). A la derecha tienes una Vista previa en la que puedes escribir al agente de verdad.

#Instalar el widget en tu web

1. Cuando el aspecto te guste, pulsa «Copiar» en Código de instalación. Verás «Snippet copiado».
2. Pega el código en el HTML de tu web, justo antes de </body>, en todas las páginas donde quieras el chat.
3. Publica los cambios de tu web y abre una página: verás el botón flotante.

El código tiene esta forma (el tuyo trae ya los datos de tu agente y tu configuración):

<script src="{tu-url}/widget.js"
        data-agent="{id-del-agente}"
        data-color="#2563EB"
        data-position="bottom-right"
        data-icon="chat"
        data-title="¿En qué te ayudo?"
        data-welcome="Hola 👋 Soy tu asistente. ¿Qué necesitas?"
        data-launcher-text="¿Hablamos? Estoy aquí para ayudarte"
        defer></script>

#Probarlo en una web antes de instalarlo

Pulsa «Probar en sitio web», escribe la URL del sitio y pulsa «Abrir con widget». Se abre una ventana nueva con esa página y el chat encima. Algunas webs no permiten mostrarse dentro de otra página; en ese caso prueba desde la vista previa o instálalo directamente.

#Qué ve el visitante

• Un botón flotante con el icono y el color elegidos y, si lo has configurado, el bocadillo de texto.
• Al pulsarlo, una ventana con el título, el mensaje de bienvenida y un campo «Escribe tu mensaje…».
• Un botón 📎 para adjuntar archivos: audios, imágenes, vídeos, PDF, documentos de Word, hojas de Excel y textos, de hasta 15 MB cada uno.

La conversación se recuerda en el navegador del visitante: si vuelve más tarde a la web, sigue en el mismo hilo.

Detalles técnicos

• El código funciona con defer, async o insertado de forma dinámica (por ejemplo con un gestor de etiquetas).
• El atributo data-agent es obligatorio; los demás son opcionales y, si faltan, se usan valores por defecto.
• La configuración de la pestaña Widget se recuerda en el navegador desde el que la editas. Si la abres desde otro equipo, revisa los campos antes de copiar el código.
• Los contactos que llegan por el widget aparecen en el CRM con el origen «Widget web».

#Problemas frecuentes

#No aparece el botón en mi web

Comprueba que has publicado los cambios de la web, que el código está antes de </body> y que no lo ha modificado tu editor (algunos convierten las comillas). Si usas una caché o un optimizador de scripts, vacía la caché.

#El chat contesta «Hemos recibido tu mensaje. Un agente humano continuará la conversación.»

El agente no ha respondido en automático. Suele pasar porque el agente no está Activo, el canal Widget Web está En pausa, el mensaje llega fuera del horario del canal o una persona ha tomado la conversación. Revisa la pestaña Canales y el estado del agente.

#He cambiado el color y en mi web sigue igual

El aspecto viaja en el código. Copia de nuevo el Código de instalación y sustituye el anterior.