Comment ajouter le chatbot IA Asyntai à OpenCart

Guide étape par étape pour les sites OpenCart

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 : Modifier le modèle de pied de page (recommandé)

La façon la plus directe d'ajouter le chatbot est de modifier le template de pied de page de votre thème :

Accédez à vos fichiers OpenCart via FTP ou le gestionnaire de fichiers
Naviguez vers le template de pied de page de votre thème :
- OpenCart 3.x/4.x : catalog/view/theme/YOUR_THEME/template/common/footer.twig
- OpenCart 2.x : catalog/view/theme/YOUR_THEME/template/common/footer.tpl
Ouvrez le fichier de pied de page pour le modifier
Trouvez la balise fermante </body>
Collez votre code d'intégration Asyntai juste avant la balise </body>
Enregistrez le fichier
Videz le cache d'OpenCart : Tableau de bord → Icône d'engrenage bleue (en haut à droite) → Refresh ou supprimez le contenu de system/storage/cache/

Astuce : Si vous utilisez le thème par défaut, le chemin serait catalog/view/theme/default/template/common/footer.twig. Créez toujours une sauvegarde avant de modifier les fichiers de modèle.

Alternative : Utilisation de l'option de code personnalisé du thème

Many modern OpenCart themes include a built-in option for custom code:

Log in to your OpenCart Admin Panel
Accédez à Extensions → Thèmes (ou Extensions → Extensions → Thèmes)
Cliquez sur Edit sur votre thème actif
Recherchez une section « Custom Code », « Footer Scripts » ou « Custom JavaScript »
Collez votre code d'intégration Asyntai
Cliquez sur "Save"
Videz le cache

Note : Tous les thèmes ne disposent pas de cette option. Si votre thème n'inclut pas de champs de code personnalisé, utilisez la méthode de modification de modèle ou installez une extension.

Alternative : Utilisation d'une extension de code personnalisé

Vous pouvez installer une extension gratuite depuis la Marketplace OpenCart pour ajouter des scripts personnalisés :

Accédez au Marketplace OpenCart
Recherchez « Custom Script », « Header Footer Scripts » ou « Custom Code »
Téléchargez et installez une extension adaptée
Dans votre panneau d'administration, allez dans Extensions → Extensions → Modules
Trouvez et installez le module de code personnalisé
Configurez le module et collez votre code d'intégration Asyntai dans la section de pied de page
Enregistrez et videz le cache

Important : L'utilisation d'extensions est recommandée plutôt que la modification des fichiers principaux, car elles résistent aux mises à jour d'OpenCart. Les extensions populaires incluent « Custom Script in Header & Footer » disponible sur la marketplace.

Alternative: Using addScript Method (For Developers)

Pour les développeurs, OpenCart 3.x/4.x offre un moyen programmatique d'ajouter des scripts :

Ouvrez catalog/controller/common/footer.php
Ajoutez la ligne suivante avant $data['scripts'] = $this->document->getScripts('footer'); :
$this->document->addScript('https://asyntai.com/static/js/chat-widget.js', 'footer');
Pour l'attribut data, vous devrez modifier le fichier footer.twig pour l'inclure manuellement, ou ajouter du JavaScript en ligne après la boucle de scripts

Note : Pour que le widget fonctionne correctement avec l'attribut data, la méthode par modèle est plus simple car la méthode addScript ne prend pas en charge les attributs personnalisés directement.

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

Vous ne voyez pas le widget ? Assurez-vous de vider le cache d'OpenCart. Accédez à votre panneau d'administration, cliquez sur l'icône d'engrenage bleue en haut à droite, puis cliquez sur les boutons d'actualisation. Essayez également de vider le cache de votre navigateur ou de consulter le site dans une fenêtre de navigation privée. Si vous avez modifié le mauvais fichier de modèle, vérifiez que votre thème utilise bien le fichier que vous avez édité.