web snippet not showing, problem with the "z-index...
# supportc
currojr
11/14/2024, 11:46 AMI’m trying to add the web snippet from VAPI to my new webpage, but even after following the documentation, watching videos, and asking ChatGPT, I’m still not getting any results. For some reason, the snippet works when I test it locally, but when I copy it and upload it to Hostinger (where my website is hosted), it doesn’t give me any errors, and the webpage is there, but it seems like the CSS is covering it, making it invisible and non-existent as a result. I’m not sure what else to do; ChatGPT has given me code modifications to prioritize it, but it’s still not working.
here is the url for now of the site: https://fvg-solution-mp4n1vz2l0tvrao6.builder-preview.com/
https://cdn.discordapp.com/attachments/1306585983848026132/1306585984162463755/Screenshot_2024-11-12_at_13.38.30.png?ex=67373485&is=6735e305&hm=da466b8e4f604ac448b2f50d86c81d9f624b2c4473367a849681e8f299bfa13f&
https://cdn.discordapp.com/attachments/1306585983848026132/1306585984640618506/Screenshot_2024-11-12_at_13.54.18.png?ex=67373485&is=6735e305&hm=21cd87ba13f052221f5b923677ecc6d22f8bc69ea941d51eb9f5d1f75f4bbd11&
https://cdn.discordapp.com/attachments/1306585983848026132/1306585985378942976/Screenshot_2024-11-12_at_13.41.18.png?ex=67373486&is=6735e306&hm=0d3ebb0011e4fb6812a92f7019702eed74de4943920e84f75d10f04dc3242ffc&
https://cdn.discordapp.com/attachments/1306585983848026132/1306585985840185364/Screenshot_2024-11-12_at_13.39.56.png?ex=67373486&is=6735e306&hm=b6e10c69ce613019c4461ae4c51f2ce022521ee4a1d979036e9e7da5bce25847&
currojr
11/14/2024, 11:59 AMHere is the code I am putting into my page but the website snippet get covers by the background of the website
var vapiInstance = null;
const assistant = "";
const apiKey = "";
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");
s
Shubham Bajaj
11/15/2024, 11:13 AMHey @currojr check this code for reference, then you can align the voice ai button wherever your require.
https://codesandbox.io/p/sandbox/nedzo-vapi-2s4nnq
c
currojr
11/16/2024, 5:54 PMthanks man but it isnt showing still
s
Shubham Bajaj
11/16/2024, 7:20 PMCan you explain a bit, what's not showing?
c
currojr
11/20/2024, 1:12 PMI just solved it I had to force the sdk to change the zindex value for the bottom property in the web snippet, here is what i put at the end.
console.log("vapiSDK successfully initialized.");
// Apply custom styles to the button after rendering
setTimeout(() => {
const button = document.querySelector("#vapi-support-btn");
if (button) {
button.style.zIndex = "999";
button.style.position = "fixed"; // Ensure it's above other elements
}
}, 500); // Delay to ensure the button is rendered
} catch (error) {
console.error("Error initializing vapiSDK:", error);
}
} else {
console.error("vapiSDK is not available.");
}
};
scriptTag.onerror = function () {
console.error("Failed to load the vapiSDK script.");
};
})(document, "script");
s
Shubham Bajaj
11/21/2024, 3:40 PM@currojr can i close this ticket?
3 Views