Web Snippet
Easily integrate the Vapi Voice Widget into your website for enhanced user interaction.
Improve your website’s user interaction with the Vapi Voice Widget. This robust tool enables your visitors to engage with a voice assistant for support and interaction, offering a smooth and contemporary way to connect with your services.
Steps for Installation
Insert the Widget Snippet
Copy the snippet below and insert it into your website’s HTML, ideally before the closing </body>
tag.
<script>
var vapiInstance = null;
const assistant = "<assistant_id>"; // Substitute with your assistant ID
const apiKey = "<your_public_api_key>"; // Substitute with your Public key from Vapi Dashboard.
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");
</script>
Generate Your Assistant
From your Vapi dashboard, create an assistant to get the assistant ID. Alternatively, define an assistant configuration directly in your website’s code as demonstrated in the example below.
const assistant = {
model: {
provider: "openai",
model: "gpt-3.5-turbo",
systemPrompt:
"You're a versatile AI assistant named Vapi who is fun to talk with.",
},
voice: {
provider: "11labs",
voiceId: "paula",
},
firstMessage: "Hi, I am Vapi how can I assist you today?",
};
Modify the Button
Modify the buttonConfig
object to align with your website’s style and branding. Choose between a pill or round button and set colors, positions, and icons.
const buttonConfig = {
position: "bottom-right", // "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: "50px", // min-width of the button
height: "50px", // height of the button
idle: { // button state when the call is not active.
color: `rgb(93, 254, 202)`,
type: "pill", // or "round"
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/[email protected]/icons/phone.svg`,
},
loading: { // button state when the call is connecting
color: `rgb(93, 124, 202)`,
type: "pill", // or "round"
title: "Connecting...", // only required in case of Pill
subtitle: "Please wait", // 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: "Call is in progress...", // only required in case of Pill
subtitle: "End the call.", // only required in case of pill
icon: `https://unpkg.com/[email protected]/icons/phone-off.svg`,
},
};
Add Functionality to Vapi Instance
You can use the vapiInstance
returned from the run function in the snippet to further customize the behaviour. For instance, you might want to listen to various EventSource, or even send some messages to the bot programmatically.
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)
});
Customization
Modify your assistant’s behavior and the initial message users will see. Refer to the provided examples to customize the assistant’s model, voice, and initial greeting.
UI Customization
For advanced styling, target the exposed CSS and other classes to ensure the widget’s appearance aligns with your website’s design. Here is a list of the classes you can customize:
.vapi-btn
: The primary class for the Vapi button..vapi-btn-is-idle
: The class for the Vapi button when the call is disconnected..vapi-btn-is-active
: The class for the Vapi button when the call is active..vapi-btn-is-loading
: The class for the Vapi button when the call is connecting..vapi-btn-is-speaking
: The class for the Vapi button when the bot is speaking..vapi-btn-pill
: The class for Vapi button to set pill variant..vapi-btn-round
: The class for Vapi button to set round variant.
Was this page helpful?