<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width: device-width, initial-scale=1.0″ />
<title>AI voice chatbot | DNAC AI</title>
<style>
body {
font-family: monospace;
background: rgb(2, 0, 36);
background-image: linear-gradient(140deg,
hsl(0deg 0% 0%) 0%,
hsl(221deg 100% 9%) 72%,
hsl(216deg 83% 12%) 100%);
min-height: 100vh;
overflow: hidden;
color: #fff;
}
</style>
</head>
<body>
<a href=”https://dnac.ai/” target=”_blank” rel=”noopener noreferrer” style=”
position: fixed;
color: #fff;
bottom: 10px;
left: 10px;
text-decoration: none;
“>
</a>
<script>
var vapiInstance = null;
const assistant = “55448db3-5739-419b-bc17-d5977e9ac0b2”; // Substitute with your assistant ID
const apiKey = “509098d6-b70e-45f5-aa78-a3d03cdf6116”; // Substitute with your Public key from Vapi Dashboard.
const buttonConfig = {
position: “bottom”, // “bottom” | “top” | “left” | “right” | “top-right” | “top-left” | “bottom-left” | “bottom-right”
offset: “40px”, // decide how far the button should be from the edge
width: “100px”, // min-width of the button
height: “100px”, // height of the button
idle: { // button state when the call is not active.
color: `rgb(207, 159, 255)`,
type: “round”, // or “Pill”
title: “Have a quick question?”, // only required in case of Pill
subtitle: “Talk with our AI assistant”, // only required in case of pill
icon: `https://unpkg.com/lucide-static@0.321.0/icons/mic.svg`,
},
loading: { // button state when the call is connecting
color: `rgb(93, 124, 202)`,
type: “round”, // or “round”
title: “Connecting…”, // only required in case of Pill
subtitle: “Please wait”, // only required in case of pill
icon: `https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg`,
},
active: { // button state when the call is in progress or active.
color: `rgb(255, 0, 0)`,
type: “round”, // or “round”
title: “Call is in progress…”, // only required in case of Pill
subtitle: “End the call.”, // only required in case of pill
icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg`,
},
};
(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
});
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}`);
});
// Function calls and transcripts will be sent via messages
vapiInstance.on(‘message’, (message) => {
console.log(message);
});
vapiInstance.on(‘error’, (e) => {
console.error(e)
});
};
})(document, “script”);
</script>
</body>
</html>
