> 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 टैब

## ओवरव्यू

एक छोटा HTML पेज होस्ट करें, जो [agent widget](/docs/hi/eleven-agents/customization/widget) लोड करता हो, और उसे **Teams टैब** के रूप में दिखाएं। यूज़र टैब खोलते हैं और Teams क्लाइंट में एजेंट से बात करते हैं — किसी फोन नंबर या telephony की ज़रूरत नहीं। यह सबसे हल्का तरीका है; इसे internal self-service assistants और demos के लिए इस्तेमाल करें।

![Microsoft Teams टैब में खुला ElevenLabs एजेंट widget
](/docs/_fern-img/8fedd2110258c6751012619128601214cdfcd4a11aaa832f62050c00c52106e7.webp)

## यह कैसे काम करता है

Widget एक web component है। Teams टैब के `contentUrl` को webview (iframe) में रेंडर करता है, इसलिए widget ठीक उसी तरह चलता है जैसे वेबसाइट पर चलता है — इसमें microphone capture भी शामिल है, बशर्ते पेज को Teams में एम्बेड करने की अनुमति हो और उसे media permission मिली हो।

![Teams यूज़र एक टैब खोलता है, जिसका webview ElevenLabs एजेंट widget चलाने वाले होस्ट किए गए पेज को iframe में लोड करता है और जो ElevenLabs पर ऑडियो स्ट्रीम करता है](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/c90698c01d5e874b3a3fa8a07af5ef64620e0fe8a602155aed31bd3f1ce06273/assets/images/conversational-ai/teams-widget-architecture.svg)

> **Note**
>
> Teams किसी chat, message या Loop page में पेस्ट किए गए raw `<script>` को **नहीं** चलाएगा। Widget
> script उस पेज पर होनी चाहिए जिसे **आप होस्ट** करते हैं, और जिसे Teams फिर टैब के रूप में एम्बेड करता है।

## आवश्यकताएं

