> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.

# Pestaña con widget

## Descripción general

Aloja una pequeña página HTML que cargue el [widget de agente](/docs/es/eleven-agents/customization/widget) 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](/docs/_fern-img/8fedd2110258c6751012619128601214cdfcd4a11aaa832f62050c00c52106e7.webp)

## 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](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/c90698c01d5e874b3a3fa8a07af5ef64620e0fe8a602155aed31bd3f1ce06273/assets/images/conversational-ai/teams-widget-architecture.svg)

> **Note**
>
> 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

1. Un [agente de ElevenLabs](/docs/es/eleven-agents/quickstart) **público** con la autenticación desactivada (pestaña Advanced de la configuración del agente). Los widgets lo requieren.
2. Un host HTTPS para un único archivo HTML estático (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps, etc.).
3. Permiso en tu tenant para subir una aplicación personalizada de Teams ([Centro de administración de Teams → Administrar aplicaciones](https://admin.teams.microsoft.com/policies/manage-apps) → subir aplicación personalizada), si usas la opción de pestaña personalizada.

## Paso 1: crear la página del widget

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

**`agent-widget.html`**

```html title="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.

> **Note**
>
> Si tu espacio de trabajo está en un entorno de [residencia de datos](/docs/es/overview/administration/data-residency),
> añade el atributo `server-location` del widget para que se conecte a tu región; consulta la
> [personalización del widget](/docs/es/eleven-agents/customization/widget) para conocer los valores compatibles.

> **Tip**
>
> 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.

> **Warning**
>
> 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`**

```json title="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:

```bash
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.

> **Tip**
>
> 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**:
>
> ```powershell
> 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](/docs/_fern-img/308d95d230864371f4ad2cd8b329c503e672878788a1fdcbc49ab2ce6aa8ce7d.webp)

## 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:

```http
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.

#### El widget se carga, pero el micrófono no funciona

Se debe a la capa de permisos de la webview de Teams. Usa la **aplicación de pestaña personalizada** con
`"devicePermissions": ["media"]` y concede permiso de micrófono a la aplicación en Teams (desplegable de la pestaña
→ **Permisos de la aplicación**). Teams web y Teams de escritorio se comportan de forma distinta; prueba ambos. Como
alternativa, ofrece un enlace «Abrir en el navegador».

#### El widget nunca aparece

Confirma que el agente sea **público** y tenga la autenticación desactivada (configuración **Advanced** del agente), y
que `unpkg.com` y `*.elevenlabs.io` estén en `validDomains` del manifiesto.

## Enlaces útiles

* [Personalización del widget](/docs/es/eleven-agents/customization/widget)
* [Requisitos de las pestañas de Teams](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements)
* [Crear una pestaña personal](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab)
* [Permisos de dispositivos de Teams](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/native-device-permissions)