Widget Integrable
El Widget Integrable permite incorporar la atención por vídeo de Voki directamente en su sitio web o aplicación web. Sus clientes pueden iniciar una videollamada sin salir de la página, con una experiencia fluida e integrada a la identidad visual de su empresa.
Disponibilidad
El widget integrable está disponible en todos los planes, incluyendo el plan Gratuito.
Cómo integrar en su sitio web
Para agregar el widget, basta incluir el siguiente fragmento de código HTML antes del cierre de la etiqueta </body> en su sitio:
<script src="https://voki.avanter.com.br/widget/voki-widget.js"></script>
<script>
Voki.init({
department: 'su-departamento-slug',
theme: {
primaryColor: '#4F46E5',
position: 'bottom-right'
},
apiBaseUrl: 'https://voki.avanter.com.br'
});
</script>Slug del departamento
El valor del campo department debe ser el slug del departamento hacia donde se dirigirán las llamadas. Puede encontrar el slug en la página de configuración del departamento en el Panel del Gestor (ej: "ventas", "soporte-tecnico", "atencion").
Parámetros de configuración
| Parámetro | Tipo | Obligatorio | Descripción |
|---|---|---|---|
department | string | Sí | Slug del departamento de destino de las llamadas |
apiBaseUrl | string | Sí | URL base de la API de Voki |
theme.primaryColor | string | No | Color primario del widget en formato hexadecimal. Predeterminado: #4F46E5 |
theme.position | string | No | Posición del botón flotante: bottom-right o bottom-left. Predeterminado: bottom-right |
Personalización de tema
Personalice la apariencia del widget para que combine con la identidad visual de su sitio web. Basta ajustar los parámetros del objeto theme:
Voki.init({
department: 'ventas',
theme: {
primaryColor: '#1E40AF', // Color de los botones y destacados
position: 'bottom-left', // Posición del botón flotante
},
apiBaseUrl: 'https://voki.avanter.com.br'
});Eligiendo el color
Utilice un color que contraste bien con el fondo de su sitio web para garantizar que el botón del widget sea fácilmente visible para los visitantes. Colores oscuros sobre fondos claros (y viceversa) funcionan mejor.
Flujo de atención por el widget
El widget conduce al cliente por un flujo completo de atención sin salir de su sitio web:
| Etapa | Qué ocurre |
|---|---|
| 1. Botón flotante | Un botón de vídeo aparece en la esquina configurada de la página de su sitio web |
| 2. Formulario | Al hacer clic, el cliente completa nombre, correo electrónico y motivo del contacto |
| 3. Sala de espera | El cliente aguarda en la cola del departamento configurado, visualizando su posición |
| 4. Videollamada | Cuando es atendido, la videollamada se abre en una ventana integrada en el widget |
| 5. Evaluación | Después de la llamada, la encuesta de satisfacción (NPS/CSAT) se muestra dentro del widget |
Responsividad
El widget es totalmente responsivo y funciona en dispositivos móviles y de escritorio. En pantallas más pequeñas, se adapta automáticamente para ocupar el espacio disponible.
Ejemplo práctico de integración
A continuación, un ejemplo completo de página HTML con el widget de Voki integrado:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Sitio — Atención por Vídeo</title>
</head>
<body>
<h1>¡Bienvenido a nuestro sitio!</h1>
<p>¿Necesita ayuda? Haga clic en el botón de vídeo en la esquina de la pantalla.</p>
<!-- Widget de Voki -->
<script src="https://voki.avanter.com.br/widget/voki-widget.js"></script>
<script>
Voki.init({
department: 'atencion',
theme: {
primaryColor: '#0D47A1',
position: 'bottom-right'
},
apiBaseUrl: 'https://voki.avanter.com.br'
});
</script>
</body>
</html>Buenas prácticas
Recomendaciones para una buena experiencia
- Elija el departamento correcto — Dirija las llamadas del widget a un departamento que tenga agentes disponibles durante el horario comercial
- Informe el horario de atención — Agregue a su sitio web un texto indicando cuándo los agentes están disponibles para evitar frustración de los clientes
- Pruebe antes de publicar — Después de integrar el código, realice una prueba completa del flujo (haga clic en el botón, complete el formulario, entre en la cola) para garantizar que todo funcione correctamente
- Una única instancia — Incluya el código del widget solo una vez por página para evitar comportamientos inesperados
Preguntas frecuentes sobre el widget
¿El widget funciona en sitios construidos con WordPress, Wix o Shopify? Sí. Como el widget se carga mediante JavaScript puro, funciona en cualquier plataforma que permita insertar código HTML personalizado.
¿Puedo tener widgets en diferentes páginas apuntando a departamentos diferentes? Sí. Basta alterar el valor del parámetro department en cada página para dirigir las llamadas al departamento deseado.
¿El widget afecta el rendimiento de mi sitio? El impacto es mínimo. El script del widget es ligero y se carga de forma asíncrona, sin bloquear la carga de la página.