Widget Intégrable
Le Widget Intégrable permet d'intégrer le service par vidéo de Voki directement dans votre site ou application web. Vos clients peuvent lancer un appel vidéo sans quitter la page, avec une expérience fluide et intégrée à l'identité visuelle de votre entreprise.
Disponibilité
Le widget intégrable est disponible dans tous les forfaits, y compris le forfait Gratuit.
Comment intégrer à votre site
Pour ajouter le widget, il suffit d'inclure l'extrait de code HTML suivant avant la fermeture de la balise </body> dans votre site :
<script src="https://voki.avanter.com.br/widget/voki-widget.js"></script>
<script>
Voki.init({
department: 'votre-departement-slug',
theme: {
primaryColor: '#4F46E5',
position: 'bottom-right'
},
apiBaseUrl: 'https://voki.avanter.com.br'
});
</script>Slug du département
La valeur du champ department doit être le slug du département vers lequel les appels seront dirigés. Vous trouverez le slug sur la page de configuration du département dans le Panneau du Gestionnaire (ex. : « ventes », « support-technique », « service-client »).
Paramètres de configuration
| Paramètre | Type | Obligatoire | Description |
|---|---|---|---|
department | string | Oui | Slug du département de destination des appels |
apiBaseUrl | string | Oui | URL de base de l'API Voki |
theme.primaryColor | string | Non | Couleur primaire du widget en format hexadécimal. Par défaut : #4F46E5 |
theme.position | string | Non | Position du bouton flottant : bottom-right ou bottom-left. Par défaut : bottom-right |
Personnalisation du thème
Personnalisez l'apparence du widget pour qu'il s'harmonise avec l'identité visuelle de votre site. Il suffit d'ajuster les paramètres de l'objet theme :
Voki.init({
department: 'ventes',
theme: {
primaryColor: '#1E40AF', // Couleur des boutons et éléments mis en avant
position: 'bottom-left', // Position du bouton flottant
},
apiBaseUrl: 'https://voki.avanter.com.br'
});Choix de la couleur
Utilisez une couleur qui contraste bien avec le fond de votre site pour garantir que le bouton du widget soit facilement visible par les visiteurs. Les couleurs sombres sur fond clair (et vice-versa) fonctionnent mieux.
Flux de service par le widget
Le widget guide le client à travers un flux complet de service sans quitter votre site :
| Étape | Ce qui se passe |
|---|---|
| 1. Bouton flottant | Un bouton vidéo apparaît dans le coin configuré de la page de votre site |
| 2. Formulaire | En cliquant, le client remplit nom, e-mail et motif du contact |
| 3. Salle d'attente | Le client attend dans la file du département configuré, visualisant sa position |
| 4. Appel vidéo | Lorsqu'il est servi, l'appel vidéo s'ouvre dans une fenêtre intégrée au widget |
| 5. Évaluation | Après l'appel, l'enquête de satisfaction (NPS/CSAT) est affichée dans le widget |
Responsivité
Le widget est entièrement responsive et fonctionne sur les appareils mobiles et de bureau. Sur les écrans plus petits, il s'adapte automatiquement pour occuper l'espace disponible.
Exemple pratique d'intégration
Ci-dessous, un exemple complet de page HTML avec le widget Voki intégré :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Site — Service par Vidéo</title>
</head>
<body>
<h1>Bienvenue sur notre site !</h1>
<p>Besoin d'aide ? Cliquez sur le bouton vidéo dans le coin de l'écran.</p>
<!-- Widget Voki -->
<script src="https://voki.avanter.com.br/widget/voki-widget.js"></script>
<script>
Voki.init({
department: 'service-client',
theme: {
primaryColor: '#0D47A1',
position: 'bottom-right'
},
apiBaseUrl: 'https://voki.avanter.com.br'
});
</script>
</body>
</html>Bonnes pratiques
Recommandations pour une bonne expérience
- Choisissez le bon département — Dirigez les appels du widget vers un département qui dispose d'agents disponibles pendant les heures ouvrables
- Indiquez les horaires de service — Ajoutez un texte sur votre site indiquant quand les agents sont disponibles pour éviter la frustration des clients
- Testez avant de publier — Après avoir intégré le code, effectuez un test complet du flux (cliquez sur le bouton, remplissez le formulaire, entrez dans la file) pour garantir que tout fonctionne correctement
- Une seule instance — Incluez le code du widget une seule fois par page pour éviter des comportements inattendus
Questions fréquentes sur le widget
Le widget fonctionne-t-il sur les sites construits avec WordPress, Wix ou Shopify ? Oui. Comme le widget est chargé via JavaScript pur, il fonctionne sur toute plateforme permettant d'insérer du code HTML personnalisé.
Puis-je avoir des widgets sur différentes pages pointant vers différents départements ? Oui. Il suffit de modifier la valeur du paramètre department sur chaque page pour diriger les appels vers le département souhaité.
Le widget affecte-t-il les performances de mon site ? L'impact est minimal. Le script du widget est léger et chargé de manière asynchrone, sans bloquer le chargement de la page.