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

# Widget-flik

## Översikt

Hosta en liten HTML-sida som laddar [agentwidgeten](/docs/sv/eleven-agents/customization/widget) och visa den som en **Teams-flik**. Användare öppnar fliken och pratar med agenten i Teams-klienten — inget telefonnummer eller telefoni behövs. Detta är den enklaste metoden; använd den för interna självserviceassistenter och demonstrationer.

![ElevenLabs agentwidget öppen i en Microsoft Teams-
flik](/docs/_fern-img/8fedd2110258c6751012619128601214cdfcd4a11aaa832f62050c00c52106e7.webp)

## Så fungerar det

Widgeten är en webbkomponent. Teams renderar en fliks `contentUrl` i en webview (iframe), så widgeten körs precis som på en webbplats — inklusive mikrofonupptagning, förutsatt att sidan får bäddas in i Teams och beviljas mediebehörighet.

![Teams-användare öppnar en flik vars webview visar en hostad sida med ElevenLabs agentwidget, som strömmar ljud till ElevenLabs](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/c90698c01d5e874b3a3fa8a07af5ef64620e0fe8a602155aed31bd3f1ce06273/assets/images/conversational-ai/teams-widget-architecture.svg)

> **Note**
>
> Teams kommer **inte** att köra ett rått `<script>` som klistras in i en chatt, ett meddelande eller en Loop-sida. Widgetens
> skript måste finnas på en sida **som du hostar**, vilken Teams sedan bäddar in som en flik.

## Krav

1. En **offentlig** [ElevenLabs-agent](/docs/sv/eleven-agents/quickstart) med autentisering inaktiverad (fliken Avancerat i agentinställningarna). Widgetar kräver detta.
2. En HTTPS-host för en enda statisk HTML-fil (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps osv.).
3. Behörighet i din klientorganisation att ladda upp en anpassad Teams-app ([Teams administrationscenter → Hantera appar](https://admin.teams.microsoft.com/policies/manage-apps) → uppladdning av anpassad app), om du använder alternativet med anpassad flik.

## Steg 1 — Skapa widgetsidan

Skapa `agent-widget.html` med widgetinbäddningen och ditt agent-ID:

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

Distribuera den till din HTTPS-host och kontrollera först att den laddas och att mikrofonen fungerar i en vanlig webbläsare.

> **Note**
>
> Om din arbetsyta finns i en miljö med [dataresidens](/docs/sv/overview/administration/data-residency)
> lägger du till widgetens attribut `server-location` så att den ansluter till din region — se
> [anpassning av widgeten](/docs/sv/eleven-agents/customization/widget) för vilka värden som stöds.

> **Tip**
>
> Testa sidan fristående i en webbläsare innan du börjar med Teams. Om mikrofonen inte fungerar där,
> fungerar den inte heller i Teams webview.

## Steg 2 — Lägg till den i Teams

Du har två alternativ, i stigande grad av tillförlitlighet för röst.

### Alternativ A — Webbplatsflik (snabbast, kan vara endast länk)

I en chatt eller kanal väljer du **+ Lägg till en flik → Webbplats**, klistrar in din HTTPS-URL och sparar.

> **Warning**
>
> Den inbyggda fliken **Webbplats** öppnar ibland sidan som en extern länk i stället för att bädda in den
> — och även när den bäddas in kan mikrofonåtkomst i Teams skrivbords-webview blockeras. Om rösten
> inte fungerar använder du alternativ B.

### Alternativ B — Anpassad flikapp (rekommenderas för röst)

En liten anpassad Teams-app deklarerar sidan som en statisk flik **och** begär mediebehörighet, vilket gör att mikrofonen fungerar tillförlitligt i Teams.

#### Skapa manifestet

Skapa `manifest.json`. Ersätt `your-domain.com` med din host och ange ett unikt GUID för `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"]
}
```

Nyckelfälten för röst är **`devicePermissions: ["media"]`** (mikrofon) och att lista varje domän sidan använder i **`validDomains`** (`unpkg.com` för widgetskriptet, `*.elevenlabs.io` för agenten).

#### Paketera appen

Lägg till en `color.png` (192×192) och `outline.png` (32×32, transparent) bredvid manifestet, och zippa sedan manifestet och de två ikonerna i arkivets **rot**:

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

#### Ladda upp och öppna

I Teams: **Appar → Hantera dina appar → Ladda upp en app → Ladda upp en anpassad app**, välj `voice-agent.zip`, öppna sedan fliken **Voice Agent** och bevilja mikrofonåtkomst när du uppmanas.

> **Tip**
>
> Teams-administratörer kan hoppa över klientgränssnittet och publicera appen för hela organisationen från PowerShell — den visas då för alla under **Appar → Skapad för din organisation**:
>
> ```powershell
> Connect-MicrosoftTeams
> New-TeamsApp -DistributionMethod organization -Path ./voice-agent.zip
> ```

Om ingen uppmaning visas öppnar du flikens rullgardinsmeny och väljer **Appbehörigheter** för att bevilja mikrofonåtkomst manuellt:

![Teams-flikens rullgardinsmeny med Appbehörigheter
markerat](/docs/_fern-img/308d95d230864371f4ad2cd8b329c503e672878788a1fdcbc49ab2ce6aa8ce7d.webp)

## Steg 3 — Tillåt Teams att bädda in sidan

Din host måste tillåta Teams att iframe-bädda in sidan. Om du styr svarsheaders anger du:

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

Om Teams fortsätter att öppna sidan i en webbläsare i stället för att bädda in den blockeras sidan från iframe-inbäddning — åtgärda CSP / `X-Frame-Options` på din host.

## Felsökning

#### Fliken öppnar sidan i en webbläsare i stället för att bädda in den

Sidan blockeras från att iframe-bäddas in. Ta bort eventuell `X-Frame-Options: DENY/SAMEORIGIN` och ange
`frame-ancestors` CSP som visas ovan för att tillåta Teams-domänerna. Den anpassade flikappen (alternativ B)
är också mer tillförlitlig än den inbyggda webbplatsfliken.

#### Widgeten laddas men mikrofonen fungerar inte

Detta beror på behörighetslagret i Teams webview. Använd **den anpassade flikappen** med
`"devicePermissions": ["media"]` och bevilja appen mikrofonbehörighet i Teams (flikens rullgardinsmeny
→ **Appbehörigheter**). Teams på webben och Teams för skrivbord fungerar olika — testa båda. Som
reserv kan du erbjuda en länk för att öppna i webbläsaren.

#### Widgeten visas aldrig

Kontrollera att agenten är **offentlig** med autentisering inaktiverad (agentens **Avancerade** inställningar), och
att `unpkg.com` och `*.elevenlabs.io` finns i manifestets `validDomains`.

## Användbara länkar

* [Anpassning av widgeten](/docs/sv/eleven-agents/customization/widget)
* [Krav för Teams-flikar](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements)
* [Skapa en personlig flik](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab)
* [Teams enhetsbehörigheter](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/native-device-permissions)