Comment ajouter le chatbot IA Asyntai à n'importe quel site web

Guide universel pour HTML, sites personnalisés et générateurs statiques

Plateforme :

Étape 1 : Obtenir votre code d'intégration

Tout d'abord, rendez-vous sur votre Tableau de bord Asyntai et faites défiler jusqu'à la section « Code d'intégration ». Copiez votre code d'intégration unique qui ressemblera à ceci :

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Note : Le code ci-dessus n'est qu'un exemple. Vous devez copier votre propre code d'intégration depuis votre Tableau de bord car il contient votre identifiant de widget personnel.

Étape 2 : Ajouter à votre fichier HTML

La façon la plus simple d'ajouter le chatbot est de coller le code d'intégration directement dans votre fichier HTML :

Ouvrez votre fichier HTML dans un éditeur de texte
Trouvez la balise fermante </body>
Collez votre code d'intégration Asyntai juste avant la balise </body>
Enregistrez le fichier

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Astuce : L'ajout du script avant la balise fermante </body> garantit qu'il se charge après le contenu de votre page, ce qui est optimal pour les performances et ne ralentira pas votre page.

Pour les sites multi-pages

Si votre site Web comporte plusieurs pages HTML, vous avez plusieurs options :

Option A : Ajouter à chaque page

Ajoutez le code d'intégration à chaque fichier HTML où vous souhaitez que le chatbot apparaisse.

Option B : Utiliser un fichier d'inclusion de pied de page commun

Si vous utilisez des inclusions côté serveur (SSI), des inclusions PHP ou similaires :

Créez un fichier footer.html (ou footer.php)
Ajoutez le code d'intégration Asyntai à ce fichier
Incluez ce fichier de pied de page dans toutes vos pages :
 <?php include 'footer.php'; ?>

Option C : Chargement dynamique JavaScript

Créez un seul fichier JavaScript qui charge le chatbot sur toutes les pages :

Créez un fichier appelé asyntai-loader.js :
(function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })();
Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel
Incluez ce script dans toutes vos pages :
<script src="/js/asyntai-loader.js"></script>

Pour les générateurs de sites statiques

Si vous utilisez un générateur de sites statiques, ajoutez le code d'intégration à votre mise en page ou modèle de base :

Jekyll

Ajoutez dans _includes/footer.html ou _layouts/default.html

Hugo

Ajoutez dans layouts/partials/footer.html ou layouts/_default/baseof.html

Gatsby

Ajoutez dans gatsby-browser.js ou utilisez gatsby-ssr.js

Next.js

Ajoutez dans pages/_document.js ou utilisez le composant next/script

Nuxt.js

Ajoutez dans nuxt.config.js sous head.script

Eleventy (11ty)

Ajoutez à votre mise en page de base dans _includes/

Astro

Ajoutez dans src/layouts/Layout.astro avant </body>

VuePress

Ajoutez dans .vuepress/config.js sous head

Pour les applications React / Vue / Angular

Pour les applications monopage (SPA), vous pouvez ajouter le script à votre index.html ou le charger dynamiquement :

React (méthode index.html)

<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

React (méthode useEffect)

// In your App.js or a component
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.async = true;
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

Vue (dans main.js ou App.vue)

// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);

Angular (dans index.html)

<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Étape 3 : Vérifier l'installation

Après avoir ajouté le code, ouvrez votre site web dans un nouvel onglet de navigateur ou en navigation privée. Vous devriez voir le bouton du widget de chat dans le coin inférieur droit. Cliquez dessus pour vérifier qu'il s'ouvre et fonctionne correctement.

Vous ne voyez pas le widget ? Vérifiez que le script est correctement placé avant la balise </body>. Assurez-vous qu'il n'y a pas d'erreurs JavaScript dans la console de votre navigateur (appuyez sur F12 pour ouvrir les outils de développement). Essayez de vider le cache de votre navigateur ou de consulter la page en navigation privée.

Important : Le chatbot nécessite que votre site web soit servi via HTTP ou HTTPS (et non ouvert directement en tant que fichier). Si vous testez en local, utilisez un serveur de développement local.

Documentation