Guia com widget

Visão geral

Hospede uma pequena página HTML que carregue o widget do agente e exiba-a como uma guia do Teams. Os usuários abrem a guia e falam com o agente no cliente do Teams — sem número de telefone ou telefonia. Esta é a abordagem mais simples; use-a para assistentes internos de autoatendimento e demonstrações.

O widget do agente da ElevenLabs aberto em uma guia do Microsoft Teams — O widget do agente em execução em uma guia do Teams

Como funciona

O widget é um componente web. O Teams renderiza o contentUrl de uma guia dentro de um webview (iframe), então o widget funciona exatamente como em um site — incluindo a captura do microfone, desde que a página possa ser incorporada ao Teams e receba permissão de mídia.

Usuário do Teams abre uma guia cujo webview incorpora uma página hospedada que executa o widget do agente da ElevenLabs, que transmite áudio para a ElevenLabs — Widget incorporado em uma guia do Teams

O Teams não executará uma tag <script> bruta colada em um chat, mensagem ou página do Loop. O script do widget precisa estar em uma página hospedada por você, que o Teams então incorpora como uma guia.

Requisitos

Um agente da ElevenLabs público com a autenticação desativada (guia Avançado das configurações do agente). Os widgets exigem isso.
Um host HTTPS para um único arquivo HTML estático (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps etc.).
Permissão no seu locatário para fazer upload de um aplicativo personalizado do Teams (centro de administração do Teams → Gerenciar aplicativos → upload de aplicativo personalizado), caso use a opção de guia personalizada.

Crie agent-widget.html com a incorporação do widget e o ID do seu 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>

Implante-o no seu host HTTPS e confirme primeiro que ele carrega e que o microfone funciona em um navegador comum.

Se seu workspace estiver em um ambiente de residência de dados, adicione o atributo server-location do widget para que ele se conecte à sua região — consulte a personalização do widget para ver os valores compatíveis.

Teste a página isoladamente em um navegador antes de mexer no Teams. Se o microfone não funcionar nela, também não funcionará no webview do Teams.

Etapa 2 — Adicionar ao Teams

Você tem duas opções, em ordem crescente de confiabilidade para voz.

Opção A — Guia de site (mais rápida, pode abrir apenas como link)

Em um chat ou canal, + Adicionar uma guia → Site, cole seu URL HTTPS e salve.

Às vezes, a guia integrada Site abre a página como um link externo em vez de incorporá-la — e, mesmo quando incorporada, o acesso ao microfone no webview do Teams para desktop pode ser bloqueado. Se a voz falhar, use a Opção B.

Opção B — Aplicativo de guia personalizado (recomendado para voz)

Um pequeno aplicativo personalizado do Teams declara a página como uma guia estática e solicita permissão de mídia, o que faz o microfone funcionar de forma confiável dentro do Teams.

Criar o manifesto

Crie manifest.json. Substitua your-domain.com pelo seu host e defina um 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"]
}

Os campos essenciais para voz são devicePermissions: ["media"] (microfone) e listar todos os domínios que a página acessa em validDomains (unpkg.com para o script do widget, *.elevenlabs.io para o agente).

Empacotar o aplicativo

Adicione um color.png (192×192) e um outline.png (32×32, transparente) ao lado do manifesto e compacte o manifesto e os dois ícones na raiz do arquivo:

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

Fazer upload e abrir

No Teams: Aplicativos → Gerenciar seus aplicativos → Carregar um aplicativo → Carregar um aplicativo personalizado, selecione voice-agent.zip, abra a guia Voice Agent e conceda acesso ao microfone quando solicitado.

Os administradores do Teams podem ignorar a interface do cliente e publicar o aplicativo para toda a organização pelo PowerShell — ele aparecerá para todos em Aplicativos → Criados para sua organização:

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

Se não aparecer nenhum aviso, abra o menu suspenso da guia e escolha Permissões do aplicativo para conceder acesso ao microfone manualmente:

O menu suspenso da guia do Teams com Permissões do aplicativo destacadas — Menu suspenso da guia → Permissões do aplicativo

Etapa 3 — Permitir que o Teams incorpore a página

Seu host deve permitir que o Teams incorpore a página em um iframe. Se você controla os cabeçalhos de resposta, defina:

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

Se o Teams continuar abrindo a página em um navegador em vez de incorporá-la, a incorporação em iframe está sendo bloqueada — corrija a CSP / X-Frame-Options no seu host.

Solução de problemas

A guia abre a página em um navegador em vez de incorporá-la

A página está bloqueada para incorporação em iframe. Remova qualquer X-Frame-Options: DENY/SAMEORIGIN e defina a CSP frame-ancestors mostrada acima para permitir os domínios do Teams. O aplicativo de guia personalizado (Opção B) também é mais confiável que a guia integrada de Site.