Hello,
I am trying to embed a script on one of the page, its shown in the builder but on real page its not seen:
please help me fix this. thanks
<script>
var vapiInstance = null;
const assistant = "";
const apiKey = "";
const buttonConfig = {
position: "center",
offset: "40px",
width: "50px",
height: "50px",
idle: {
color: `rgb(93, 254, 202)`,
type: "pill",
title: "Expirance Sales with AI!",
subtitle: "Talk with James our AI sales agent ",
icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone.svg`,
},
loading: {
color: `rgb(93, 124, 202)`,
type: "pill",
title: "Connecting...",
subtitle: "Please wait",
icon: `https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg`,
},
active: {
color: `rgb(255, 0, 0)`,
type: "pill",
title: "Call is in progress...",
subtitle: "End the call.",
icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg`,
},
};
(function (d, t) {
var g = d.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,
assistant: assistant,
config: buttonConfig,
});
// Attach event listeners after the vapiInstance is initialized
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);
});
};
})(document, "script");
</script>
