डिप्लॉय करेंटेलीफोनीMicrosoft Teams

Widget टैब

क्लिक करके बात करने के लिए Microsoft Teams टैब में ElevenLabs एजेंट widget एम्बेड करें।

ओवरव्यू

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

Microsoft Teams टैब में खुला ElevenLabs एजेंट widget

Teams टैब में चल रहा एजेंट widget

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

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

Teams यूज़र एक टैब खोलता है, जिसका webview ElevenLabs एजेंट widget चलाने वाले होस्ट किए गए पेज को iframe में लोड करता है और जो ElevenLabs पर ऑडियो स्ट्रीम करता है
Teams टैब में एम्बेड किया गया widget

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

आवश्यकताएं

  1. authentication disabled (agent settings के Advanced टैब में) वाला एक public ElevenLabs agent। 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 → custom app upload)।

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

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

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 काम करता है।

अगर आपका workspace data residency environment पर है, तो widget का server-location attribute जोड़ें, ताकि वह आपके region से कनेक्ट हो — समर्थित values के लिए widget customization देखें।

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

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

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

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

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

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

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

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

1

Manifest बनाएं

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

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 एजेंट के लिए)।

2

App package करें

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

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

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

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

Teams admins client UI को छोड़कर PowerShell से पूरे org में app publish कर सकते हैं — फिर यह सभी के लिए Apps → Built for your org के तहत दिखेगा:

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

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

App permissions हाइलाइट किए हुए Teams टैब dropdown menu

टैब dropdown → App permissions

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

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

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 ठीक करें।

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

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

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

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

उपयोगी लिंक