### Answer Implementing the Vapi widget on a Bubble.io website and encountering an issue where it stays in "connecting" can be frustrating. A similar situation was described in a Discord conversation where a user faced problems with the Vapi widget getting stuck in "Connecting..." on a Bubble.io site. The issue was linked to a

DOMException

error related to the

postMessage

function, indicating a possible problem with how the iFrame or widget was interacting with its environment or the script’s configuration [(1)]() . One suggestion to address this issue is making sure that the Vapi widget script is correctly inserted into your Bubble.io page and checking for any recent changes or updates that might affect how the widget communicates. It’s crucial to ensure that the script is loaded correctly and that any domain or permission settings are configured to allow the widget to operate as expected. If the problem persists, looking into alternative methods of integrating Vapi using the Web SDK might provide a more stable solution. The Web SDK offers detailed documentation on how to set up and manage calls, events, and other functionalities, which might offer more flexibility and control over the widget’s behavior on a Bubble.io platform [(2)]() . Additionally, considering how Vapi has been successfully implemented in various environments, it might be worth exploring community forums or seeking advice from others who have integrated Vapi into Bubble.io or similar no-code platforms.

Got it. Tagging @User for additional help.

but thanks

Also saw the Iframe thing

if i dont have that activated the button doesnt appear

var vapiInstance = null; const assistant = "" const apiKey = ""; const buttonConfig = { width: "100px", height: "100px", 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

, },}; // Modify this as required (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");

This is what've got