Vapi assistant not connecting to my Bubble.io app
# support
d
Hello I am trying to add the Vapi’s code snippet to the HTML of my header on Bubble.io . I pasted the code and added my public API key and my assistant ID to the code snippet as well. It now appears on my bubble app however it will not connect to my assistant. My assistant works on Vapi but on bubble it just gets stuck on Connecting… and never connects to the assistant. What could the error be? Is there something that I am not doing correctly that is not allowing my assistant to connect? https://cdn.discordapp.com/attachments/1243281525731102720/1243281526133882880/Screenshot_2024-05-23_at_3.14.35_PM.png?ex=6650e7a6&is=664f9626&hm=981fd6a3d4a48717e8522df5e2d126a6b3e545a76b6ea5a48a2498c7ddbd94d3& https://cdn.discordapp.com/attachments/1243281525731102720/1243281526934868029/Screenshot_2024-05-23_at_3.15.15_PM.png?ex=6650e7a7&is=664f9627&hm=8c7a1b897944fdaa84b1de823a7364fda88d756a3572771e604b9e0cd138cfa4&
v
Hi @doughertyjoseph, I'm an AI assistant for Vapi. I'll analyze available sources and get back to you shortly.
----------------------------- **While I generate an answer, here are some sources that might be helpful**: * [Voice Widget Example]() * [Web Calling]() * [Vapi Python SDK]() * [Create Assistant]() -----------------------------
### Answer It sounds like you're facing issues with integrating the Vapi voice widget into your Bubble.io application. One common issue could be related to the configuration or the way the widget is implemented within the Bubble.io environment. Here are a few steps and checks you can make: 1. **Ensure the API Key and Assistant ID are Correct**: Double-check that the API key and assistant ID are entered correctly in the snippet. Errors in these can prevent the assistant from connecting. 2. **Script Tag Permissions**: Make sure that Bubble.io allows external scripts to run. Sometimes, content security policies might block external scripts for security reasons. 3. **Console Errors**: Check the developer console in your browser for any errors that might indicate what is going wrong. This can provide clues, especially about network requests or JavaScript errors. 4. **CORS Settings**: Cross-Origin Resource Sharing (CORS) settings might need to be configured to allow your Bubble.io app to communicate with Vapi servers. 5. **Use the Provided SDK**: Instead of manually constructing the request, use the Vapi Web SDK as recommended. Here’s how you can initialize your Vapi instance using the SDK:
Copy code
javascript
import Vapi from '@vapi-ai/web';

const vapi = new Vapi('your-public-key');
vapi.start('your-assistant-id');
[(1)]() If you have followed all the steps correctly and still face issues, it might be beneficial to review the integration steps or reach out for more specific support directly related to Bubble.io's handling of external scripts. Additionally, ensure that the version of the script you are using is the latest, as older versions might have compatibility issues or bugs.
v
Got it. Tagging @User for additional help.
2 Views