Comment ajouter le chatbot IA Asyntai à PrestaShop

Plateforme :

PrestaShop

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

É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 :

Étape 2 : Utiliser le module de code personnalisé (recommandé)

La façon la plus simple d'ajouter le chatbot est d'utiliser un module gratuit « Custom Code » depuis la marketplace PrestaShop Addons :

1. Connectez-vous à votre back-office PrestaShop
2. Accédez à Modules → Gestionnaire de modules
3. Cliquez sur "Upload a module" ou recherchez sur la marketplace « Custom Code » ou « Header Footer Scripts »
4. Installez un module comme "Custom JS and CSS" ou similaire
5. Une fois installé, accédez à la configuration du module
6. Recherchez la section « Footer Scripts » ou « Before </body> »
7. Collez votre code d'intégration Asyntai
8. Cliquez sur "Save"

Alternative : Modifier le template du thème (PrestaShop 1.7+/8)

Vous pouvez ajouter le code directement au modèle de pied de page de votre thème :

1. Accédez à vos fichiers PrestaShop via FTP ou le gestionnaire de fichiers
2. Accédez au dossier de votre thème : themes/your_theme/templates/_partials/
3. Ouvrez le fichier footer.tpl (ou dans certains thèmes, vérifiez templates/layouts/layout-both-columns.tpl)
4. Trouvez la balise fermante </body> ou la section {block name='javascript_bottom'}
5. Collez votre code d'intégration Asyntai juste avant la balise fermante </body>
6. Enregistrez le fichier
7. Videz le cache de PrestaShop : Advanced Parameters → Performance → Clear cache

Alternative : Utilisation du fichier JavaScript personnalisé du thème

De nombreux thèmes PrestaShop incluent un fichier custom.js pour vos propres scripts :

1. Accédez à : themes/your_theme/assets/js/
2. Recherchez un fichier nommé custom.js (créez-le s'il n'existe pas)
3. Ajoutez le code suivant pour charger dynamiquement le chatbot :
   (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);
})();
4. Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel
5. Videz le cache de PrestaShop

Alternative : Créer un module simple (pour les développeurs)

Pour les développeurs, vous pouvez créer un module simple utilisant le hook displayFooter :

1. Créez un dossier : modules/asyntaichatbot/
2. Créez asyntaichatbot.php avec ce code :
   <?php
class AsyntaiChatbot extends Module {
  public function __construct() {
    $this->name = 'asyntaichatbot';
    $this->version = '1.0.0';
    $this->author = 'Your Name';
    parent::__construct();
    $this->displayName = 'Asyntai Chatbot';
  }
  public function install() {
    return parent::install() && $this->registerHook('displayFooter');
  }
  public function hookDisplayFooter($params) {
    return '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
  }
}
3. Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel
4. Installez le module via Modules → Module Manager

Étape 3 : Vérifier l'installation

Après avoir enregistré vos modifications et vidé le cache, visitez votre boutique 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.