Widget web
El widget web añade una burbuja de chat a tu sitio, permitiendo a los visitantes iniciar conversaciones con tu agente de IA al instante.
Requisitos previos
Antes de configurar el widget web:
- ✅ Chatwoot conectado (consulta Configuración de Chatwoot)
- ✅ Acceso al HTML o CMS de tu sitio web
- ✅ La URL principal del sitio web donde se ejecutará el widget
Configurar el widget
Paso 1: Ve a la configuración del canal
- Ve a Integrations → pestaña Chatwoot
- Encuentra la tarjeta del canal Web Widget
- Haz clic en Configure o Connect
Paso 2: Introduce los datos del widget
| Campo | Descripción | Ejemplo |
|---|---|---|
| Website Name | Nombre para este widget | "Sitio principal" |
| Website Domain | La URL principal donde se ejecuta el widget. Se usa como URL del sitio del widget y como destino del enlace en los emails proactivos. | https://example.com |
| Allowed Domains | (Opcional) Dominios adicionales donde se permite incrustar el widget. Restringe qué sitios pueden cargarlo. Déjalo vacío para permitir todos los dominios. | https://example.com, https://www.example.com |
| Brand Name | Mostrado en la cabecera del widget | "Acme Realty" |
| Welcome Message | Primer mensaje mostrado a los visitantes | "¡Hola! ¿En qué puedo ayudarte hoy?" |
Website Domain es la URL principal donde funciona tu widget — es obligatorio.
Allowed Domains es opcional. Si lo rellenas, solo los sitios listados podrán cargar el widget, lo que evita incrustaciones no autorizadas. Incluye todas las variaciones donde el widget deba funcionar:
https://example.comhttps://www.example.comhttps://staging.example.com(si pruebas)
Déjalo vacío para permitir todos los orígenes.
Paso 3: Personaliza la apariencia (opcional)
| Opción | Descripción |
|---|---|
| Widget Color | Color principal de la burbuja y la cabecera |
| Position | Abajo a la derecha o abajo a la izquierda |
| Launcher Icon | Icono personalizado o burbuja de chat por defecto |
Paso 4: Guarda y obtén el código
- Haz clic en Save para crear el widget
- El snippet de código aparece automáticamente
- Copia el snippet para instalarlo
Instalar el widget
Opción 1: HTML directo
Añade el snippet antes de la etiqueta de cierre </body>. Copia siempre el snippet desde PropPilot — no reutilices versiones antiguas, ya que actualizaciones recientes habilitan la identificación automática del lead (ver más abajo).
Copia siempre el snippet directamente desde PropPilot — el snippet se regenera cada vez que abres el diálogo e incluye la lógica de identificación más reciente. La extensión exacta del código y su forma pueden cambiar entre actualizaciones; lo único que tienes que hacer es sustituir la etiqueta script antigua por la nueva.
Opción 2: Google Tag Manager
- Crea una nueva etiqueta Custom HTML
- Pega el código del widget
- Configura el activador en All Pages
- Publica el contenedor
Opción 3: WordPress
- Instala un plugin como "Insert Headers and Footers"
- Pega el código en la sección de footer
- Guarda los cambios
Opción 4: Otras plataformas
| Plataforma | Método |
|---|---|
| Webflow | Project Settings → Custom Code → Footer |
| Squarespace | Settings → Advanced → Code Injection → Footer |
| Wix | Settings → Custom Code → Body - end |
| Shopify | Online Store → Themes → Edit Code → theme.liquid |
Probar el widget
Tras la instalación:
- Visita tu sitio web en un navegador
- Busca la burbuja de chat (normalmente abajo a la derecha)
- Haz clic para abrir la ventana de chat
- Envía un mensaje de prueba
- Verifica que la respuesta aparece en el inbox de PropPilot
Prueba en una ventana de incógnito/privada para ver el widget como lo vería un visitante nuevo.
Habilitar tu agente
Para que tu agente de IA responda a través del widget:
- Ve a Agents → Selecciona tu agente
- Ve a la pestaña Channels
- Activa el bot en el canal Web Widget
Identificación automática del lead
Cuando un lead llega a tu sitio web pulsando el enlace en un email de bienvenida proactivo, el widget lo reconoce automáticamente — no tiene que volver a escribir su nombre o email, y el agente de IA ya sabe por qué propiedad estaba preguntando.
Esto funciona porque el enlace del email incluye un token seguro en la URL. El script del widget lo lee al cargar la página e identifica al visitante en el chat. Si el visitante llega a tu sitio de cualquier otra forma, el widget se abre normalmente como un chat anónimo.
El widget consulta a PropPilot el nombre actual del visitante en el momento de identificarlo. Así que si el mismo lead chateó antes por Telegram o WhatsApp y dio su nombre completo, el chat de la web muestra ese nombre actualizado — nunca el valor antiguo del momento en que se envió el email.
Mantener el snippet actualizado
Si copiaste el snippet hace tiempo, puede que la identificación automática aún no funcione. PropPilot muestra un banner Snippet outdated en el diálogo Copy Widget Script cuando es el caso. Para arreglarlo:
- Ve a Integrations → Chatwoot → Web Widget
- Haz clic en Copy Widget Script
- Sustituye el snippet actual en tu sitio web por el nuevo
- Guarda y vuelve a publicar tu sitio
Si tu widget se configuró antes de que existiera esta función, puede que tengas que desconectar y volver a conectar el canal Web Widget desde PropPilot una vez, para que la validación de identidad se habilite en el inbox subyacente.
Opciones de personalización
Mensajes de bienvenida
Configura saludos automatizados:
- Welcome Message: Mostrado cuando se abre el chat
- Away Message: Mostrado fuera del horario laboral (si está configurado)
Formulario previo al chat
Recoge información del visitante antes del chat:
- Nombre
- Correo electrónico
- Teléfono
- Campos personalizados
Configúralo en los ajustes de Chatwoot si lo necesitas.
Resolución de problemas
El widget no aparece
- Comprueba la autorización del dominio - ¿Tu dominio está en Allowed Domains, o ese campo está vacío para permitir todos los orígenes?
- Comprueba la ubicación del código - ¿El snippet está antes de
</body>? - Comprueba errores en consola - Abre las DevTools del navegador (F12) y busca errores
- Limpia la caché - Prueba un hard refresh (Ctrl+Shift+R)
El widget aparece pero no funciona
- Verifica el estado de la conexión con Chatwoot
- Revisa la configuración del webhook
- Revisa el estado del canal en PropPilot
Conflictos de estilos
Si el widget se ve mal:
- Comprueba conflictos de CSS con tu sitio
- El widget usa un iframe, así que la mayoría de conflictos son raros
- Contacta con soporte si necesitas estilos personalizados
Buenas prácticas
Recomendado
- ✅ Prueba en todos los dominios donde esté incrustado el widget
- ✅ Incluye pruebas responsive en móvil
- ✅ Configura mensajes de bienvenida apropiados
- ✅ Monitoriza las conversaciones con regularidad
- ✅ Actualiza Allowed Domains al añadir nuevos sitios (si usas esa restricción)
Evita
- ❌ Incrustar el widget en un dominio que tengas bloqueado en Allowed Domains (no se cargará)
- ❌ Usar mensajes de bienvenida genéricos
- ❌ Ignorar el widget en dispositivos móviles
- ❌ Olvidar habilitar el agente de IA
¿Qué sigue?
Configura canales adicionales: