forked from VapiAI/client-sdk-html-script-tag
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (120 loc) · 4.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<html>
<head>
<title>VAPI</title>
<meta charset="UTF-8" />
<style>
.vapi-btn {
position: "relative";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: fit-content;
margin: 100px;
}
</style>
</head>
<body>
<button id="log-action" onClick="logUserAction()">Log Action</button>
<script>
const assistant = "6e5de015-6983-4bf5-ac44-d18c19076ae2"; // Replace with your assistant ID
const apiKey = "%VITE_APP_VAPI_API_TOKEN%"; // Replace with your API key
var vapiInstance = null;
const assistantOverrides = {
"firstMessage": "How may I assist you?"
} // Assistant Overrides Let u override some of the assistant Configurations. This can be used alongside assistantId
const buttonConfig = {
position: "bottom-right", // "bottom" | "top" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right"
offset: "10px", // decide how far the button should be from the edge
width: "200px", // min-width of the button
height: "50px", // height of the button
zIndex: 2147483647,
idle: {
// button state when the call is not active.
color: `rgb(76, 173, 47)`,
type: "pill", // or "round"
// title: "¿Tienes una pregunta rápida?", // only required in case of Pill
// subtitle: "Habla con nuestro asistente de IA", // only required in case of pill
icon: `https://unpkg.com/[email protected]/icons/phone.svg`,
},
loading: {
// button state when the call is connecting
color: `rgb(93, 124, 202)`,
type: "pill", // or "round"
// title: "Conectando...", // only required in case of Pill
// subtitle: "Por favor, espera", // only required in case of pill
icon: `https://unpkg.com/[email protected]/icons/loader-2.svg`,
},
active: {
// button state when the call is in progress or active.
color: `rgb(255, 0, 0)`,
type: "pill", // or "round"
// title: "Llamada en curso...", // only required in case of Pill
// subtitle: "Fin de la llamada", // only required in case of pill
icon: `https://unpkg.com/[email protected]/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/[email protected]/dist/assets/index.js";
// g.src = './src/index.js'
// g.type = "module";
g.defer = true;
g.async = true;
s.parentNode.insertBefore(g, s);
g.onload = function () {
const vapi = window.vapiSDK.run({
apiKey: apiKey, // required
// squad: 'e49a15d9-f6dc-4010-a05a-611adbfb3aaa',
assistant: assistant, // required
assistantOverrides: assistantOverrides, // optional
config: buttonConfig, // optional
});
if (vapi) {
// Extend more using vapi
window.vapiSDK.vapi = vapi;
vapiInstance = vapi;
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");
function logUserAction() {
// Function to log the user action
if (window.vapiSDK.vapi)
window.vapiSDK.vapi.send({
type: "add-message",
message: {
role: "system",
content: "The user has pressed the button, say peanuts",
},
});
else {
console.log(window.vapiSDK, vapiInstance);
}
}
</script>
</body>
</html>