Comment ajouter le chatbot IA Asyntai à OpenCart

Guide étape par étape pour les sites OpenCart

Plateforme :

The Easy Way: Install the Asyntai Extension

We publish a free extension on the OpenCart Marketplace. It puts the chatbot on your storefront and connects your account, and there is no code to copy and no template to edit. It works on OpenCart 3.x and 4.x.

Download Asyntai - AI Chatbot from the OpenCart Marketplace
In your admin panel, go to Extensions → Installer and upload the ZIP file
Go to Extensions → Extensions, choose Modules in the list, find Asyntai AI Chatbot and press the green install button
Press edit, then press Connect to Asyntai. A window opens where you sign in or create an account.

That is all. The chatbot is live on your storefront when the window closes.

Your products, prices and stock

When you connect, the extension also lets Asyntai read your catalogue. Your assistant then answers with the price you charge today and tells shoppers what is in stock, instead of repeating whatever your pages said when they were last read.

Asyntai reads your products through a read-only address on your own store. Every request is signed, and the reply carries the prices a shopper would actually pay, with your tax rules already applied. You can switch this off at any time on the extension's settings screen.

Updating from version 1.0.0? OpenCart clears a module's settings when you uninstall it, so press Connect to Asyntai once after the update. From this version on, updates keep your connection.

Or Add the Code Yourself

Prefer not to install an extension? The rest of this page shows how to add the chatbot by hand. You will not get the catalogue reading this way.

Étape 1 : Obtenir votre code d'intégration

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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.

Step 2: Edit Footer Template

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

De nombreux thèmes OpenCart incluent une option intégrée pour le code personnalisé :

Connectez-vous à votre panneau d'administration OpenCart
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 :

Go to the OpenCart Marketplace
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 : Utilisation de la méthode addScript (pour les développeurs)

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

Documentation