Voice Widget not connecting
# support
m
I need help with the Voice Widget please. The widget shows up on my website but it doesn't connect (Stuck at "Connecting... please wait"). I tried it on two pc's and on my phone. I'm using Framer as builder and godaddy as hoster. My website: www.supernoai.com I use my public key and used both ways for the assistant (ID and config direct in website) but that didn't solve it.
var vapiInstance = null; const assistant = "<>" const apiKey = "<>"; // Substitute with your Public key from Vapi Dashboard. const buttonConfig = { position: "bottom-right", // "bottom" | "top" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right" offset: "40px", // decide how far the button should be from the edge width: "50px", // min-width of the button height: "50px", // height of the button idle: { // button state when the call is not active. color:
rgb(93, 254, 202)
, type: "pill", // or "round" title: "Have a quick question?", // only required in case of Pill subtitle: "Talk with our AI assistant", // only required in case of pill icon:
https://unpkg.com/lucide-static@0.321.0/icons/phone.svg
, }, loading: { // button state when the call is connecting color:
rgb(93, 124, 202)
, type: "pill", // or "round" title: "Connecting...", // only required in case of Pill subtitle: "Please wait", // only required in case of pill icon:
https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg
, }, active: { // button state when the call is in progress or active. color:
rgb(255, 0, 0)
, type: "pill", // or "round" title: "Call is in progress...", // only required in case of Pill subtitle: "End the call.", // only required in case of pill icon:
https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg
, }, }; (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: apiKey, // mandatory assistant: assistant, // mandatory config: buttonConfig, // optional }); }; })(document, "script");
I use my Public Key, just checked it
y
same here, even the vapi.ai website's widget is not working. It seems to be an internal issue.
m
Found the problem , now it works! Fix: You will need to place the apiKey and assistantID twice! Once at the top and then also here: g.onload = function () { vapiInstance = window.vapiSDK.run({ apiKey: apiKey, // mandatory assistant: assistant, // mandatory config: buttonConfig, // optional
y
Beautiful, congratulations! For me it's still loading without calling the assistant. Where do you place the assistantID and apiKey twice - in the vapiInstance and where else?
m
you'll need to put it in like this : apikey: 'yourkey', assistant: 'assistantid',
s
Hello, I am also using the Vapi Widget, it worked well but since 2 days it is now stuck at Connecting... I checked the code and I did put it as mentioned above... in the vapi dashboard it works well... any idea why ? @Vapi Support
v
Please tag me in threads that I was a part of from the start.