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

# Karta z widżetem

## Omówienie

Hostuj małą stronę HTML, która ładuje [widżet agenta](/docs/pl/eleven-agents/customization/widget), i udostępnij ją jako **kartę Teams**. Użytkownicy otwierają kartę i rozmawiają z agentem w kliencie Teams — bez numeru telefonu i telefonii. To najprostsze rozwiązanie; użyj go do wewnętrznych asystentów samoobsługowych i demonstracji.

![Widżet agenta ElevenLabs otwarty na karcie Microsoft Teams](/docs/_fern-img/8fedd2110258c6751012619128601214cdfcd4a11aaa832f62050c00c52106e7.webp)

## Jak to działa

Widżet jest komponentem internetowym. Teams renderuje `contentUrl` karty wewnątrz webview (iframe), więc widżet działa dokładnie tak jak na stronie internetowej — w tym przechwytuje dźwięk z mikrofonu, o ile strona może być osadzona w Teams i otrzyma uprawnienia do mediów.

![Użytkownik Teams otwiera kartę, której webview osadza hostowaną stronę z widżetem agenta ElevenLabs, przesyłającym strumień audio do ElevenLabs](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/c90698c01d5e874b3a3fa8a07af5ef64620e0fe8a602155aed31bd3f1ce06273/assets/images/conversational-ai/teams-widget-architecture.svg)

> **Note**
>
> Teams **nie** uruchomi surowego `<script>` wklejonego do czatu, wiadomości ani strony Loop. Skrypt widżetu
> musi znajdować się na stronie **hostowanej przez ciebie**, którą Teams osadzi jako kartę.

## Wymagania

1. **Publiczny** [agent ElevenLabs](/docs/pl/eleven-agents/quickstart) z wyłączonym uwierzytelnianiem (karta Advanced w ustawieniach agenta). Widżety tego wymagają.
2. Host HTTPS dla jednego statycznego pliku HTML (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps itd.).
3. Uprawnienie w twojej dzierżawie do przesyłania niestandardowej aplikacji Teams ([Teams admin center → Manage apps](https://admin.teams.microsoft.com/policies/manage-apps) → przesyłanie niestandardowej aplikacji), jeśli korzystasz z opcji niestandardowej karty.

## Krok 1 — Utwórz stronę widżetu

Utwórz `agent-widget.html` z kodem osadzającym widżet i identyfikatorem agenta:

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

Wdróż ją na hoście HTTPS i najpierw sprawdź w zwykłej przeglądarce, czy się ładuje i czy mikrofon działa.

> **Note**
>
> Jeśli twój obszar roboczy korzysta ze środowiska [rezydencji danych](/docs/pl/overview/administration/data-residency),
> dodaj atrybut `server-location` widżetu, aby łączył się z twoim regionem — obsługiwane wartości znajdziesz w
> [dostosowywaniu widżetu](/docs/pl/eleven-agents/customization/widget).

> **Tip**
>
> Przetestuj stronę samodzielnie w przeglądarce, zanim przejdziesz do Teams. Jeśli mikrofon tam nie działa,
> nie zadziała też w webview Teams.

## Krok 2 — Dodaj ją do Teams

Masz dwie opcje, od mniej do bardziej niezawodnej dla głosu.

### Opcja A — Karta Website (najszybsza, może być tylko linkiem)

W czacie lub kanale wybierz **+ Add a tab → Website**, wklej adres HTTPS i zapisz.

> **Warning**
>
> Wbudowana karta **Website** czasem otwiera stronę jako zewnętrzny link zamiast ją osadzać — a nawet gdy jest osadzona,
> dostęp do mikrofonu w webview desktopowej aplikacji Teams może być zablokowany. Jeśli głos nie działa, użyj opcji B.

### Opcja B — Niestandardowa aplikacja z kartą (zalecana dla głosu)

Mała niestandardowa aplikacja Teams deklaruje stronę jako statyczną kartę **i** żąda uprawnienia do mediów, dzięki czemu mikrofon działa niezawodnie w Teams.

#### Utwórz manifest

Utwórz `manifest.json`. Zastąp `your-domain.com` swoim hostem i ustaw unikalny GUID dla `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"]
}
```

Kluczowe pola dla głosu to **`devicePermissions: ["media"]`** (mikrofon) oraz uwzględnienie każdej domeny, z którą łączy się strona, w **`validDomains`** (`unpkg.com` dla skryptu widżetu, `*.elevenlabs.io` dla agenta).

#### Spakuj aplikację

Dodaj `color.png` (192×192) i `outline.png` (32×32, przezroczysty) obok manifestu, a następnie spakuj manifest i dwie ikony w **głównym** katalogu archiwum:

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

#### Prześlij i otwórz

W Teams: **Apps → Manage your apps → Upload an app → Upload a custom app**, wybierz `voice-agent.zip`, a potem otwórz kartę **Voice Agent** i przyznaj dostęp do mikrofonu, gdy pojawi się prośba.

> **Tip**
>
> Administratorzy Teams mogą pominąć interfejs klienta i opublikować aplikację dla całej organizacji z PowerShell — wtedy pojawi się ona dla wszystkich w **Apps → Built for your org**:
>
> ```powershell
> Connect-MicrosoftTeams
> New-TeamsApp -DistributionMethod organization -Path ./voice-agent.zip
> ```

Jeśli nie pojawi się prośba, otwórz menu rozwijane karty i wybierz **App permissions**, aby ręcznie przyznać dostęp do mikrofonu:

![Menu rozwijane karty Teams z wyróżnioną opcją App permissions](/docs/_fern-img/308d95d230864371f4ad2cd8b329c503e672878788a1fdcbc49ab2ce6aa8ce7d.webp)

## Krok 3 — Zezwól Teams na osadzenie strony

Twój host musi zezwalać Teams na wyświetlanie strony w iframe. Jeśli kontrolujesz nagłówki odpowiedzi, ustaw:

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

Jeśli Teams nadal otwiera stronę w przeglądarce zamiast ją osadzać, strona jest blokowana przed osadzeniem w iframe — popraw CSP / `X-Frame-Options` na hoście.

## Rozwiązywanie problemów

#### Karta otwiera stronę w przeglądarce zamiast ją osadzać

Strona jest zablokowana przed wyświetleniem w iframe. Usuń wszelkie `X-Frame-Options: DENY/SAMEORIGIN` i ustaw
pokazane wyżej CSP `frame-ancestors`, aby zezwolić na domeny Teams. Niestandardowa aplikacja z kartą (opcja B)
jest też bardziej niezawodna niż wbudowana karta Website.

#### Widżet się ładuje, ale mikrofon nie działa

To warstwa uprawnień webview Teams. Użyj **niestandardowej aplikacji z kartą** z
`"devicePermissions": ["media"]` i przyznaj aplikacji dostęp do mikrofonu w Teams (menu karty
→ **App permissions**). Teams w przeglądarce i aplikacja desktopowa Teams działają inaczej — przetestuj oba. Jako
rozwiązanie awaryjne zaoferuj link „Otwórz w przeglądarce”.

#### Widżet nigdy się nie pojawia

Sprawdź, czy agent jest **publiczny** z wyłączonym uwierzytelnianiem (ustawienia **Advanced** agenta) oraz
czy `unpkg.com` i `*.elevenlabs.io` znajdują się w `validDomains` manifestu.

## Przydatne linki

* [Dostosowywanie widżetu](/docs/pl/eleven-agents/customization/widget)
* [Wymagania kart Teams](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements)
* [Tworzenie karty osobistej](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab)
* [Uprawnienia urządzeń Teams](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/native-device-permissions)