I am trying to get the widget to work in my web browser. I configure it using the widget at the bottom of the Assistant in the web UI. I copy the code and embed it into the html. At first I get an error about the js... so I copy it locally and run it locally. In both cases the agent will load, but the voice will not start. I have tried to use meta tags to approve the domain and the widget.umd.js. Is there a definitive guide as to what needs to be done to make this widget work seamlessly. Its not right now.

To ensure the Vapi widget works seamlessly, use the official script tag and initialize it as shown below. Make sure to replace

"your_public_api_key"

and

"assistant_id"

with your actual values:

html
<script>
  var vapiInstance = null;
  const assistant = "assistant_id"; // Your Assistant ID
  const apiKey = "your_public_api_key"; // Your Public API Key
  (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 () {
      vapiInstance = window.vapiSDK.run({ apiKey, assistant });
    };
  })(document, "script");
</script>

Try this exact snippet in your HTML and ensure your API key and Assistant ID are correct. If the voice still does not start, check your browser's microphone permissions and console for errors. Source: - [Vapi Web SDK Documentation](https://docs.vapi.ai/sdk/web)

Im using what the web told me to run... Are you saying I shouldn't use this? How can I customize the widget with the above code ? <vapi-widget public-key="redacted" assistant-id="redacted" mode="voice" theme="dark" base-bg-color="#2E303B" accent-color="#6F0A40" cta-button-color="#070707" cta-button-text-color="#ffffff" border-radius="large" size="full" position="bottom-right" title="Redacted" start-button-text="Start" end-button-text="End Call" cta-subtitle="Redacted" chat-first-message="Hey, How can I help you today?" chat-placeholder="Type your message..." voice-show-transcript="true" consent-required="true" consent-title="Terms and conditions" consent-content="By clicking 'Agree,' and each time I interact with this AI agent, I consent to t> consent-storage-key="vapi_widget_consent" >

The script you're using is outdated or wrong. Use this instead (put before ): window.vapiSDK.run({ apiKey: "YOUR_PUBLIC_API_KEY", assistant: "YOUR_ASSISTANT_ID", config: { mode: "voice" } });

Please try the above and let us know if you need additional support with the widget

I did... there is an issue with the code signing... also, the script that I was using is the one that you all just released... i just checked the July newsletter and this new feature was introduced. Neither are working.

Could you take a screenshot of the error with the js? You mentioned something about the widget.umd.js not being approved