Web Snippet not working
# support
l
Hello, I put a web snippet in my web page using a html element on the Bubble.io editor, when I click on the phone logo to start the conversation with my virtual assistant, the state change but the conversation never begin. When I inspect my web browser page (chrome) I can see these error messages: 1) {action: 'error', errorMsg: "Failed to load call object bundle https://c.daily.… target origin 'null' in a call to 'postMessage'.", error: {…}} 2) Failed to load call object bundle https://c.daily.co/call-machine/versioned/0.66.0/static/call-machine-object-bundle.js: SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'null' in a call to 'postMessage'. 3) Failed to load call object bundle https://c.daily.co/call-machine/versioned/0.66.0/static/call-machine-object-bundle.js: SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'null' in a call to 'postMessage'. And when I see logs into my Vapi dashboard I have got this Micro Permission Error (picture) and request failed with status code 401 (picture). Can someone help me please, I think it should be simple. I can provide my . Thanks @Sahil @Shubham Bajaj https://cdn.discordapp.com/attachments/1313446179513827419/1313446181506121738/No_micropone_permission.JPG?ex=67502994&is=674ed814&hm=d3de2120b5441e7c9c6922f0fda3af074e7a32086c7d3ad9f2746a949dccbe0a& https://cdn.discordapp.com/attachments/1313446179513827419/1313446181761716236/status_401.JPG?ex=67502994&is=674ed814&hm=a0d645f962f72f0633151e16cad1af56ad69f11938a8db667085c2f5276e3652&
v
@Lesly Hello! It sounds like you're encountering a couple of issues with integrating the voice API on your Bubble.io web page. The error messages you're seeing in the Chrome inspector suggest there might be a problem with the way the web snippet is configured, particularly with the postMessage function and possibly with cross-origin permissions. The "Invalid target origin 'null'" error typically indicates that the target origin parameter in the postMessage call is either not set correctly or the call is being made to a "null" origin, which is not allowed for security reasons. Additionally, the "Micro Permission Error" and "request failed with status code 401" from your VAPI dashboard suggest there might be an authentication issue, where the API is not receiving the correct credentials or tokens needed to authorize the call setup. To help you further, I would need to see the
<script>
snippet you mentioned to understand how you're initializing the call and to check if the target origin is set correctly. Also, please ensure that you're providing the correct authentication tokens or API keys required by the voice API. If you can provide the script or any additional details about how you're setting up the call, I'll do my best to guide you through resolving these issues.
You can continue this conversation by mentioning me in the message.
l
Here is my script: var vapiInstance = null; const assistant = {transient assistant}; const apiKey = "; // deleted for this post const buttonConfig = { }; (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 }); // Place event listeners here, after vapiInstance is initialized if (vapiInstance) { vapiInstance.on('speech-start', () => { console.log('Speech has started'); }); vapiInstance.on('speech-end', () => { console.log('Speech has ended'); }); vapiInstance.on('call-start', () => { console.log('Call has started'); }); vapiInstance.on('call-end', () => { console.log('Call has stopped'); }); vapiInstance.on('volume-level', (volume) => { console.log(
Assistant volume level: ${volume}
); }); vapiInstance.on('message', (message) => { console.log(message); }); vapiInstance.on('error', (e) => { console.error(e); }); } else { console.error("vapiInstance could not be initialized."); } }; })(document, "script"); @User
[Update] My script for the web snippet working into an html/css website (conversation work smoothly), so the problem should come to Bubble.io @Sahil
[update] I found the solution, thks
11 Views