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

Universal guide for HTML, custom sites, and static generators

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

If your website has multiple HTML pages, you have several 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

If you're using server-side includes (SSI), PHP includes, or similar:

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

Create a single JavaScript file that loads the chatbot on all 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); })();
Replace YOUR_WIDGET_ID with your actual widget ID
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

Add to gatsby-browser.js or use 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