Skip to content

Commit bc80c72

Browse files
kaustubhkagrawalkaustubhkagrawal
committed
update Example index.html and Readme.md
1 parent 2dcaa9f commit bc80c72

File tree

4 files changed

+224
-35
lines changed

4 files changed

+224
-35
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ To add Vapi to your website, include the following javascript snippet in your HT
2727

2828
g.onload = function () {
2929
const vapi = window.vapiSDK.run({
30-
apiKey: "", // required
30+
apiKey: "", // required Use your Public Key
3131
assistant: assistant, // required
3232
config: buttonConfig // optional
3333
});

‎example/index.html

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<html>
2+
<head>
3+
<title>VAPI</title>
4+
<meta charset="UTF-8" />
5+
6+
<style>
7+
.vapi-btn {
8+
position: "relative";
9+
top: 0;
10+
left: 0;
11+
bottom: 0;
12+
right: 0;
13+
width: fit-content;
14+
margin: 100px;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<button id="log-action" onClick="logUserAction()">Log Action</button>
20+
21+
<script>
22+
const assistant = ""; // Replace with your assistant ID
23+
const apiKey = ""; // Replace with your API key
24+
25+
var vapiInstance = null;
26+
27+
const buttonConfig = {
28+
position: "bottom-right", // "bottom" | "top" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right"
29+
offset: "10px", // decide how far the button should be from the edge
30+
width: "200px", // min-width of the button
31+
height: "50px", // height of the button
32+
zIndex: 2147483647,
33+
idle: {
34+
// button state when the call is not active.
35+
color: `rgb(76, 173, 47)`,
36+
type: "pill", // or "round"
37+
title: "Have a quick question?", // only required in case of Pill
38+
subtitle: "Talk with our AI voicebot", // only required in case of pill
39+
icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone.svg`,
40+
},
41+
loading: {
42+
// button state when the call is connecting
43+
color: `rgb(93, 124, 202)`,
44+
type: "pill", // or "round"
45+
title: "Connecting...", // only required in case of Pill
46+
subtitle: "Please wait.", // only required in case of pill
47+
icon: `https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg`,
48+
},
49+
active: {
50+
// button state when the call is in progress or active.
51+
color: `rgb(255, 0, 0)`,
52+
type: "pill", // or "round"
53+
title: "Call is in progress...", // only required in case of Pill
54+
subtitle: "End the call.", // only required in case of pill
55+
icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg`,
56+
},
57+
};
58+
59+
(function (d, t) {
60+
var g = document.createElement(t),
61+
s = d.getElementsByTagName(t)[0];
62+
g.src =
63+
"https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js";
64+
g.defer = true;
65+
g.async = true;
66+
s.parentNode.insertBefore(g, s);
67+
68+
g.onload = function () {
69+
const vapi = window.vapiSDK.run({
70+
apiKey: apiKey, // required
71+
assistant: assistant, // required
72+
config: buttonConfig, // optional
73+
});
74+
75+
if (vapi) {
76+
// Extend more using vapi
77+
window.vapiSDK.vapi = vapi;
78+
vapiInstance = vapi;
79+
80+
vapiInstance.on("speech-start", () => {
81+
console.log("Speech has started");
82+
});
83+
84+
vapiInstance.on("speech-end", () => {
85+
console.log("Speech has ended");
86+
});
87+
88+
vapiInstance.on("call-start", () => {
89+
console.log("Call has started");
90+
});
91+
92+
vapiInstance.on("call-end", () => {
93+
console.log("Call has stopped");
94+
});
95+
96+
vapiInstance.on("volume-level", (volume) => {
97+
console.log(`Assistant volume level: ${volume}`);
98+
});
99+
100+
// Function calls and transcripts will be sent via messages
101+
vapiInstance.on("message", (message) => {
102+
console.log(message);
103+
});
104+
105+
vapiInstance.on("error", (e) => {
106+
console.error(e);
107+
});
108+
}
109+
};
110+
})(document, "script");
111+
112+
function logUserAction() {
113+
// Function to log the user action
114+
115+
if (window.vapiSDK.vapi)
116+
window.vapiSDK.vapi.send({
117+
type: "add-message",
118+
message: {
119+
role: "system",
120+
content: "The user has pressed the button, say peanuts",
121+
},
122+
});
123+
else {
124+
console.log(window.vapiSDK, vapiInstance);
125+
}
126+
}
127+
</script>
128+
</body>
129+
</html>

‎index.html

+93-33
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,129 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
1+
<html>
32
<head>
3+
<title>VAPI</title>
44
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Vapi Support Agent Demo</title>
5+
6+
<style>
7+
.vapi-btn {
8+
position: "relative";
9+
top: 0;
10+
left: 0;
11+
bottom: 0;
12+
right: 0;
13+
width: fit-content;
14+
margin: 100px;
15+
}
16+
</style>
717
</head>
818
<body>
9-
<div id="app">Hi there</div>
19+
<button id="log-action" onClick="logUserAction()">Log Action</button>
1020

1121
<script>
12-
const assistant = {
13-
model: {
14-
provider: "openai",
15-
model: "gpt-3.5-turbo",
16-
systemPrompt:
17-
"You're a versatile AI assistant named Vapi who is fun to talk with.",
18-
},
19-
voice: {
20-
provider: "11labs",
21-
voiceId: "paula",
22-
},
23-
firstMessage: "Hi, I am Vapi how can I assist you today?",
24-
};
22+
const assistant = "61250299-108c-490f-984c-c7c0ebdfd5ee"; // Replace with your assistant ID
23+
const apiKey = "%VITE_APP_VAPI_API_TOKEN%"; // Replace with your API key
24+
25+
var vapiInstance = null;
2526

2627
const buttonConfig = {
27-
position: "bottom-right",
28-
offset: "40px",
29-
width: "50px",
30-
height: "50px",
28+
position: "bottom-right", // "bottom" | "top" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right"
29+
offset: "10px", // decide how far the button should be from the edge
30+
width: "200px", // min-width of the button
31+
height: "50px", // height of the button
32+
zIndex: 2147483647,
3133
idle: {
32-
color: `rgb(93, 254, 202)`,
33-
type: "round",
34+
// button state when the call is not active.
35+
color: `rgb(76, 173, 47)`,
36+
type: "pill", // or "round"
37+
// title: "¿Tienes una pregunta rápida?", // only required in case of Pill
38+
// subtitle: "Habla con nuestro asistente de IA", // only required in case of pill
3439
icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone.svg`,
3540
},
3641
loading: {
42+
// button state when the call is connecting
3743
color: `rgb(93, 124, 202)`,
38-
type: "round",
44+
type: "pill", // or "round"
45+
// title: "Conectando...", // only required in case of Pill
46+
// subtitle: "Por favor, espera", // only required in case of pill
3947
icon: `https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg`,
4048
},
4149
active: {
50+
// button state when the call is in progress or active.
4251
color: `rgb(255, 0, 0)`,
43-
type: "round",
52+
type: "pill", // or "round"
53+
// title: "Llamada en curso...", // only required in case of Pill
54+
// subtitle: "Fin de la llamada", // only required in case of pill
4455
icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg`,
4556
},
4657
};
4758

4859
(function (d, t) {
4960
var g = document.createElement(t),
5061
s = d.getElementsByTagName(t)[0];
51-
52-
g.src = "dist/assets/index.js";
53-
// g.src =
54-
// "https://cdn.jsdelivr.net/gh/VapiAI/vapi-support-sdk/dist/assets/index.js";
62+
g.src =
63+
"https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js";
5564
g.defer = true;
5665
g.async = true;
5766
s.parentNode.insertBefore(g, s);
5867

5968
g.onload = function () {
6069
const vapi = window.vapiSDK.run({
61-
apiKey: "",
62-
assistant: assistant,
63-
// config: buttonConfig,
70+
apiKey: apiKey, // required
71+
assistant: assistant, // required
72+
config: buttonConfig, // optional
6473
});
74+
75+
if (vapi) {
76+
// Extend more using vapi
77+
window.vapiSDK.vapi = vapi;
78+
vapiInstance = vapi;
79+
80+
vapiInstance.on("speech-start", () => {
81+
console.log("Speech has started");
82+
});
83+
84+
vapiInstance.on("speech-end", () => {
85+
console.log("Speech has ended");
86+
});
87+
88+
vapiInstance.on("call-start", () => {
89+
console.log("Call has started");
90+
});
91+
92+
vapiInstance.on("call-end", () => {
93+
console.log("Call has stopped");
94+
});
95+
96+
vapiInstance.on("volume-level", (volume) => {
97+
console.log(`Assistant volume level: ${volume}`);
98+
});
99+
100+
// Function calls and transcripts will be sent via messages
101+
vapiInstance.on("message", (message) => {
102+
console.log(message);
103+
});
104+
105+
vapiInstance.on("error", (e) => {
106+
console.error(e);
107+
});
108+
}
65109
};
66110
})(document, "script");
111+
112+
function logUserAction() {
113+
// Function to log the user action
114+
115+
if (window.vapiSDK.vapi)
116+
window.vapiSDK.vapi.send({
117+
type: "add-message",
118+
message: {
119+
role: "system",
120+
content: "The user has pressed the button, say peanuts",
121+
},
122+
});
123+
else {
124+
console.log(window.vapiSDK, vapiInstance);
125+
}
126+
}
67127
</script>
68128
</body>
69129
</html>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "html-script-tag",
33
"private": true,
4-
"version": "1.0.0",
4+
"version": "1.1.0",
55
"type": "module",
66
"main": "src/index.js",
77
"scripts": {

0 commit comments

Comments
 (0)