Cannot mute/unmute call from vapi Web widget
# support
t
Are we able to use the vapi.setMuted(true); using the voice widget? (took vapi.setMuted(); from web SDK docs not widget docs) It says it's undefined and that the built in function doesn't exist. I am using the assistant object in the voice widget example but for some reason I can't use **vapiInstance.isMuted(); **or anything is it just straight up not built in? I know for the sdk we can use that but i assume it would be the same with the widget i just get TypeError: vapiInstance.setMuted is not a function. (In 'vapiInstance.setMuted(true)', 'vapiInstance.setMuted' is undefined)" vapiInstance is defined in this scope which leads me to believe we can't set the call to be muted from that object. doesn't work for the vapi object while grabbing the sdk, the vapi instance, nor the assistant object. I'm just using a setup like this. vapiObject is created when loading in the sdk and the vapiInstance is from running that object. isMuted and setMuted don't work in either of those. Am i doing this incorrectly or does it just not exist for the web widget. The widget documentation doesn't cover muting at all so not sure unless someone is able to clarify here. I feel like it has to be possible through the widget and i'm just not doing it correctly. Was going off the web SDK docs which i know doesn't directly align with the widget but regardless I thought it would have the built in muting functions given that it has several event listeners. Thanks so much for taking the time to read this! Also sorry its such a long message, i posted in general and didn't hear back so i'm trying to provide as many details as I can here. This is the final final thing I need to get working with vapi, thanks again and I really love the platofrm!
v
Hi @Tedros, I'm an AI assistant for Vapi. While a team member reviews this question, I'll look through relevant sources and see if I can provide suggestions. Please tag @Vapi Support with any follow-up questions.
----------------------------- **While I generate an answer, here are some sources that might be helpful**: * [Vapi iOS SDK]() * [Vapi Web SDK]() * [Voice Widget Example]() * [Vapi Flutter SDK]() -----------------------------
### Answer The methods
vapi.setMuted(true);
and
vapiInstance.isMuted();
you've mentioned are indeed part of the Vapi Web SDK functionalities, as highlighted in the documentation for the Vapi Web SDK [(1)]() . These methods are used to mute and unmute the microphone during a call and check the mute status, respectively. However, if you're working with the Vapi Voice Widget, as indicated by your reference to using an assistant object in the voice widget example, it's important to note that the Voice Widget example documentation [(2)]() does not explicitly mention support for
setMuted
or
isMuted
functions directly within the widget. The Voice Widget documentation primarily focuses on integrating the widget into your site, customizing the appearance, and handling events but doesn't cover all the functionalities available in the SDKs for direct voice call manipulation like muting or unmuting. Your observation that
vapiInstance.setMuted
and
vapiInstance.isMuted
are not recognized as functions suggests that these specific methods might not be exposed or available in the same manner within the context of the Voice Widget. This could be due to differences in how the Voice Widget is designed to operate compared to direct SDK integration, focusing more on providing a simplified interface for embedding voice assistant capabilities on web pages without requiring detailed control over the call's audio states. For detailed control over the call states, including muting and unmuting, using the Vapi Web SDK directly, as you've initially tried, is the recommended approach where these functions are explicitly defined and documented [(1)]() . If muting and unmuting capabilities are critical for your use case withi
n the widget context, I recommend reaching out to Vapi support for more detailed guidance on achieving this functionality with the Voice Widget or if there are alternative solutions or updates that might support your requirements.
Got it. Tagging @User for additional help.
t
i figured, the widget doesn't support those specific built in functions but I imagine there is some way to mute/unmute from within the widget? Your Ai assistant is pretty cool btw guys
I posted an issue in the web sdk github repo with code snippets and some specific details like Nikhil instructed. Basically what's happening is when trying to access setMuted() from the vapiInstance object of course isn't working, so I added a function for it which adds it as an accessible method iin the vapiInstance object. the issue is in that function i use the sdk object and try to access setMuted() from there but for whatever reason it's not accessible there either. That object is literally just loading in the sdk directly . so to recap, the sdk object itself, vapiObject (which is just in sdk.run), and vapiInstance object all cannot access setMuted which makes me think it doesn't exist in the script i'm using. Given that I have added setMuted as an accessible method in the vapiInstance object that is not the issue, the issue is that the script itself doesn't appear to have that built in. Could someone take a look at that and tell me i'm just an idiot and missed something simple lol. Posted this in general as well but haven't really been able to get through to anyone so posting here as well. thanks. Sorry for all the long messages, I am trying to give you all as many details as possible so you aren't in the dark on what i'm doing. thanks again.
s
Hello @Tedros, This is the code that I got from the team member. Please take a look at it and let me know if you need to ask anything about this code.
Copy code
js
<script>
  (function (d, t) {
    var g = document.createElement(t),
      s = d.getElementsByTagName(t)[0];
    g.src =
      "https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);

    g.onload = function () {
      const vapi = window.vapiSDK.run({
        apiKey: "", // required
        assistant: assistant, // required
        config: buttonConfig // optional
      });

      if(vapi) {
        // Extend more using vapi

        // This is where you can call any method on vapi similar to web sdk. 

         vapi.isMuted(); // false
         vapi.setMuted(true);
         vapi.isMuted(); // true

      }
    };
  })(document, "script");
