Le widget — votre canal de conversation principal
Le widget web est le canal de référence de Sens-AI : installé sur votre site, il accueille la majorité des conversations et sert de base aux autres canaux.
Dernière mise à jour :
Pourquoi le widget est un canal à part entière
Le widget web n’est pas un simple gadget posé sur votre site : c’est le canal principal de Sens-AI, au même titre que Telegram, l’e-mail ou l’agent vocal. Les conversations qu’il génère arrivent dans la même boîte de réception, suivent la même logique d’escalade, et s’appuient sur la même base de connaissances que vos autres canaux.
Concrètement :
- Vos visiteurs cliquent sur la bulle de chat en bas de votre site et discutent avec le bot.
- Les conversations sont enregistrées dans l’onglet Conversations avec le canal « widget ».
- Les actions configurées (prise de rendez-vous, escalade humaine, formulaires, etc.) fonctionnent exactement comme sur les autres canaux.
- L’agent vocal, s’il est activé, s’affiche directement dans le widget sous forme d’un bouton micro — pas de canal séparé à gérer.
C’est le canal que la plupart de nos clients déploient en premier, parce qu’il ne demande qu’une ligne de code sur le site et qu’il génère des conversations dès le premier jour.
Quand privilégier le widget
Le widget est le bon premier réflexe si :
- Vous avez un site web sur lequel vos prospects ou clients arrivent (page produit, page contact, blog, etc.).
- Vous voulez capter les visiteurs avant qu’ils ne quittent la page sans avoir trouvé leur réponse.
- Vous voulez tester rapidement la valeur d’un assistant conversationnel sans toucher à votre boîte mail ni installer un bot sur Telegram.
Si votre flux principal de demandes passe déjà par e-mail, regardez plutôt Recevoir des e-mails par transfert. Si vos clients vous parlent surtout sur Telegram, voyez Intégration Telegram. Les canaux se cumulent : la plupart de nos clients en activent plusieurs.
Installer le widget sur votre site
L’installation tient en une ligne :
<script src="https://api.sens-ai.work/widget.js" data-bot-id="VOTRE_BOT_ID"></script>
Le détail des intégrations spécifiques (WordPress, Shopify, React/Next.js, Vue/Nuxt, sites HTML statiques) est centralisé dans l’article dédié :
Vous y trouverez aussi la procédure pour configurer la Content Security Policy (CSP) si votre site en utilise une — et un tableau de dépannage des problèmes les plus courants.
Personnaliser l’apparence du widget
Toute la personnalisation se fait depuis l’onglet Widget du bot, avec aperçu en temps réel :
- Couleurs (couleur principale, fond des messages bot et utilisateur)
- Logo dans l’en-tête (PNG, JPG ou WebP, 512 Ko maximum)
- Bulle de chat (taille, icône, position bas-droite / bas-gauche)
- Messages suggérés affichés au démarrage (jusqu’à 5, 50 caractères maximum chacun)
- Teaser (bulle d’accroche qui apparaît après quelques secondes)
- Coins arrondis pour coller à votre charte graphique
Le détail option par option est documenté ici :
Comment ça marche techniquement
Quelques points utiles à connaître si votre équipe technique vous pose des questions :
- Le script est servi depuis
api.sens-ai.worket pèse moins de 15 Ko compressé. - Il s’isole dans un Shadow DOM : aucun conflit avec les styles CSS de votre site.
- Les messages sont transmis en streaming SSE (Server-Sent Events) pour que la réponse s’affiche au fil de l’eau.
- Les messages saisis dans le widget sont limités à 1 000 caractères (les autres canaux ont une limite plus large côté pipeline).
- La configuration du widget (couleurs, logo, suggestions) est mise en cache 60 secondes côté navigateur, avec rafraîchissement en arrière-plan jusqu’à 5 minutes.
- L’appel à la configuration est protégé par un rate limit de 120 requêtes par minute par bot côté serveur, pour absorber les pics sans casser l’affichage.
Activer la voix dans le widget
Si vous activez l’agent vocal sur votre bot, un bouton micro apparaît automatiquement dans le widget, à côté de la zone de saisie. Aucune modification de code n’est nécessaire — le widget détecte l’activation et s’adapte.
Deux prérequis à connaître :
- Votre site doit être servi en HTTPS (les navigateurs interdisent l’accès au micro sur HTTP).
- Si vous avez configuré une
Permissions-Policyou uneContent-Security-Policy, il faut autoriser l’originehttps://api.sens-ai.workpour le micro et la directiveframe-src.
Le détail est dans Ajouter un agent vocal et dans la section CSP de Installation du widget.
Limites à connaître
Pour rester honnête sur ce que le widget fait et ne fait pas aujourd’hui :
- Un seul widget par bot. Si vous voulez deux apparences différentes (par exemple une pour le site français et une pour le site anglais), il faut deux bots distincts.
- Le widget se charge en client (JavaScript). Sur les pages qui bloquent JavaScript, ou côté indexation moteur de recherche, le widget n’est pas visible — ce n’est pas un défaut, c’est inhérent à un chat embarqué.
- L’envoi de fichiers depuis le widget par les visiteurs n’est pas encore exposé dans la version publique : les pièces jointes circulent dans le sens opérateur → visiteur via des URL signées, pas dans l’autre sens.
- Pas de notifications push vers le visiteur s’il quitte la page : le widget n’est pas un canal asynchrone comme l’e-mail. Pour reprendre contact après coup, utilisez plutôt un canal e-mail.
- Position du widget : bas-droite ou bas-gauche uniquement. Pas d’ancrage personnalisé sur un coin haut ou au milieu d’une page.
Dépannage rapide
| Symptôme | Cause probable | Où regarder |
|---|---|---|
| La bulle n’apparaît pas | data-bot-id manquant ou incorrect | Vérifiez l’ID dans l’onglet Snippet de votre bot |
Erreur 404 sur widget.js | URL du script erronée | Utilisez exactement https://api.sens-ai.work/widget.js |
| Logo ou icône qui ne s’affiche pas | Fichier non uploadé ou format invalide | Reuploadez en PNG, JPG ou WebP |
| Couleurs non appliquées | Cache navigateur (60 s) | Forcez le rechargement ou attendez ~1 minute |
| Bouton micro absent malgré l’activation vocale | Site non HTTPS ou Permissions-Policy restrictive | Passez en HTTPS, ajustez la CSP — voir Installation du widget |
| Widget invisible derrière un menu | Z-index personnalisé | Le widget se positionne à z-index: 999999 par défaut |
Erreur Refused to load en console | CSP du site bloque api.sens-ai.work | Ajoutez le domaine aux directives script-src, connect-src, img-src |
Si le problème persiste, ouvrez la console développeur (F12) et collez les messages d’erreur dans un ticket via la page Contact — c’est presque toujours résolu en quelques minutes.
Pour aller plus loin
- Installation du widget — toutes les plateformes, CSP, vérifications
- Personnalisation du widget — couleurs, logo, bulle, teaser, suggestions
- Ajouter un agent vocal — activer la voix dans le widget
- Intégration Telegram — étendre la conversation à Telegram
- Recevoir des e-mails par transfert — capter les demandes e-mail