1. authentication disabled (agent settings के Advanced टैब में) वाला एक **public** [ElevenLabs agent](/docs/hi/eleven-agents/quickstart)। Widgets के लिए यह ज़रूरी है।
2. एक static HTML file के लिए HTTPS host (Vercel, Netlify, Cloudflare Pages, Azure Static Web Apps आदि)।
3. अगर आप custom-tab विकल्प इस्तेमाल करते हैं, तो अपने tenant में custom Teams app upload करने की permission ([Teams admin center → Manage apps](https://admin.teams.microsoft.com/policies/manage-apps) → custom app upload)।

## Step 1 — Widget पेज बनाएं

Widget embed और अपना agent ID शामिल करके `agent-widget.html` बनाएं:

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

इसे अपने HTTPS host पर deploy करें और पहले पुष्टि करें कि यह लोड होता है और सामान्य browser में mic काम करता है।

> **Note**
>
> अगर आपका workspace [data residency](/docs/hi/overview/administration/data-residency)
> environment पर है, तो widget का `server-location` attribute जोड़ें, ताकि वह आपके region से कनेक्ट हो —
> समर्थित values के लिए [widget customization](/docs/hi/eleven-agents/customization/widget) देखें।

> **Tip**
>
> Teams को छूने से पहले browser में पेज को standalone टेस्ट करें। अगर वहां mic काम नहीं करता, तो
> Teams webview में भी नहीं करेगा।

## Step 2 — इसे Teams में जोड़ें

वॉइस के लिए विश्वसनीयता के बढ़ते क्रम में आपके पास दो विकल्प हैं।

### विकल्प A — Website टैब (सबसे तेज़, सिर्फ़ लिंक खुल सकता है)

किसी chat या channel में **+ Add a tab → Website** चुनें, अपना HTTPS URL पेस्ट करें और सेव करें।

> **Warning**
>
> बिल्ट-इन **Website** टैब कभी-कभी पेज को एम्बेड करने के बजाय external link के रूप में खोलता है — और एम्बेड होने पर भी,
> Teams desktop webview में microphone access ब्लॉक हो सकता है। वॉइस काम न करे तो विकल्प B इस्तेमाल करें।

### विकल्प B — Custom tab app (वॉइस के लिए सुझाया गया)

एक छोटा custom Teams app पेज को static tab के रूप में घोषित करता है **और** media permission मांगता है, जिससे Teams में microphone विश्वसनीय ढंग से काम करता है।

#### Manifest बनाएं

`manifest.json` बनाएं। `your-domain.com` को अपने host से बदलें और `id` के लिए एक unique GUID सेट करें:

**`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"]
}
```

वॉइस के लिए मुख्य fields हैं **`devicePermissions: ["media"]`** (microphone) और पेज जिन सभी domains को उपयोग करता है उन्हें **`validDomains`** में सूचीबद्ध करना (`unpkg.com` widget script के लिए, `*.elevenlabs.io` एजेंट के लिए)।

#### App package करें

Manifest के पास एक `color.png` (192×192) और `outline.png` (32×32, transparent) जोड़ें, फिर manifest और दोनों icons को archive के **root** में रखकर zip करें:

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

#### Upload करें और खोलें

Teams में: **Apps → Manage your apps → Upload an app → Upload a custom app** चुनें, `voice-agent.zip` चुनें, फिर **Voice Agent** टैब खोलें और prompt मिलने पर microphone access दें।

> **Tip**
>
> Teams admins client UI को छोड़कर PowerShell से पूरे org में app publish कर सकते हैं — फिर यह सभी के लिए **Apps → Built for your org** के तहत दिखेगा:
>
> ```powershell
> Connect-MicrosoftTeams
> New-TeamsApp -DistributionMethod organization -Path ./voice-agent.zip
> ```

अगर कोई prompt नहीं दिखता, तो mic access मैन्युअल रूप से देने के लिए टैब का dropdown खोलें और **App permissions** चुनें:

![App permissions हाइलाइट किए हुए Teams टैब dropdown menu
](/docs/_fern-img/308d95d230864371f4ad2cd8b329c503e672878788a1fdcbc49ab2ce6aa8ce7d.webp)

## Step 3 — Teams को पेज एम्बेड करने दें

आपके host को Teams को पेज iframe करने की अनुमति देनी होगी। यदि आप response headers नियंत्रित करते हैं, तो यह सेट करें:

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

अगर Teams पेज को एम्बेड करने के बजाय browser में ही खोलता रहता है, तो पेज iframe embedding से ब्लॉक हो रहा है — अपने host पर CSP / `X-Frame-Options` ठीक करें।

## समस्या निवारण

#### टैब पेज को एम्बेड करने के बजाय browser में खोलता है

पेज को iframe में खोलने से ब्लॉक किया गया है। कोई भी `X-Frame-Options: DENY/SAMEORIGIN` हटाएं और
Teams domains को अनुमति देने के लिए ऊपर दिखाया गया `frame-ancestors` CSP सेट करें। Custom tab app (विकल्प B)
भी बिल्ट-इन Website टैब से अधिक विश्वसनीय है।

#### Widget लोड होता है, लेकिन microphone काम नहीं करता

यह Teams webview permission layer है। `"devicePermissions": ["media"]` के साथ **custom tab app** इस्तेमाल करें,
और Teams में app को microphone permission दें (टैब dropdown → **App permissions**)। Teams web और Teams desktop अलग तरह से काम करते हैं — दोनों को टेस्ट करें। वैकल्पिक रूप से,
"Open in browser" link दें।

#### Widget कभी दिखाई नहीं देता

पुष्टि करें कि agent authentication disabled के साथ **public** है (agent **Advanced** settings), और
manifest `validDomains` में `unpkg.com` और `*.elevenlabs.io` मौजूद हैं।

## उपयोगी लिंक

* [Widget customization](/docs/hi/eleven-agents/customization/widget)
* [Teams टैब आवश्यकताएं](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements)
* [Personal टैब बनाएं](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab)
* [Teams device permissions](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/native-device-permissions)