Aller au contenu

Intégrer le widget de Silvio sur votre site web

Autoriser le domaine de votre site web

Section titled “Autoriser le domaine de votre site web”

Avant d’intégrer le widget, l’instance Futuh doit reconnaître le domaine depuis lequel il va être intégré comme domaine autorisé. Sans cela, le navigateur bloquera la connexion par politique CORS.

  1. Dans votre instance Futuh, ouvrez Paramètres → Technique → Chat en direct → Canaux.
  2. Ouvrez le canal associé à Silvio (il s’appelle normalement Futuh Web ou porte le nom de votre organisation).
  3. Cherchez l’onglet Règles du canal.
  4. Dans la règle active, ajoutez le domaine public de votre site web dans le champ d’URL autorisée. Par exemple : https://mon-organisation.org.
  5. Enregistrez et vérifiez que la règle reste active avec l’action Afficher le bouton et le texte ou Afficher uniquement le bouton.

Copier les deux balises script

Section titled “Copier les deux balises script”

Silvio s’intègre avec deux balises <script>. La première charge le code du widget, la seconde enregistre les ressources nécessaires.

  1. Dans le canal Silvio, ouvrez la section Canaux web.
  2. Vous verrez un fragment de code prêt à copier. Il contient deux balises script : l’une pointe vers /im_livechat/loader/... et l’autre vers /im_livechat/assets_embed.js.
  3. Copiez le fragment entier.

Le fragment a approximativement cette forme (remplacez le domaine par celui de votre instance) :

<script defer src="https://mon-organisation.futuh.coop/im_livechat/loader/2"></script>
<script defer src="https://mon-organisation.futuh.coop/im_livechat/assets_embed.js"></script>

Le nombre à la fin du loader est l’identifiant du canal. Si votre instance a plusieurs canaux, assurez-vous de copier celui du canal Silvio et non un autre.

Coller le snippet dans votre site web

Section titled “Coller le snippet dans votre site web”

L’endroit où coller le snippet dépend du système avec lequel votre site web est construit.

Dans un site statique ou généré (Astro, Eleventy, Hugo, Jekyll)

Section titled “Dans un site statique ou généré (Astro, Eleventy, Hugo, Jekyll)”
  1. Ouvrez le gabarit de base de votre site (Base.astro, _layout.html ou équivalent).
  2. Collez les deux balises script juste avant la fermeture de </body>.
  3. Redéployez le site web.

Dans WordPress, Drupal ou un CMS similaire

Section titled “Dans WordPress, Drupal ou un CMS similaire”
  1. Entrez dans le panneau d’administration.
  2. Cherchez la section Apparence → Éditeur du thème ou Configuration → Scripts du pied de page, selon votre CMS.
  3. Collez les deux balises script dans le bloc de scripts du pied.
  4. Enregistrez et videz le cache si votre CMS l’utilise.

Dans un service sans accès au HTML

Section titled “Dans un service sans accès au HTML”

Si votre plateforme ne permet pas d’ajouter des scripts dans le HTML (certains créateurs de sites web le restreignent), vous ne pourrez pas intégrer le widget directement. Alternative : utiliser un lien qui ouvre la conversation avec Silvio dans un nouvel onglet pointant vers votre instance Futuh.

Vérifier que ça fonctionne

Section titled “Vérifier que ça fonctionne”
  1. Ouvrez le site web public dans une fenêtre de navigation privée (pour éviter le cache).
  2. Dans le coin inférieur droit doit apparaître la bulle de chat.
  3. Cliquez sur la bulle. Elle devrait ouvrir la fenêtre de chat avec le message d’accueil de Silvio.
  4. Écrivez une question de test. Silvio doit répondre en quelques secondes.

Résolution de problèmes

Section titled “Résolution de problèmes”
  • La bulle n’apparaît pas : vérifiez que les deux balises script sont dans la page et que le domaine de votre site web est autorisé dans les règles du canal.
  • La bulle apparaît mais le chat ne se charge pas : ouvrez la console du navigateur. Si vous voyez des erreurs CORS, le domaine n’est pas correctement autorisé. Si vous voyez des erreurs réseau, vérifiez que le domaine de votre instance Futuh est accessible publiquement.
  • Le chat se charge mais Silvio ne répond pas : vérifiez dans l’instance Futuh que l’agent est actif et que le modèle IA a une clé d’API valide. Détail dans Configurer Silvio.
  • Le style du widget ne correspond pas à votre site web : vous pouvez personnaliser les couleurs et la typographie depuis la fiche du canal dans Futuh, dans l’onglet de personnalisation visuelle.

Prochaines étapes

Section titled “Prochaines étapes”