WebChat para Microsoft Teams — la guía completa
Esta guía le acompaña por WebChat de principio a fin: desde la instalación en Microsoft Teams hasta abrirlo y probarlo en el backend y configurar los canales de entrada — widget del sitio web, WhatsApp, Instagram — y su propia IA con Azure AI Foundry y Power Automate. Cada canal llega en tiempo real al canal de Microsoft Teams correcto. Pay per Channel, configurado en minutos.
▶Encuentre todo sobre WebChat en este vídeo (12 min)Cómo funciona WebChat: una solicitud a través del widget del sitio web se enruta al canal de Microsoft Teams correcto — ambos lados muestran la misma conversación, el equipo responde con «@WebChat …» directamente desde Microsoft Teams.
Tres piezas, una plataforma
WebChat lleva todos los canales a Microsoft Teams. Opcionalmente, añada su propia IA — orquestada por Power Automate, respondida por un agente de Foundry.
Tres fases hacia un WebChat productivo
1WebChat & Microsoft Teams
- Añadir WebChat en Microsoft Teams
- Abrir y probar el backend
- Configurar WebChat
- Habilitar más administradores
- Resolución de problemas
2Configurar canales de entrada
WebChat & Microsoft Teams
Instalar, probar en el backend, configurar y autorizar administradores.
Añadir WebChat en Microsoft Teams
Puede buscar WebChat directamente en Microsoft Teams en «Aplicaciones» — o a través del Microsoft Marketplace. Luego la app se asigna al canal deseado.
Buscar «WebChat» en el Microsoft Marketplace
O abra directamente la entrada webch.at/webchat directamente. Se factura Pay per Channel en lugar de por usuario.
Instalar la app en Microsoft Teams
En la página de detalle de la app en Microsoft Teams, seleccione «Añadir».
La página de detalle de la app WebChat en Microsoft Teams.
Elegir un canal
Elija el canal de Microsoft Teams donde deben llegar las solicitudes de clientes.
Elegir el canal de destino para las solicitudes entrantes.
WebChat se presenta en el canal de Microsoft Teams
Tras la instalación, WebChat publica automáticamente su primer mensaje en el canal elegido — con una tarjeta de configuración y un botón «Configurar».
Tras la instalación, WebChat se presenta por primera vez en el canal de Microsoft Teams (recreación).
Abrir y probar el backend
Gestiona los canales y los ajustes en el backend de WebChat — con sesión iniciada vía Microsoft Entra (SSO). Pruebe el recorrido completo hasta Microsoft Teams y de vuelta.
Abrir el backend mediante SSO
webchat.inwebco.com — inicio de sesión vía Microsoft Entra, sin credenciales aparte.
Elegir un canal — llega directamente a la pestaña LiveTest
Abra en la lista de canales el que acaba de crear en Microsoft Teams. Llega directamente a la pestaña «LiveTest» — abajo a la derecha está su widget, desde el que puede enviar un mensaje de cliente de prueba en cualquier momento. Rellene el formulario, pulse «Iniciar chat» y escriba el primer mensaje.
Tras seleccionar el canal, se abre directamente la pestaña «LiveTest» (backend, vista de escritorio).
Cambiar a Microsoft Teams
Envíe un mensaje de prueba en LiveTest y cambie a Microsoft Teams: la solicitud aparece en tiempo real como hilo en el canal, con una tarjeta de contacto. Con «@WebChat message …» responde al cliente; sin mención sigue siendo comunicación interna.
En Microsoft Teams: la solicitud como hilo — se responde con «@WebChat message …».
De vuelta en LiveTest: la respuesta ha llegado
La respuesta de Microsoft Teams aparece en la pestaña «LiveTest» — el recorrido completo (cliente → Microsoft Teams → respuesta) funciona.
La respuesta de Microsoft Teams ha llegado al chat de LiveTest.
Configurar WebChat
En la pestaña «Configuración» ajusta el aspecto y el comportamiento del widget. El canal ya está activo — cada ajuste se ve al instante en LiveTest.
La pestaña «Configuración» del backend — todos los ajustes del canal en un solo lugar.
Extracto de los ajustes en detalle
Modo y colores determinan el aspecto del widget, Quick-Replies ofrecen respuestas rápidas en el primer mensaje, Indicador de escritura e inactividad mantienen viva la conversación, y el formulario inicial recopila datos de contacto antes del primer contacto.
Modo y colores
Quick-Reply-Buttons
Visibilidad del indicador de escritura
Campo del formulario inicial
Textos y remitente
Fuente
Habilitar más administradores
De forma predeterminada, solo la persona que configuró WebChat puede cambiar las configuraciones. Añada más administradores en la pestaña «Admin».
La pestaña «Admin» del backend con la lista de administradores y «Añadir admin».
Mediante «Añadir admin» introduzca una dirección de correo y guarde — la persona debe ser miembro del canal de Microsoft Teams (acceso vía Entra) y podrá luego cambiar los ajustes de este canal.
Resolución de problemas
Los escollos más comunes — y cómo resolverlos.
¿Solo «Solicitar aprobación» en lugar de «Añadir»?
🔒
WebChat
La aprobación del administrador en el Centro de administración de Microsoft Teams habilita WebChat en toda la empresa.
¿Falla el inicio de sesión por SSO?
Inicio de sesión en el backend vía Microsoft Entra (inicio de sesión único).
Más preguntas
El widget no aparece en el sitio web
Compruebe que el script está antes de la etiqueta body de cierre y que el canal está en «Activo» en el backend. Si se integra vía Google Tag Manager, publique el contenedor.
WhatsApp o Instagram no se conecta
WhatsApp requiere una cuenta de WhatsApp Business (Meta); Instagram una cuenta profesional/business vinculada a una página de Facebook. Complete por completo el inicio de sesión guiado en la pestaña correspondiente.
El flujo no se guarda
Sin licencia Power Automate Premium, los conectores premium fallan. Asigne la licencia y vuelva a guardar y publicar.
El agente no responde
Compruebe que el nombre del agente y el número de versión fijo en la config del flujo son correctos y que la suscripción de pago por uso de Azure está activa.
Más ayuda y enlaces
Configurar canales de entrada
Conectar el widget web, WhatsApp e Instagram — recibir mensajes y responder directamente desde Microsoft Teams.
Colocar el widget en el sitio web
Un único script inserta el widget — directamente en el código fuente o, sin acceso al código, mediante Google Tag Manager.
Copiar el código de inserción
En la pestaña «Insertar», copie el código del script al portapapeles.
La pestaña «Insertar» del backend con «Copiar al portapapeles».
Insertar antes del fin del body
Coloque el script justo antes de la etiqueta body de cierre de su sitio web.
Publicar y cargar
Guarde/publique la página — el widget aparece abajo a la derecha.
El widget de WebChat colocado abajo a la derecha del sitio web.
Alternativa: inserción mediante Google Tag Manager
Sin acceso al código fuente, inserta el script como una etiqueta HTML personalizada en Google Tag Manager.
Abrir Google Tag Manager
Vaya a tagmanager.google.com y seleccione el contenedor de su sitio web (el contenedor GTM debe estar integrado una vez en el sitio).
Crear una nueva etiqueta «HTML personalizado»
En Google Tag Manager: «Etiquetas» → «Nueva» → elija el tipo de etiqueta «HTML personalizado» y pegue el código de inserción de WebChat exactamente — incluidas las etiquetas <script>. Deje desactivada la opción «Admitir document.write».
Crear un activador «Vista de página» y asignarlo a la etiqueta
En Tag Manager, en «Activadores», cree un activador de tipo «Vista de página» y asígnelo a la etiqueta HTML personalizada. «Todas las páginas» carga el widget en todo el sitio; o diríjalo con una condición — p. ej. «La URL de la página contiene /contacto»: entonces todas las subpáginas de esa ruta reciben exactamente este widget.
Previsualizar, probar y publicar
Use «Vista previa» para comprobar que el widget carga en la página. Luego «Enviar» → «Publicar» — el widget está activo, sin cambiar el código fuente del sitio.
Conectar y configurar WhatsApp
En la pestaña «WhatsApp Business» conecta su cuenta de WhatsApp Business (Meta) mediante un inicio de sesión guiado.
Abrir la pestaña «WhatsApp Business»
En el backend del canal deseado, abra la pestaña «WhatsApp Business».
La pestaña «WhatsApp Business» del backend (vista de escritorio).
Iniciar sesión con Facebook
Conexión a través del WhatsApp Business Manager (Meta). Se requiere una cuenta de WhatsApp Business. La ventana emergente que aparece es un proceso definido por Meta — simplemente siga los pasos de la ventana.
Verificar y registrar el número
Flujo guiado: inicio de sesión → verificación → registro → conectado. Para la verificación recibe una llamada con un código. Después, el número, el enlace para compartir y el código QR están listos (vea la pestaña de arriba).
Configurar
Ajuste el nombre, el número y el botón «Chat on WhatsApp» en el área de configuración.
Escribir un mensaje de WhatsApp, responder desde Microsoft Teams
Una vez conectado: escanee el código QR generado, WhatsApp se abre y puede escribir un mensaje de inmediato — llega en tiempo real al canal de Microsoft Teams correcto.
Una solicitud por WhatsApp se enruta automáticamente al canal de Microsoft Teams correcto — el equipo responde al cliente con «@WebChat …».
Conectar Instagram
En la pestaña «Instagram» vincula una cuenta de Instagram profesional/business.
Abrir Instagram en el navegador e iniciar sesión
Inicie sesión en el navegador con el perfil deseado.
Abrir la pestaña «Instagram Business» y hacer clic en «Conectar»
En el backend del canal deseado, abra la pestaña «Instagram Business» y haga clic en «Conectar» — se inicia el inicio de sesión de Meta.
La pestaña «Instagram Business» del backend (vista de escritorio).
Vincular y confirmar la cuenta
Confirme el acceso en el diálogo de Meta — WebChat recibe un token de acceso y muestra la cuenta conectada.
El token sigue siendo válido
El token se renueva automáticamente mientras la cuenta permanezca conectada.
Recibir un DM de Instagram, responder desde Microsoft Teams
Un DM de Instagram (p. ej. en respuesta a un anuncio) llega al canal de Marketing — respondido directamente desde Microsoft Teams.
Configurar su propia IA
Crear un agente de Foundry, controlarlo con Power Automate y probarlo desde todos los canales.
Crear un agente de IA
La IA se ejecuta como agente propio en su tenant (ai.azure.com): crear un proyecto, crear un agente de prompt con un modelo, añadir la búsqueda web como grounding, publicar.
Crear un proyecto
En el menú de proyectos de Foundry, cree un proyecto nuevo (o abra uno existente).
Crear un agente
Cree un agente de prompt y elija un modelo. Recomendamos un agente propio por canal.
Microsoft Foundry — el resumen de agentes.
Definir el prompt del sistema
Defina el rol, el tono y las reglas de escalado — p. ej. «Eres el agente de soporte de la empresa X, responde con cortesía; escala al equipo ante intención de compra o reclamación.»
Grounding: activar la búsqueda web
Añada la búsqueda web como grounding e introduzca los dominios/URL permitidos (p. ej. webchat.cloud) para que el agente responda solo a partir de sus fuentes — no del conocimiento general del modelo.
El diálogo «Añadir herramienta de búsqueda web»: conectar la búsqueda Bing personalizada con sus dominios (nombres de ejemplo neutros).
Conectar archivos de conocimiento
Añada sus propios documentos (PDF, FAQ, listas de precios) como almacén vectorial. Cuanto más ajustado el grounding, más precisas y verificables las respuestas — el agente cita sus fuentes.
Probar en el playground
Antes de publicar: pruebe el agente directamente en el playground de Foundry y compruebe cómo responde — ajuste prompt, grounding y tono.
El agente en el playground de Foundry: envíe solicitudes de prueba, compruebe respuestas y fuentes.
Publicar y anotar nombre/versión
Guarde y publique el agente. Anote el nombre del agente y la versión publicada — necesitará ambos en la parte 10 para el flujo de Power Automate. Use siempre un número de versión fijo, no «latest».
Configurar el flujo de control
make.powerautomate.com — cree las conexiones, defina el activador por palabra clave, pegue el código del flujo como scope e introduzca la config del agente.
Crear las conexiones
Cree Microsoft Teams, Content Conversion y Azure AI Agent Service. El endpoint del Azure AI Agent Service lo obtiene en Foundry desde el menú de proyecto → «Detalles del proyecto».
Las tres conexiones en Power Automate: Microsoft Teams ([email protected] — WebChat publica con este usuario en Microsoft Teams), WebChat-Foundry-Agents (Azure AI Foundry Agent Service — endpoint de los detalles del proyecto de Foundry) y Content Conversion.
En Foundry, en «Detalles del proyecto», están el endpoint del proyecto y la región — introdúzcalos en la conexión de Azure AI Agent Service.
Configurar el activador por palabra clave
«Cuando se mencionan palabras clave» en el canal de destino. De forma predeterminada, WebChat envía la palabra clave pp — no la elimine. Para personalizarla, defina su propio valor en la pestaña de backend «Power Platform» e introduzca exactamente ese valor aquí como palabra clave. La palabra clave se envía incluso si desactiva su visualización — así no aparece en cada mensaje. Al principio la visualización está activada a propósito para que el mecanismo sea visible.
Activador «When keywords are mentioned»: Message type = Channel, elija la entrada Team y Channels item y defina la palabra clave (predeterminado «pp»).
La palabra clave del activador (predeterminado «pp») se puede ajustar en la pestaña de backend «Power Platform».
Pegar el código del flujo
Copie el código de flujo preparado desde webch.at/json. En el diseñador, bajo el activador, haga clic derecho en el «+» para insertar una nueva acción y use «Mi portapapeles» para pegar el scope copiado — todo el flujo (condición → agente de IA → Adaptive Card) se inserta con él. Después asigne a cada acción la conexión correspondiente.
Primero descargue/copie el JSON desde webch.at/json. Luego, bajo el activador, haga clic en «+» (o clic derecho) → «Pegar» para insertar el scope completo.
Introducir la config del agente
En la acción Inicializar variable, introduzca Config_agent_name y Config_agent_version de la parte 9 (número de versión fijo, no «latest»). Añada más nodos con «+» o clic derecho → «Añadir acción» (p. ej. recordatorio, escalado, mención de hot-lead). Por último, guarde y publique.
Probar: iniciar una conversación en LiveTest
Inicie una conversación de prueba en la pestaña «LiveTest» — el agente de IA responde automáticamente. La misma conversación aparece en el canal de Microsoft Teams, donde el equipo puede tomar el control en cualquier momento.
LiveTest: el visitante pregunta — el agente de IA (Foundry) responde en tiempo real.
La misma conversación transcurre en el canal de Microsoft Teams «Support» — el agente de IA responde vía @WebChat, el equipo puede tomar el control en cualquier momento.
Opcional: datos en vivo como Adaptive Card
Opcionalmente, puede crear más Adaptive Cards en Power Automate e incorporarlas a la conversación — para ofrecer al agente información interna, datos en vivo de CRM/ERP u otros flujos de trabajo directamente en el canal de Microsoft Teams.
Probar el agente desde todas las fuentes
Un agente, todos los canales: lance solicitudes a través del widget, WhatsApp e Instagram y compruebe el comportamiento en Microsoft Teams uno por uno.
Ejemplos: escalado, hot-lead y control del bot
Estos comportamientos se configuran mediante las variables de config del flujo en Power Automate (parte 10) — p. ej. intervalo de recordatorio, mención de escalado y detección de hot-lead.
WebChatEscaladoWebChatHot-leadWebChatRecordatorioControl del chatbotConmutable por conversación (human-in-the-loop)Lista de comprobación
- ✓Respuesta: envíe un mensaje de cliente de prueba → el agente responde en el canal.
- ✓Escalado: el traspaso se notifica al equipo, el bot se desactiva, se publica la tarjeta de activación + recordatorio.
- ✓Reactivar: vuelva a activar el bot mediante la tarjeta de activación.
- ✓Hot-lead: pruebe la intención de compra → mención al equipo + alerta de lead, el bot sigue activo.
- ✓Prueba de concurrencia: varios mensajes seguidos rápidamente → llega una respuesta, sin respuestas múltiples.
Un chatbot de soporte con IA para Microsoft Teams — sin una segunda bandeja de entrada
WebChat lleva en tiempo real las solicitudes de WhatsApp, Instagram, TikTok y del widget del sitio web al canal de Microsoft Teams correcto. El enrutamiento inteligente asigna automáticamente cada solicitud al departamento responsable — producto a soporte, empleo a RR. HH., campañas a marketing. Sin cambiar de herramienta, sin un segundo inicio de sesión, sin una segunda bandeja de entrada.
La IA se ejecuta como agente de Azure AI Foundry propio en su tenant: sin dependencia de proveedor, total trazabilidad mediante los registros de auditoría de Microsoft y human-in-the-loop. Power Automate orquesta respuestas, escalado y recordatorios; las Adaptive Cards muestran datos en vivo de CRM y ERP directamente en el chat. Los permisos e identidades provienen por completo de Microsoft Entra.
WebChat se instala como cualquier app de Microsoft Teams directamente desde Microsoft Teams o el Microsoft Marketplace, y se factura Pay per Channel en lugar de por usuario — con usuarios ilimitados por canal. La configuración básica se completa en menos de diez minutos; el chatbot de IA lo añade después con Foundry y Power Automate. Todos los precios en webch.at/precios.
