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é :

Installation du widget

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 :

Personnalisation du widget

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.work et 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-Policy ou une Content-Security-Policy, il faut autoriser l’origine https://api.sens-ai.work pour le micro et la directive frame-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ômeCause probableOù regarder
La bulle n’apparaît pasdata-bot-id manquant ou incorrectVérifiez l’ID dans l’onglet Snippet de votre bot
Erreur 404 sur widget.jsURL du script erronéeUtilisez exactement https://api.sens-ai.work/widget.js
Logo ou icône qui ne s’affiche pasFichier non uploadé ou format invalideReuploadez en PNG, JPG ou WebP
Couleurs non appliquéesCache navigateur (60 s)Forcez le rechargement ou attendez ~1 minute
Bouton micro absent malgré l’activation vocaleSite non HTTPS ou Permissions-Policy restrictivePassez en HTTPS, ajustez la CSP — voir Installation du widget
Widget invisible derrière un menuZ-index personnaliséLe widget se positionne à z-index: 999999 par défaut
Erreur Refused to load en consoleCSP du site bloque api.sens-ai.workAjoutez 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

Cet article vous a-t-il été utile ?

À lire aussi dans cette section