How to Add Asyntai AI Chatbot to Sylius

Platform:

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

Step 1: Get Your Embed Code

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

Step 2: Add to Twig Layout Template (Recommended)

Sylius is built on Symfony and uses the Twig templating engine. The recommended approach is to override the shop layout template to include the chatbot on all storefront pages.

1. In your Sylius project, navigate to the templates/bundles/SyliusShopBundle/ directory (create it if it doesn't exist)
2. Create or edit the file layout.html.twig to override the default shop layout
3. If the file already exists, find the {% block javascripts %} block
4. Add the Asyntai embed code by extending the javascripts block:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Replace YOUR_WIDGET_ID with your actual widget ID from the dashboard
6. Save the file

Alternative Method 1: Using Sylius Template Events

Sylius provides a powerful template event system that allows you to inject content into specific parts of the layout without overriding entire templates. You can use this to add the chatbot widget to the footer area.

1. Create a new template file at templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig with the following content:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Register the template event in your config/packages/sylius_ui.yaml configuration file:
   sylius_ui:
    events:
        sylius.shop.layout.after_body:
            blocks:
                asyntai_chatbot:
                    template: "@SyliusShop/Event/asyntai_widget.html.twig"
                    priority: 0
3. Replace YOUR_WIDGET_ID with your actual widget ID
4. Clear the Symfony cache (see Step 3 below)

Alternative Method 2: Using Webpack Encore

If your Sylius project uses Webpack Encore for asset management, you can integrate the chatbot script through your JavaScript build pipeline.

1. Create a new JavaScript file at assets/shop/js/asyntai-chatbot.js with the following content:
   (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. Import this file in your shop entry point (e.g., assets/shop/entry.js or assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Rebuild your assets by running:
   yarn encore dev

   Or for production:

   yarn encore production
4. Replace YOUR_WIDGET_ID with your actual widget ID

Alternative Method 3: Using Sonata Block Bundle

If your Sylius installation uses the Sonata Block Bundle (included by default in some Sylius configurations), you can create a custom block service to render the chatbot widget.

1. Create a new block service class in your project, for example 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. Create the block template at 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. Register the block service in your config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Place the block in your footer context through the Sonata admin or by adding it to your layout configuration
5. Replace YOUR_WIDGET_ID with your actual widget ID

Step 3: Clear Cache and Verify

After making your changes, you need to clear the Symfony cache and verify the installation:

1. Clear the Symfony cache by running the following command from your project root:
   bin/console cache:clear
2. If you are in a production environment, also warm up the cache:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Visit your Sylius storefront in a new browser tab or incognito window
4. You should see the chat widget button in the bottom right corner
5. Click it to make sure it opens and works correctly