Pestaña con widget

Descripción general

Aloja una pequeña página HTML que cargue el widget de agente y muéstrala como una pestaña de Teams. Usuarios abren la pestaña y hablan con el agente en el cliente de Teams, sin número de teléfono ni telefonía. Es el enfoque más ligero; úsalo para asistentes internos de autoservicio y demos.

El widget de agente de ElevenLabs abierto en una pestaña de Microsoft Teams — El widget de agente ejecutándose en una pestaña de Teams

Cómo funciona

El widget es un componente web. Teams muestra el contentUrl de una pestaña dentro de una webview (iframe), por lo que el widget se ejecuta exactamente igual que en un sitio web, incluida la captura del micrófono, siempre que se permita integrar la página en Teams y se le conceda permiso multimedia.

Un usuario de Teams abre una pestaña cuya webview incluye mediante iframe una página alojada que ejecuta el widget de agente de ElevenLabs, el cual transmite audio a ElevenLabs — Widget integrado en una pestaña de Teams

Teams no ejecutará un <script> sin procesar pegado en un chat, mensaje o página de Loop. El script del widget debe estar en una página que alojes tú y que Teams integrará después como pestaña.

Requisitos

Un agente de ElevenLabs público con la autenticación desactivada (pestaña Advanced de la configuración del agente). Los widgets lo requieren.
Un host HTTPS para un único archivo HTML estático (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps, etc.).
Permiso en tu tenant para subir una aplicación personalizada de Teams (Centro de administración de Teams → Administrar aplicaciones → subir aplicación personalizada), si usas la opción de pestaña personalizada.

Crea agent-widget.html con la integración del widget y el ID de tu agente:

agent-widget.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Voice Agent</title>
  </head>
  <body style="margin:0">
    <elevenlabs-convai
      agent-id="<replace-with-agent_7101k5zvyjhmfg983brhmhkd98n6>"
    ></elevenlabs-convai>
    <script
      src="https://unpkg.com/@elevenlabs/convai-widget-embed"
      async
      type="text/javascript"
    ></script>
  </body>
</html>

Despliégala en tu host HTTPS y confirma primero que se carga y que el micrófono funciona en un navegador normal.

Si tu espacio de trabajo está en un entorno de residencia de datos, añade el atributo server-location del widget para que se conecte a tu región; consulta la personalización del widget para conocer los valores compatibles.

Prueba la página de forma independiente en un navegador antes de tocar Teams. Si el micrófono no funciona ahí, tampoco funcionará en la webview de Teams.

Paso 2: añadirla a Teams

Tienes dos opciones, en orden creciente de fiabilidad para la voz.

Opción A: pestaña de sitio web (más rápida, puede ser solo un enlace)

En un chat o canal, selecciona + Añadir una pestaña → Sitio web, pega tu URL HTTPS y guarda.

A veces, la pestaña integrada Sitio web abre la página como un enlace externo en vez de integrarla, e incluso cuando se integra, el acceso al micrófono en la webview de escritorio de Teams puede bloquearse. Si falla la voz, usa la opción B.

Opción B: aplicación de pestaña personalizada (recomendada para voz)

Una pequeña aplicación personalizada de Teams declara la página como una pestaña estática y solicita permiso multimedia, lo que permite que el micrófono funcione de forma fiable dentro de Teams.

Crear el manifiesto

Crea manifest.json. Sustituye your-domain.com por tu host y establece un GUID único para id:

manifest.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.19/MicrosoftTeams.schema.json",
  "manifestVersion": "1.19",
  "version": "1.0.0",
  "id": "11111111-1111-1111-1111-111111111111",
  "developer": {
    "name": "ElevenLabs",
    "websiteUrl": "https://your-domain.com",
    "privacyUrl": "https://your-domain.com/privacy",
    "termsOfUseUrl": "https://your-domain.com/terms"
  },
  "name": { "short": "Voice Agent", "full": "ElevenLabs Voice Agent" },
  "description": {
    "short": "ElevenLabs voice agent",
    "full": "Embedded ElevenLabs voice agent"
  },
  "icons": { "outline": "outline.png", "color": "color.png" },
  "accentColor": "#000000",
  "staticTabs": [
    {
      "entityId": "voice-agent",
      "name": "Voice Agent",
      "contentUrl": "https://your-domain.com/agent-widget.html",
      "websiteUrl": "https://your-domain.com/agent-widget.html",
      "scopes": ["personal"]
    }
  ],
  "devicePermissions": ["media"],
  "validDomains": ["your-domain.com", "unpkg.com", "elevenlabs.io", "*.elevenlabs.io"]
}

Los campos clave para la voz son devicePermissions: ["media"] (micrófono) e incluir todos los dominios a los que accede la página en validDomains (unpkg.com para el script del widget y *.elevenlabs.io para el agente).

Empaquetar la aplicación

Añade un color.png (192×192) y un outline.png (32×32, transparente) junto al manifiesto y, después, comprime el manifiesto y los dos iconos en la raíz del archivo:

zip -j voice-agent.zip manifest.json color.png outline.png

Subir y abrir

En Teams: Aplicaciones → Administrar tus aplicaciones → Subir una aplicación → Subir una aplicación personalizada; selecciona voice-agent.zip, abre la pestaña Voice Agent y concede acceso al micrófono cuando se te solicite.

Los administradores de Teams pueden omitir la interfaz de cliente y publicar la aplicación para toda la organización desde PowerShell; entonces aparecerá para todos en Aplicaciones → Creada para tu organización:

Connect-MicrosoftTeams
New-TeamsApp -DistributionMethod organization -Path ./voice-agent.zip

Si no aparece ningún aviso, abre el desplegable de la pestaña y elige Permisos de la aplicación para conceder acceso al micrófono manualmente:

El menú desplegable de la pestaña de Teams con Permisos de la aplicación resaltado — Desplegable de la pestaña → Permisos de la aplicación

Paso 3: permitir que Teams integre la página

Tu host debe permitir que Teams muestre la página en un iframe. Si controlas las cabeceras de respuesta, configura:

Content-Security-Policy: frame-ancestors 'self' https://teams.microsoft.com https://*.teams.microsoft.com https://*.cloud.microsoft;

Si Teams sigue abriendo la página en un navegador en vez de integrarla, se está bloqueando la integración de la página en un iframe; corrige la CSP / X-Frame-Options de tu host.

Resolución de problemas

La pestaña abre la página en un navegador en vez de integrarla

Se está bloqueando la página para que no pueda mostrarse en un iframe. Elimina cualquier X-Frame-Options: DENY/SAMEORIGIN y configura la CSP frame-ancestors mostrada arriba para permitir los dominios de Teams. La aplicación de pestaña personalizada (opción B) también es más fiable que la pestaña integrada de sitio web.