Installation du widget

Guide complet pour installer le widget Sens-AI sur votre site web, quelle que soit la technologie utilisée.

Dernière mise à jour : 13 avril 2026

Le snippet

Le widget Sens-AI nécessite une seule ligne de code :

<script src="https://api.sens-ai.work/widget.js" data-bot-id="VOTRE_BOT_ID"></script>

Remplacez VOTRE_BOT_ID par l’identifiant de votre bot, disponible dans l’onglet Snippet de votre bot.

Installation par plateforme

Site HTML statique

Collez le snippet juste avant la balise </body> :

<html>
<head>...</head>
<body>
  <!-- Votre contenu -->

  <!-- Widget Sens-AI -->
  <script src="https://api.sens-ai.work/widget.js" data-bot-id="VOTRE_BOT_ID"></script>
</body>
</html>

WordPress

Installez le plugin « Insert Headers and Footers » (ou WPCode)
Allez dans Réglages > Insert Headers and Footers
Collez le snippet dans la section Footer
Enregistrez

Shopify

Allez dans Boutique en ligne > Thèmes > Actions > Modifier le code
Ouvrez le fichier theme.liquid
Collez le snippet juste avant </body>
Enregistrez

React / Next.js

Ajoutez le script dans votre composant Layout :

import { useEffect } from 'react'

export default function Layout({ children }) {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://api.sens-ai.work/widget.js'
    script.dataset.botId = 'VOTRE_BOT_ID'
    document.body.appendChild(script)
    return () => script.remove()
  }, [])

  return <>{children}</>
}

Vue.js / Nuxt

Dans votre nuxt.config.ts :

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: 'https://api.sens-ai.work/widget.js', 'data-bot-id': 'VOTRE_BOT_ID', body: true }
      ]
    }
  }
})

Fonctionnement technique

Le widget utilise le Shadow DOM pour s’isoler complètement de votre site :

Aucun conflit CSS avec vos styles existants
Aucune dépendance externe requise
Communication avec l’API via Server-Sent Events (SSE) pour le streaming des réponses
Le script pèse moins de 15 Ko (compressé)

Content Security Policy (CSP)

La plupart des sites n’ont pas de CSP — cette section ne vous concerne que si vous en avez configuré une. Sans CSP, le widget fonctionne sans aucune configuration supplémentaire.

Si votre site définit un header Content-Security-Policy, le navigateur bloquera silencieusement le widget. Ajoutez https://api.sens-ai.work aux directives suivantes :

Chat texte

Directive	Raison
`script-src`	Charger le script `widget.js`
`connect-src`	Échanges avec le chatbot (SSE + API)
`img-src`	Logo, avatar et images dans les messages

Canal vocal (si activé)

Si vous avez activé le canal vocal sur votre bot, ajoutez également :

Directive	Raison
`frame-src`	L’appel vocal s’exécute dans une iframe sécurisée

Et si votre site restreint l’accès au microphone via Permissions-Policy, ajoutez l’origine API :

Permissions-Policy: microphone=(self "https://api.sens-ai.work")

Important : Si votre site a Permissions-Policy: microphone=(), le microphone sera bloqué même avec la configuration ci-dessus. Retirez la restriction ou ajoutez l’origine API.

Exemple de header complet (chat + voix)

Content-Security-Policy: script-src 'self' https://api.sens-ai.work; connect-src 'self' https://api.sens-ai.work; img-src 'self' https://api.sens-ai.work data:; frame-src https://api.sens-ai.work

Comment savoir si votre site a une CSP ? Ouvrez la console développeur (F12) — si le widget est bloqué, vous verrez une erreur Refused to load the script, Refused to connect ou Refused to frame.

Vérifier l’installation

Ouvrez votre site dans un navigateur
Ouvrez la console développeur (F12)
Vérifiez l’absence d’erreurs liées à widget.js
La bulle de chat doit apparaître en bas de page
Testez en posant une question

Dépannage

Symptôme	Cause probable	Solution
Bulle invisible	`data-bot-id` incorrect	Vérifiez l’ID dans l’onglet Snippet
Erreur 404	Script URL incorrecte	Utilisez `https://api.sens-ai.work/widget.js`
Pas de réponse	Aucune source indexée	Ajoutez et indexez des sources
Erreur CORS	CSP restrictive	Ajoutez les domaines requis (voir section CSP)
Widget sous d’autres éléments	z-index trop bas	Le widget utilise z-index 999999 par défaut
Appel vocal échoue silencieusement	`frame-src` manquant dans la CSP	Ajoutez `frame-src https://api.sens-ai.work`
Micro refusé dans l’appel vocal	`Permissions-Policy` restrictive	Ajoutez `microphone=(self "https://api.sens-ai.work")`