Comment ajouter le chatbot IA Asyntai à Sylius

Plateforme :

Sylius

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Docusaurus Hugo Kentico Volusion Craft CMS Contentful Strapi Joomla Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Statamic Umbraco 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 : Ajouter au modèle de mise en page Twig (recommandé)

Sylius est construit sur Symfony et utilise le moteur de templates Twig. L'approche recommandée consiste à surcharger le template de mise en page de la boutique pour inclure le chatbot sur toutes les pages de la vitrine.

1. Dans votre projet Sylius, accédez au répertoire templates/bundles/SyliusShopBundle/ (créez-le s'il n'existe pas)
2. Créez ou modifiez le fichier layout.html.twig pour surcharger la mise en page par défaut de la boutique
3. Si le fichier existe déjà, trouvez le {% block javascripts %} bloc
4. Ajoutez le code d'intégration Asyntai en étendant le bloc javascripts :
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel depuis le tableau de bord
6. Enregistrez le fichier

Méthode alternative 1 : Utilisation des événements de template Sylius

Sylius fournit un puissant système d'événements de templates qui vous permet d'injecter du contenu dans des parties spécifiques de la mise en page sans surcharger des templates entiers. Vous pouvez l'utiliser pour ajouter le widget de chat à la zone de pied de page.

1. Créez un nouveau fichier template à templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig avec le contenu suivant :
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Enregistrez l'événement template dans votre fichier de configuration config/packages/sylius_ui.yaml :
   sylius_ui:
    events:
        sylius.shop.layout.after_body:
            blocks:
                asyntai_chatbot:
                    template: "@SyliusShop/Event/asyntai_widget.html.twig"
                    priority: 0
3. Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel
4. Videz le cache Symfony (voir Étape 3 ci-dessous)

Méthode alternative 2 : Utilisation de Webpack Encore

Si votre projet Sylius utilise Webpack Encore pour la gestion des ressources, vous pouvez intégrer le script du chatbot via votre pipeline de build JavaScript.

1. Créez un nouveau fichier JavaScript à assets/shop/js/asyntai-chatbot.js avec le contenu suivant :
   (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);
})();
2. Importez ce fichier dans votre point d'entrée boutique (par ex., assets/shop/entry.js ou assets/shop/js/app.js) :
   import './js/asyntai-chatbot';
3. Reconstruisez vos ressources en exécutant :
   yarn encore dev

   Ou pour la production :

   yarn encore production
4. Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel

Méthode alternative 3 : Utilisation du Sonata Block Bundle

Si votre installation Sylius utilise le Sonata Block Bundle (inclus par défaut dans certaines configurations Sylius), vous pouvez créer un service de bloc personnalisé pour afficher le widget de chat.

1. Créez une nouvelle classe de service de bloc dans votre projet, par exemple src/Block/AsyntaiChatbotBlockService.php :
   <?php

namespace App\Block;

use Sonata\BlockBundle\Block\BlockContextInterface;
use Sonata\BlockBundle\Block\Service\AbstractBlockService;
use Symfony\Component\HttpFoundation\Response;

class AsyntaiChatbotBlockService extends AbstractBlockService
{
    public function execute(BlockContextInterface $blockContext, Response $response = null): Response
    {
        return $this->renderResponse('block/asyntai_chatbot.html.twig', [
            'block' => $blockContext->getBlock(),
        ], $response);
    }
}
2. Créez le template de bloc à templates/block/asyntai_chatbot.html.twig :
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. Enregistrez le service de bloc dans votre config/services.yaml :
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Placez le bloc dans votre contexte de pied de page via l'administration Sonata ou en l'ajoutant à la configuration de votre mise en page
5. Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel

Étape 3 : Vider le cache et vérifier

Après avoir effectué vos modifications, vous devez vider le cache de Symfony et vérifier l'installation :

1. Videz le cache Symfony en exécutant la commande suivante depuis la racine de votre projet :
   bin/console cache:clear
2. Si vous êtes en environnement de production, préchauffez également le cache :
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Ouvrez votre vitrine en ligne dans un nouvel onglet du navigateur
4. Vous devriez voir le bouton du widget de chat dans le coin inférieur droit de votre page
5. Cliquez dessus pour vérifier qu'il s'ouvre et fonctionne correctement