Installation du widget

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

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 :

Directive	Raison
`script-src`	Charger le script `widget.js`
`connect-src`	Échanges avec le chatbot (SSE + API)
`img-src`	Logo et avatar du bot (si configurés)

Exemple de header complet :

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

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 ou Refused to connect.

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
Widget sous d’autres éléments	z-index trop bas	Le widget utilise z-index 999999 par défaut