Sylius में Asyntai AI चैटबॉट कैसे जोड़ें

प्लेटफ़ॉर्म:

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

चरण 1: अपना एम्बेड कोड प्राप्त करें

सबसे पहले, अपने Asyntai डैशबोर्ड पर जाएँ और नीचे "Embed Code" अनुभाग तक स्क्रॉल करें। अपना यूनिक एम्बेड कोड कॉपी करें, जो कुछ इस तरह दिखेगा:

चरण 2: Twig लेआउट टेम्पलेट में जोड़ें (अनुशंसित)

Sylius Symfony पर बनाया गया है और Twig टेम्पलेटिंग इंजन का उपयोग करता है। अनुशंसित दृष्टिकोण सभी स्टोरफ्रंट पेजों पर चैटबॉट को शामिल करने के लिए शॉप लेआउट टेम्पलेट को ओवरराइड करना है।

1. अपने Sylius प्रोजेक्ट में, templates/bundles/SyliusShopBundle/ डायरेक्टरी पर जाएं (यदि यह मौजूद नहीं है तो इसे बनाएं)
2. डिफॉल्ट शॉप लेआउट को ओवरराइड करने के लिए layout.html.twig फ़ाइल बनाएं या संपादित करें
3. यदि फ़ाइल पहले से मौजूद है, तो खोजें {% block javascripts %} ब्लॉक
4. javascripts ब्लॉक को विस्तारित करके Asyntai एम्बेड कोड जोड़ें:
   {% block javascripts %} {{ parent() }} <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> {% endblock %}
5. YOUR_WIDGET_ID को डैशबोर्ड से अपनी वास्तविक विजेट ID से बदलें
6. फ़ाइल सहेजें

वैकल्पिक विधि 1: Sylius टेम्पलेट इवेंट्स का उपयोग

Sylius एक शक्तिशाली टेम्पलेट इवेंट सिस्टम प्रदान करता है जो आपको संपूर्ण टेम्पलेट्स को ओवरराइड किए बिना लेआउट के विशिष्ट भागों में सामग्री इंजेक्ट करने की अनुमति देता है। आप इसका उपयोग फुटर क्षेत्र में चैटबॉट विजेट जोड़ने के लिए कर सकते हैं।

1. निम्नलिखित सामग्री के साथ templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig पर एक नई टेम्पलेट फ़ाइल बनाएं:
   <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>
2. अपनी 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. YOUR_WIDGET_ID को अपनी वास्तविक विजेट ID से बदलें
4. Symfony कैश साफ़ करें (नीचे चरण 3 देखें)

वैकल्पिक विधि 2: Webpack Encore का उपयोग

यदि आपका Sylius प्रोजेक्ट एसेट मैनेजमेंट के लिए Webpack Encore का उपयोग करता है, तो आप अपने जावास्क्रिप्ट बिल्ड पाइपलाइन के माध्यम से चैटबॉट स्क्रिप्ट को एकीकृत कर सकते हैं।

1. निम्नलिखित सामग्री के साथ assets/shop/js/asyntai-chatbot.js पर एक नई जावास्क्रिप्ट फ़ाइल बनाएं:
   (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. इस फ़ाइल को अपने शॉप एंट्री पॉइंट (जैसे, assets/shop/entry.js या assets/shop/js/app.js) में इम्पोर्ट करें:
   import './js/asyntai-chatbot';
3. चलाकर अपनी एसेट्स पुनर्निर्मित करें:
   yarn encore dev

   या प्रोडक्शन के लिए:

   yarn encore production
4. YOUR_WIDGET_ID को अपनी वास्तविक विजेट ID से बदलें

वैकल्पिक विधि 3: Sonata Block Bundle का उपयोग

यदि आपका Sylius इंस्टॉलेशन Sonata Block Bundle का उपयोग करता है (कुछ Sylius कॉन्फ़िगरेशन में डिफ़ॉल्ट रूप से शामिल), तो आप चैटबॉट विजेट को रेंडर करने के लिए एक कस्टम ब्लॉक सर्विस बना सकते हैं।

1. अपने प्रोजेक्ट में एक नई ब्लॉक सर्विस क्लास बनाएं, उदाहरण के लिए 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. templates/block/asyntai_chatbot.html.twig पर ब्लॉक टेम्पलेट बनाएं:
   <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>
3. अपने config/services.yaml में ब्लॉक सर्विस रजिस्टर करें:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Sonata एडमिन के माध्यम से या अपने लेआउट कॉन्फ़िगरेशन में जोड़कर ब्लॉक को अपने फुटर संदर्भ में रखें
5. YOUR_WIDGET_ID को अपनी वास्तविक विजेट ID से बदलें

चरण 3: कैश साफ़ करें और सत्यापित करें

अपने परिवर्तन करने के बाद, आपको Symfony कैश साफ़ करने और इंस्टॉलेशन को सत्यापित करने की आवश्यकता है:

1. अपने प्रोजेक्ट रूट से निम्नलिखित कमांड चलाकर Symfony कैश साफ़ करें:
   bin/console cache:clear
2. यदि आप प्रोडक्शन वातावरण में हैं, तो कैश को भी वार्म अप करें:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. नए ब्राउज़र टैब या इनकॉग्निटो विंडो में अपने Sylius स्टोरफ्रंट पर जाएँ
4. आपको नीचे दाएँ कोने में चैट विजेट बटन दिखाई देना चाहिए
5. यह सुनिश्चित करने के लिए इस पर क्लिक करें कि यह सही ढंग से खुलता और काम करता है