Instala el widget web en tu sitio
Una línea de código y tu sitio empieza a atender solo.
El widget es el chat que aparece en la esquina de tu página. Se instala pegando
una línea antes de cerrar el </body> y no necesita que nadie toque el
diseño de tu sitio.
Es el canal más rápido de poner en marcha: no depende de Meta, no hay número que verificar y funciona en minutos.
Antes de empezar
Necesitas dos cosas:
- Un agente ya creado, el que va a atender el chat.
- Acceso para pegar un script en tu sitio — tú, tu desarrollador o el gestor de contenidos que uses.
1 · Crea el canal
En el dashboard, ve a Otros canales y pulsa + Nuevo canal. En Provider elige Widget Web (chat embebible).
Ponle un nombre visible —es interno, para que lo reconozcas en la bandeja— y elige el routing:
- Compartido — RunOp recibe los mensajes y los delega según el contexto.
- Dedicado — un agente concreto atiende todo lo que entre por ahí.
Al elegir Widget Web aparecen sus pestañas: Apariencia, Comportamiento, Captación e Instalación.
2 · Autoriza tu dominio
En Comportamiento está el campo más importante y el que más falla: Dominios permitidos.
Importante
Va el origen completo, con protocolo: https://midominio.com. Escribir
solo midominio.com no funciona — el widget compara el origen del
navegador y sin https:// no coincide. Si tu sitio se ve con y sin www,
son dos orígenes distintos y van los dos.
Correcto:
https://midominio.com, https://www.midominio.com
Incorrecto — el widget dirá «Este sitio no está autorizado»:
midominio.com, www.midominio.com
Puedes poner * para abrirlo a cualquier sitio, pero entonces cualquiera podría
incrustar tu agente en su página y gastar tus créditos. Deja * solo mientras
pruebas.
Aquí mismo defines el mensaje de bienvenida —lo primero que se lee al abrir el chat— y si el widget pide los datos del visitante.
Pedir nombre y teléfono
Capturar nombre del visitante tiene tres modos:
| Modo | Qué hace |
|---|---|
never |
No pregunta nada. El visitante escribe directo |
optional |
Pide nombre y teléfono, con un botón Saltar |
required |
No deja escribir hasta que los dé |
Con optional o required aparece este formulario dentro del chat:
Consejo
optional es el punto dulce. Con never conversas más pero te quedas sin
forma de recontactar a quien no cerró; con required pierdes al que solo
quería preguntar el precio. El teléfono que dejan aquí es lo que convierte
una visita anónima en un contacto al que puedes escribirle mañana.
Una vez que lo dan, el widget lo recuerda durante esa sesión y no vuelve a preguntarlo.
3 · Ajústalo a tu marca
En Apariencia cambias cómo se ve, sin tocar código:
| Ajuste | Qué hace |
|---|---|
| Color primario | El color del botón y de la cabecera |
| Avatar del agente | La imagen que acompaña sus respuestas |
| Tema | Claro, oscuro o automático según el visitante |
| Posición en pantalla | En qué esquina aparece |
4 · Decide qué tan insistente es
La pestaña Captación es la que convierte visitantes en conversaciones — y la que más fácil se pasa de rosca:
- Etiqueta junto al botón — un texto al lado del ícono, como «Chatea con nosotros». Vacío deja solo el ícono.
- Globo de saludo — un mensaje que asoma solo, con su texto y los segundos que tarda en aparecer.
- Apertura automática — abre el chat sin que nadie lo pulse.
- Animación de pulso — el botón late para llamar la atención.
Consejo
Empieza sin apertura automática. Un chat que se abre solo encima del contenido molesta a quien venía a leer, y molestar en los primeros segundos es la forma más rápida de perder la visita. El globo de saludo con unos segundos de retraso consigue casi lo mismo sin estorbar.
Pulsa Crear. El canal aparece en la lista, activo.
5 · Pega el script
Vuelve a entrar con Configurar y abre la pestaña Instalación. Ahí está tu línea, lista para copiar:
<script src="https://TU-INSTANCIA.runop.ai/widget.js" data-key="TU_CLAVE"></script>
Pégala justo antes de </body> en cada página donde quieras el chat. Recarga:
el botón aparece en la esquina.
Nota
La clave es pública por diseño — va escrita en el HTML de tu página, donde cualquiera puede verla. No es una contraseña y no da acceso a tu cuenta. Lo que protege tu canal son los dominios permitidos.
Así se ve funcionando, con el mensaje de bienvenida que configuraste:
Y conversando, después de que el visitante deja sus datos:
Lo que hace sin que lo configures
Estas van de fábrica, no hay nada que activar:
- Se reconecta solo si el visitante pierde la señal o cambia de red.
- Recuerda el panel abierto al navegar entre páginas de tu sitio: la conversación no se pierde al pasar de una ficha a otra.
- Avisa de lo no leído con un contador sobre el botón y un sonido corto.
- Funciona en móvil, ocupando la pantalla en vez de quedarse en una esquina diminuta.
- Da formato al texto — negritas, listas y enlaces salen bien, no como asteriscos sueltos.
- Muestra el estado de la conexión, y avisa si algo falla en vez de quedarse en blanco.
- Vive aislado del resto de tu página: no puede romper tu diseño ni tu CSS romperlo a él.
Saber en qué página está el visitante
Si quieres que el agente sepa qué estaba mirando la persona, añade
data-property:
<script
src="https://TU-INSTANCIA.runop.ai/widget.js"
data-key="TU_CLAVE"
data-property="apartamento-bella-vista-2h"
></script>
Sirve para inmobiliarias, catálogos, cursos — cualquier sitio con fichas. El agente recibe esa referencia junto al mensaje y responde sobre lo que la persona tiene delante, sin que tenga que explicárselo.
Si tu sitio genera las páginas solo, funciona igual con una etiqueta en el
<head>:
<meta name="aida:property" content="apartamento-bella-vista-2h">
6 · Mira si funciona
La pestaña Métricas trae un embudo que sigue al visitante paso a paso:
| Etapa | Qué cuenta |
|---|---|
| Cargó el widget | Vieron tu página con el chat puesto |
| Vio el saludo | Les asomó el globo |
| Abrió el chat | Lo pulsaron |
| Dejó contacto | Dieron nombre o teléfono |
| Escribió un mensaje | Llegaron a conversar |
Cuenta visitantes únicos, no visitas: el número no se infla porque alguien recargue la página. Puedes ver los últimos 7, 30 o 90 días.
Cómo leer los dos porcentajes
Cada etapa muestra dos cifras, y confundirlas lleva a conclusiones opuestas:
- El primero es sobre el total de visitantes.
- El «paso» es sobre la etapa anterior — cuántos de los que llegaron ahí siguieron adelante.
En la captura, Escribió un mensaje marca 33% · paso 100%: solo un tercio del total llegó a escribir, pero todos los que dejaron su contacto lo hicieron. El problema no está en el mensaje de bienvenida; está antes, en conseguir que dejen sus datos.
Abajo aparecen dos contadores más: auto-aperturas y saludos cerrados. Ese segundo es tu medidor de molestia — si mucha gente cierra el globo sin abrir el chat, tu saludo estorba.
Qué hacer con cada caída
| Dónde cae | Qué revisar |
|---|---|
| Pocos abren el chat | El botón: poco visible, mal colocado o sin etiqueta |
| Abren pero no dejan contacto | Estás en required y asusta, o el saludo no da confianza |
| Dejan contacto pero no escriben | El mensaje de bienvenida no invita a responder |
| Muchos saludos cerrados | El globo sale muy pronto o es muy insistente |
Problemas comunes
«Este sitio no está autorizado para usar este widget»
El error más frecuente, y casi siempre es el formato del dominio. Revisa que en
Comportamiento → Dominios permitidos esté el origen completo con
https://, no solo el nombre del dominio.
Recuerda que midominio.com y www.midominio.com son orígenes distintos, y
que en pruebas locales el puerto también cuenta: http://localhost:3000 no es
lo mismo que http://localhost:8080.
No aparece el botón
Abre la consola del navegador. Si el script se cargó sin clave verás un aviso
de missing data-key: revisa que copiaste el snippet completo.
Aparece en local pero no en producción
El sitio publicado usa otro origen. Añádelo a la lista.
Se ve encima de algo importante
Cambia la posición en Apariencia. No hace falta tocar el CSS de tu sitio: el widget vive aislado y no puede romper tu diseño ni tu diseño romperlo a él.
Quiero que salude distinto en cada página
El mensaje de bienvenida es uno por canal. Para que el agente sepa dónde está
la persona, usa data-property.