Embeddable Widget
The Embeddable Widget allows you to integrate Voki's video service directly into your website or web application. Your clients can start a video call without leaving the page, with a seamless experience integrated with your company's visual identity.
Availability
The embeddable widget is available on all plans, including the Free plan.
How to integrate into your website
To add the widget, simply include the following HTML snippet before the closing </body> tag on your website:
<script src="https://voki.avanter.com.br/widget/voki-widget.js"></script>
<script>
Voki.init({
department: 'your-department-slug',
theme: {
primaryColor: '#4F46E5',
position: 'bottom-right'
},
apiBaseUrl: 'https://voki.avanter.com.br'
});
</script>Department slug
The department field value must be the slug of the department where calls will be directed. You can find the slug on the department configuration page in the Manager Panel (e.g., "sales," "technical-support," "customer-service").
Configuration parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
department | string | Yes | Slug of the target department for calls |
apiBaseUrl | string | Yes | Voki API base URL |
theme.primaryColor | string | No | Widget primary color in hexadecimal format. Default: #4F46E5 |
theme.position | string | No | Floating button position: bottom-right or bottom-left. Default: bottom-right |
Theme customization
Customize the widget's appearance to match your website's visual identity. Simply adjust the parameters in the theme object:
Voki.init({
department: 'sales',
theme: {
primaryColor: '#1E40AF', // Button and highlight color
position: 'bottom-left', // Floating button position
},
apiBaseUrl: 'https://voki.avanter.com.br'
});Choosing the color
Use a color that contrasts well with your website's background to ensure the widget button is easily visible to visitors. Dark colors on light backgrounds (and vice versa) work best.
Widget service flow
The widget guides the client through a complete service flow without leaving your website:
| Step | What happens |
|---|---|
| 1. Floating button | A video button appears in the configured corner of your website page |
| 2. Form | When clicked, the client fills in their name, email, and reason for contact |
| 3. Waiting room | The client waits in the configured department's queue, seeing their position |
| 4. Video call | When served, the video call opens in an embedded window within the widget |
| 5. Survey | After the call, the satisfaction survey (NPS/CSAT) is displayed within the widget |
Responsiveness
The widget is fully responsive and works on both mobile and desktop devices. On smaller screens, it automatically adapts to fit the available space.
Practical integration example
Below is a complete example of an HTML page with the Voki widget integrated:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website — Video Service</title>
</head>
<body>
<h1>Welcome to our website!</h1>
<p>Need help? Click the video button in the corner of the screen.</p>
<!-- Voki Widget -->
<script src="https://voki.avanter.com.br/widget/voki-widget.js"></script>
<script>
Voki.init({
department: 'customer-service',
theme: {
primaryColor: '#0D47A1',
position: 'bottom-right'
},
apiBaseUrl: 'https://voki.avanter.com.br'
});
</script>
</body>
</html>Best practices
Recommendations for a great experience
- Choose the right department — Direct widget calls to a department that has attendants available during business hours
- Display business hours — Add text to your website indicating when attendants are available to avoid client frustration
- Test before publishing — After integrating the code, run a complete test of the flow (click the button, fill in the form, enter the queue) to ensure everything works properly
- Single instance — Include the widget code only once per page to avoid unexpected behavior
Widget FAQ
Does the widget work on websites built with WordPress, Wix, or Shopify? Yes. Since the widget is loaded via pure JavaScript, it works on any platform that allows inserting custom HTML code.
Can I have widgets on different pages pointing to different departments? Yes. Simply change the department parameter value on each page to direct calls to the desired department.
Does the widget affect my website's performance? The impact is minimal. The widget script is lightweight and loaded asynchronously, without blocking the page load.