Comment ajouter le chatbot IA Asyntai à ProcessWire

Guide étape par étape pour les sites ProcessWire CMS

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 au fichier de modèle (recommandé)

ProcessWire utilise des fichiers de modèle PHP situés dans le répertoire site/templates/. L'approche la plus simple est d'ajouter le code d'intégration directement à votre fichier de modèle principal :

Accédez aux fichiers de votre installation ProcessWire via FTP, SSH ou votre gestionnaire de fichiers
Accédez à site/templates/
Ouvrez votre fichier de modèle principal — il s'agit souvent de _main.php ou basic-page.php selon le profil de votre site
Si vous utilisez la stratégie de sortie différée (la valeur par défaut pour la plupart des profils de site), ouvrez _main.php
Trouvez la balise fermante </body>
Collez votre code d'intégration Asyntai juste avant :

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

Astuce : Placer le script juste avant la balise fermante </body> garantit que le chatbot se charge après le contenu de la page, ce qui est recommandé pour des performances optimales et ne ralentira pas le rendu de votre page.

Méthode alternative 1 : Utilisation de _foot.inc ou du fichier Append _main.php

Si votre site ProcessWire utilise l'approche par fichier append (courante dans de nombreux profils de site), vous pouvez ajouter le code d'intégration au fichier d'inclusion du pied de page partagé :

Accédez à site/templates/
Ouvrez _foot.inc (ou votre fichier d'inclusion de pied de page équivalent)
Collez votre code d'intégration Asyntai juste avant la balise fermante </body>
Enregistrez le fichier

La stratégie de sortie différée de ProcessWire fonctionne généralement avec trois fichiers clés :

_init.php — s'exécute avant chaque template, initialise les variables
Votre fichier de template (par ex., basic-page.php) — remplit les variables de contenu
_main.php — génère le balisage HTML final à partir de ces variables

Si votre site utilise cette approche, ajouter le script dans _main.php avant </body> garantit qu'il apparaîtra sur chaque page.

Note : Les noms de fichiers _init.php et _main.php sont configurés dans votre site/config.php via les paramètres $config->prependTemplateFile et $config->appendTemplateFile. Vérifiez votre configuration si vos fichiers portent des noms différents.

Méthode alternative 2 : Utilisation du tableau $config->scripts

ProcessWire fournit un FilenameArray $config->scripts que vous pouvez utiliser pour gérer les fichiers JavaScript. Dans votre fichier _init.php ou votre fichier de modèle individuel, ajoutez :

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

Puis dans votre _main.php (ou l'inclusion du pied de page), parcourez le tableau de scripts pour les afficher :

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

Important : L'approche $config->scripts gère l'attribut src du script, mais l'attribut data-asyntai-id doit être géré séparément. Vous devrez soit ajouter l'attribut data manuellement dans la sortie de la boucle, soit utiliser la méthode de balise script directe de l'étape 2 pour la configuration la plus simple.

Méthode alternative 3 : Utilisation d'un hook (ready.php)

Pour une approche plus avancée, vous pouvez utiliser le système de hooks de ProcessWire pour injecter automatiquement le script du chatbot dans chaque page. Ajoutez le code suivant à votre fichier site/ready.php :

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Ce hook intercepte la sortie HTML rendue de chaque page et injecte automatiquement le script Asyntai juste avant la balise fermante </body>.

Astuce : L'approche par le hook ready.php est idéale si vous souhaitez le chatbot sur chaque page sans modifier aucun fichier de template. Elle résiste également aux changements de templates et aux mises à jour de thèmes puisqu'elle se trouve en dehors des fichiers de templates.

Étape 3 : Vérifier l'installation

Après avoir enregistré vos modifications, visitez votre site ProcessWire 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 ? Assurez-vous d'avoir enregistré tous les fichiers modifiés. Essayez de vider le cache de votre navigateur ou de consulter le site dans une fenêtre de navigation privée. Si le cache de modèles de ProcessWire est activé, vous devrez peut-être le vider en allant dans Modules → Core → Template Engine Cache ou en ajoutant ?nocache=1 à votre URL. Vérifiez également que votre fichier de modèle est bien utilisé par les pages que vous consultez.