Web embed still not working...
# support
i
Embed on website is still just spinning...have now checked browser console and say that it's returning 403 error but when I click on it this is the error message I get: "{"message":"Missing Authorization Header.","error":"Unauthorized","statusCode":401}" 401 is apparently unsuccessful authorization; it was suggested I had used the wrong key (private instead of public) but rechecked and the assistant ID is correct and the API key is the correct public one, does anyone have any other suggestions I could try to see why I'm getting this? My script looks like this: var vapiInstance = null; const assistant = ""; // Substitute with your assistant ID const apiKey = ""; // Substitute with your Public key from Vapi Dashboard. const buttonConfig = {}; // 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");
v
@indierepublik It looks like you're encountering an authorization issue when trying to embed the VAPI on your website. The error message indicates that the Authorization header might be missing or incorrect. Here are a few steps you can take to troubleshoot this issue: 1. **Check the API Key**: Ensure that the
apiKey
variable in your script is set to the correct public API key from your VAPI Dashboard. It should not be the private key. 2. **Check the Assistant ID**: Verify that the
assistant
variable is set to the correct Assistant ID. 3. **Script Tags**: Make sure that the
<
and
>
symbols are not included in your actual
apiKey
and
assistant
values in the script. These are placeholders and should be replaced with the actual values without angle brackets. 4. **CORS Configuration**: If you're getting a 403 error, it could be related to Cross-Origin Resource Sharing (CORS) settings. Check if your server is configured to allow requests from the domain where you're trying to embed the VAPI. 5. **Browser Extensions**: Sometimes, browser extensions can interfere with the requests. Try disabling them or testing the embed in an incognito window. 6. **Network Issues**: Ensure that there are no network issues or firewalls blocking the request. 7. **Console Errors**: Look for any additional errors in the browser console that might give more insight into the issue. 8. **Contact Support**: If you've checked all of the above and the issue persists, it might be best to contact VAPI support for further assistance. Remember to replace the placeholder values with your actual
apiKey
and
assistant
values when embedding the script on your website. If you've already done this and are still facing issues, please reach out to support for more detailed assistance.
You can continue this conversation by mentioning me in the message.
i
@User is it correct that it reads "var vapiInstance = null;"
y
@indierepublik I think you should remove < and > from the below code.
Copy code
const assistant =  "<7a3f6b95-c059-49b7-845c-fbb66a1856d6>"; // Substitute with your assistant ID
  const apiKey = "<123e3d9d-8e6b-4188-80c9-3e10b4eae05e>"; // Substitute with your Public key from Vapi Dashboard.
the correct code should look like:
Copy code
const assistant =  "7a3f6b95-c059-49b7-845c-fbb66a1856d6"; // Substitute with your assistant ID
  const apiKey = "123e3d9d-8e6b-4188-80c9-3e10b4eae05e"; // Substitute with your Public key from Vapi Dashboard.
i
Thanks, I tried that after posting but still has no effect
10 Views