</script>
t
I already have that setup, the problem is that in the exended section you have provided, it just says it doesn't exist. I have already tried multiple configurations of the widget including the code you have provided but the setMuted function is not recognized no matter which object you call it from. I sent literally 13 hours yesterday going through the sdk and the widget, in the script provided for the widget, you cannot use setMuted from client end
i scraped through the entirety of https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js no matter what object i use, start() and stop() are accessible methods, but setMuted is not accessible
see, setMuted is not acessible. this is from my own code where I look at all accessible emthods and everything but setMuted exists. Wether I load it the way you have specified in the code snippet, or I load it the way i did, the same methods are accessible
I tried adding the method directly and then accessing it from the sdk object like below, and it just straight up doesn't exist in the sdk. As you can see it shows up as an available function because i added it manually, but in the code where i try to actually execute sdk.setMuted, you can see it does not exist in that object either. I have provided a tonnnn of info on what's going on here, is anyone able to figure it out? the object sdk is literally "const sdk = window.vapiSDK;" and start(), stop, etc are there but setMuted is not. It's accessible through the package, but in the widget it's not. Maybe i messed something up? But i have spent many many hours going through everything and it looks like we just can't access setMuted from the widget. I am aware we shouldn't be adding setMuted itself and the sdk object is just undefined here, i did this for testing though and it appears setMuted is the only one that can't be accessed. I have also passed in the actual sdk object that is defined int the function and again, setMuted is not accessible so I can't run sdk.setMuted(state) in the function i wrote because it doesn't exist. These are just a couple screenshots of the many configurations i have tried
sorry for all the long messages, trying to provide you all with every piece of detail I can so you all can understand what i'm doing to the fullest extent. I don't think this will work with the widget unless there are changes to the widget itself. setMuted is not accessible wether I do it the way you have instructed or my way which is a bit more customized
@Sahil is there anyway one of your coworkers can look at this directly? I know its a saturday, but if one of the developers who worked on the widget could even glance at this, it would save me so much time. I need to know for sure that the widget just doesn't support it. It looks impossible as of now but maybe the dev knows a way. If they can confirm that yeah "it's not accessible from the widget", I will scrap the whole thing right now and move onto something else. I feel like i'm wasting my time on this since it's evidently not accessible from client side . Maybe im completely wrong, that would be the best case scenario because I want to be wrong here lol. muting is such a simple yet extremely useful UX feature that i'd like to implement. thanks!
s
I already mentioned it. @zoratrox360 will help you with the issue.
t
ah didn't see that, thanks. Any idea when that may be? I have to either solve this or ditch the idea by early next week. have a great weekend 🙂
z
Hi @Tedros, the issue is fixed. Can u check it. If still not working, try incognito or clearing your cache.
t
Yes it works! thanks so much for exposing that as a method. That's a huge win for my dev process
@zoratrox360 thanks for everything and @Sahil thanks for reaching out to them for me. This has been a huge help and will be beneficial to many other devs. I was just going to use the sdk but wiht my tech stack i'm required to use the widget. The widget is great but the muted functionality was the only thing i needed