Comment ajouter le chatbot IA Asyntai à Hugo

Guide étape par étape pour le générateur de sites statiques Hugo

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 le code au partiel du thème (recommandé)

La meilleure façon d'ajouter le chatbot à toutes les pages de votre site Hugo est de créer un partial :

Accédez au répertoire layouts/partials/ de votre projet Hugo
Créez un nouveau fichier appelé asyntai-widget.html
Collez votre code d'intégration Asyntai dans ce fichier :

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

Ouvrez le fichier baseof.html de votre thème (généralement dans layouts/_default/baseof.html)
Ajoutez le code d'intégration juste avant la balise fermante </body> :

    {{ partial "asyntai-widget.html" . }}
  </body>
</html>

Enregistrez le fichier et reconstruisez votre site Hugo

Astuce : L'utilisation de partials est la méthode recommandée par Hugo pour inclure des composants réutilisables. Cette méthode garantit que le chatbot apparaît sur chaque page qui utilise le template baseof.html, ce qui correspond généralement à toutes les pages de votre site.

Méthode alternative 1 : Ajout au partiel d'en-tête

Si votre thème possède un partial head, vous pouvez y ajouter le code :

Localisez le partial head de votre thème (généralement layouts/partials/head.html)
S'il n'existe pas, créez layouts/partials/head.html à la racine de votre projet
Ajoutez votre code d'intégration Asyntai à ce fichier :

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

Assurez-vous que votre baseof.html inclut ce partial dans la section <head> :

<head>
  {{ partial "head.html" . }}
</head>

Note : Si votre thème dispose déjà d'un partial head.html avec du contenu existant, ajoutez simplement votre code Asyntai à la suite. Ne remplacez pas le contenu existant.

Méthode alternative 2 : Dossier statique avec JavaScript personnalisé

Pour une approche plus modulaire utilisant le dossier static de Hugo :

Accédez au répertoire static/js/ de votre projet Hugo
Créez le répertoire s'il n'existe pas
Créez un nouveau fichier appelé asyntai-loader.js
Ajoutez le code suivant pour charger le widget :

// static/js/asyntai-loader.js
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.head.appendChild(script);
})();

Référencez ce fichier dans votre baseof.html ou partiel de pied de page avant </body> :

<script src="{{ "js/asyntai-loader.js" | relURL }}"></script>
</body>

Astuce : Les fichiers du répertoire static/ sont copiés tels quels à la racine de votre site publié. La fonction relURL génère le chemin relatif correct pour votre déploiement.

Méthode alternative 3 : Configuration Hugo (config.toml/yaml)

Pour certains thèmes Hugo qui prennent en charge les scripts personnalisés via la configuration :

# config.toml
[params]
  customJS = ["https://asyntai.com/static/js/chat-widget.js"]

# Or in config.yaml
params:
  customJS:
    - https://asyntai.com/static/js/chat-widget.js

Note : Cette méthode ne fonctionne que si votre thème prend en charge le paramètre customJS. Consultez la documentation de votre thème. Vous devrez peut-être également ajouter l'attribut data-asyntai-id via la personnalisation du thème.

Méthode alternative 4 : Front Matter (par page)

Pour ajouter le chatbot à des pages spécifiques uniquement :

Ajoutez un paramètre personnalisé au front matter de votre page :

---
title: "My Page"
asyntaiWidget: true
---

Dans votre baseof.html ou partial, ajoutez une logique conditionnelle :

{{ if .Params.asyntaiWidget }}
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{{ end }}

Astuce : Cette approche vous donne un contrôle granulaire sur les pages qui incluent le chatbot. Elle est utile pour les sites de documentation où vous ne souhaitez le widget que dans certaines sections.

Méthode alternative 5 : Remplacement des mises en page du thème

Pour remplacer la mise en page de votre thème sans modifier les fichiers du thème :

Copiez le fichier baseof.html du thème depuis themes/your-theme/layouts/_default/
Collez-le dans le fichier layouts/_default/baseof.html de votre projet
Ajoutez votre code d'intégration Asyntai avant la balise fermante </body>
Enregistrez et reconstruisez votre site

Important : Lorsque vous surchargez les fichiers du thème, vous ne recevrez pas automatiquement les mises à jour de ces fichiers lors de la mise à jour du thème. Cette méthode vous donne un contrôle total mais nécessite plus de maintenance. Envisagez d'utiliser des partials à la place pour faciliter les mises à jour du thème.

Étape 3 : Compiler et déployer

Après avoir ajouté le code, compilez votre site Hugo :

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Le site généré se trouvera dans le répertoire public/
Déployez ce répertoire sur votre plateforme d'hébergement (Netlify, Vercel, GitHub Pages, etc.)

Astuce : Pendant le développement, utilisez hugo server pour prévisualiser votre site en local à l'adresse http://localhost:1313. Le chatbot devrait apparaître dans le coin inférieur droit sur toutes les pages.

Étape 4 : Vérifier l'installation

Après avoir déployé votre site Hugo, ouvrez-le dans un nouvel onglet de navigateur. 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 ? Assurez-vous d'avoir reconstruit votre site avec la commande hugo après avoir effectué les modifications. Vérifiez que vous avez remplacé YOUR_WIDGET_ID par votre identifiant de widget réel depuis le Tableau de bord. Videz le cache de votre navigateur ou consultez le site en mode navigation privée. Si vous utilisez un CDN, vous devrez peut-être invalider le cache. Ouvrez la console du navigateur (F12) pour vérifier s'il y a des erreurs JavaScript.

Documentation