#I embeded agent widget to page, when I try call i get "An error occurredCannot read properties of
1 messages · Page 1 of 1 (latest)
Short answer: that error appears when the page can’t access the browser microphone API. The ElevenLabs widget defaults to voice mode and needs mic access to start a call.
What to check (in order):
- Embed snippet is complete. The widget requires both the custom element and the embed script, and the agent must be public (auth disabled). Docs show the exact snippet and the “public agent” requirement. (elevenlabs.io)
- Browser mic permission is granted and the correct input device is selected. See the mic troubleshooting steps in the Help Center. (help.elevenlabs.io)
- If you’re running inside a webview (e.g., Expo), serve over HTTPS so the webview can access the microphone. The Expo guide explicitly calls out HTTPS for mic access. (elevenlabs.io)
- Quick isolation: switch the agent/widget to Chat Mode (text‑only). Chat Mode does not request microphone permissions; if this works, the issue is mic access/environment. (elevenlabs.io)
- If you’re integrating via the React SDK (instead of the embed), request mic access with navigator.mediaDevices.getUserMedia after user intent, as shown in the official example. Calling this where the API isn’t available will fail. (elevenlabs.io)
If you still see the error after the above, please share:
- The exact embed snippet you used
- Where it’s hosted (HTTPS or not)
- Browser/device and whether mic permission shows as “Allowed” in site settings
References:
- Widget customization (embed snippet, public agent requirement). (elevenlabs.io)
- Microphone troubleshooting. (help.elevenlabs.io)
- Expo/webview HTTPS requirement for microphone access. (elevenlabs.io)
- Chat Mode (no audio required). (elevenlabs.io)
- React SDK usage with getUserMedia. (elevenlabs.io)
Sources:
Widget customization | ElevenLabs Documentation
How can I make sure my microphone is working? – ElevenLabs
Cross-platform Voice Agents with Expo React Native | ElevenLabs Documentation
Chat Mode | ElevenLabs Documentation
React SDK | ElevenLabs Documentation
Widget customization | ElevenLabs Documentation
How can I make sure my microphone is working? – ElevenLabs
Cross-platform Voice Agents with Expo React Native | ElevenLabs Documentation
Chat Mode | ElevenLabs Documentation
React SDK | ElevenLabs Documentation
I tried on phone tried on firedox and chrome, does this stuff even works its all sameundefined reading getUserMedia
Short answer: yes, the web Agent widget works. The error you’re seeing typically means the page isn’t actually reaching the widget’s microphone request.
Please check these items exactly as documented:
-
Use the full embed snippet (custom element + script). Missing the script will break initialization:
<elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
Also ensure the agent is public (authentication disabled) when using the widget. (elevenlabs.io) -
If you enabled a domain Allowlist for the agent, confirm your site’s domain is configured correctly (or temporarily remove it to test). Misconfigured allowlists can cause the widget to fail or disconnect. (elevenlabs.io)
-
Confirm the browser is granting microphone access. The Agents Platform requires microphone permission (it calls navigator.mediaDevices.getUserMedia). If permission was blocked, reset/allow it and pick the correct input. (elevenlabs.io)
-
To isolate microphone issues, enable “Allow Text Input” (or start in Chat Mode) in the widget settings, then try a text message first. (elevenlabs.io)
-
If you’re testing inside a site builder preview, publish the page and test on the live site; previews often don’t run custom code. (elevenlabs.io)
-
As a control test, open your agent in the ElevenLabs dashboard and click “Test AI agent” to verify it works outside your site. (elevenlabs.io)
If you still get “Cannot read properties of undefined (reading 'getUserMedia')” after the above, please share:
- the exact embed code you’re using, and
- whether the browser shows a microphone permission prompt or a blocked-permission icon.
Sources:
Widget customization | ElevenLabs Documentation
Widget customization | ElevenLabs Documentation
React SDK | ElevenLabs Documentation
Widget customization | ElevenLabs Documentation
Ajoutez le Conversational AI d'ElevenLabs Ă votre site Framer | ElevenLabs
Quickstart | ElevenLabs Documentation
when tested at elevenlabs peview it asked in popup for microphone rights but on my webpage it does not ?
Short answer: the widget only triggers the browser’s mic prompt when it’s running in voice mode and a call is actually started. If your agent/widget is in text-only (Chat Mode), or the widget can’t initialize on your domain, the prompt won’t appear.
Checks (all based on our docs):
- Verify the widget is not in Chat Mode. Chat/text-only mode does not request microphone permissions. Switch to Voice only or Voice + text in the widget settings. The React SDK docs also note that in text-only mode “the user will not be asked for microphone permissions.” (elevenlabs.io)
- Ensure you embedded the official snippet and that your agent is Public (authentication disabled). Widgets currently require public agents. (elevenlabs.io)
- If you use an Allowed domains list, add your site’s domain; otherwise the widget is restricted and won’t run. (elevenlabs.io)
- Confirm the browser hasn’t previously blocked the mic for your domain. In Chrome you can reset/allow the microphone for a site via Settings as outlined in our help article. (help.elevenlabs.io)
- Note: In preview, the dashboard uses our React SDK under the hood (which will request the mic when starting a call), so seeing a permission prompt there is expected. (elevenlabs.io)
If you want to isolate the issue, test with the minimal embed from the docs on a blank page and confirm the prompt appears when you press Start call. (elevenlabs.io)
If you’ve checked the above and the mic prompt still never appears, please share the exact embed snippet you’re using and how the widget is configured (Voice vs Chat Mode) so we can help further. (elevenlabs.io)
Sources:
Widget customization | ElevenLabs Documentation
Widget customization | ElevenLabs Documentation
Widget customization | ElevenLabs Documentation
How can I make sure my microphone is working? – ElevenLabs
Quickstart | ElevenLabs Documentation
Widget customization | ElevenLabs Documentation
Widget customization | ElevenLabs Documentation
does widget requite https certificate on page ?
Short answer: the ElevenLabs docs do not state that the web widget requires your page to be served over HTTPS.
What the docs do call out:
- How to embed the widget and required settings (public agent, optional domain allowlist). (elevenlabs.io)
- Voice modes need microphone access (the SDK examples use navigator.mediaDevices.getUserMedia), so ensure the browser can request mic permission. (elevenlabs.io)
- If you want to test without mic permissions, enable Chat Mode (text-only). (elevenlabs.io)
- If you’re not seeing the mic prompt, also check browser/OS mic settings. (help.elevenlabs.io)
If you’d like, share your embed snippet and domain allowlist status and I can compare it to the docs.
Sources:
Widget customization | ElevenLabs Documentation
React SDK | ElevenLabs Documentation
Chat Mode | ElevenLabs Documentation
How can I make sure my microphone is working? – ElevenLabs
I think voice has to go over https and that is failiing
Short answer: Voice traffic from the ElevenLabs widget does use secure transport, but your error points to the browser not exposing the microphone API rather than the network being “http vs https.”
What’s documented
- Transport: Real‑time agent conversations connect over secure WebSockets (wss) at wss://api.elevenlabs.io/v1/convai/conversation. WebRTC is also supported as an alternative connection type. (elevenlabs.io)
- Microphone access: The SDK expects navigator.mediaDevices.getUserMedia({ audio: true }) before starting a voice session. If mediaDevices is undefined, voice won’t start. (elevenlabs.io)
- Widget prerequisites: The embed requires a public agent (authentication disabled) and, optionally, you can restrict which hostnames may use it via an allowlist. (elevenlabs.io)
- Mic troubleshooting (permissions, device selection) is covered in the help center. (help.elevenlabs.io)
What this means for your case
- “Cannot read properties of undefined (reading 'getUserMedia')” occurs before any call to ElevenLabs and indicates the browser environment isn’t providing navigator.mediaDevices (so the mic API isn’t available to the page). That’s distinct from the agent’s secure wss/webrtc transport. (elevenlabs.io)
Doc‑based checks to unblock
- Verify the agent is Public (auth disabled) so the widget can initialize. (elevenlabs.io)
- Confirm your domain is permitted if you’ve set an allowlist. (elevenlabs.io)
- Ensure your page/app actually requests microphone permission (as shown in the SDK docs) and that the browser grants it; recheck mic permissions using the help center steps. (elevenlabs.io)
- If you need to avoid mic access temporarily, switch to text‑only/chat mode, which doesn’t request the microphone. (elevenlabs.io)
Note: ElevenLabs’ public docs confirm wss/WebRTC for transport but do not state that your site itself must be served over HTTPS for the widget to work. (elevenlabs.io)
Sources:
Agent WebSockets | ElevenLabs Documentation
React SDK | ElevenLabs Documentation
Widget customization | ElevenLabs Documentation
How can I make sure my microphone is working? – ElevenLabs
React SDK | ElevenLabs Documentation
Widget customization | ElevenLabs Documentation
Agent authentication | ElevenLabs Documentation
React SDK | ElevenLabs Documentation
Chat Mode | ElevenLabs Documentation
Agent WebSockets | ElevenLabs Documentation
I created webhook, agent tried used it but something went wrong where can i see what url and what post did he tried to send from that webhook to be able debug it ?