Como Adicionar o Chatbot IA Asyntai ao Sylius

Plataforma:

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

Passo 1: Obtenha Seu Código de Incorporação

Primeiro, acesse seu Dashboard Asyntai e role para baixo até a seção "Embed Code". Copie seu código de incorporação exclusivo que se parecerá com isto:

Passo 2: Adicionar ao Template de Layout Twig (Recomendado)

O Sylius é construído sobre o Symfony e usa o motor de templates Twig. A abordagem recomendada é sobrescrever o template de layout da loja para incluir o chatbot em todas as páginas da vitrine.

1. No seu projeto Sylius, navegue até o diretório templates/bundles/SyliusShopBundle/ (crie-o se não existir)
2. Crie ou edite o arquivo layout.html.twig para sobrescrever o layout padrão da loja
3. Se o arquivo já existir, encontre o {% block javascripts %} bloco
4. Adicione o código de incorporação Asyntai estendendo o bloco javascripts:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Substitua YOUR_WIDGET_ID pelo ID real do seu widget no painel
6. Salve o arquivo

Método Alternativo 1: Usando Eventos de Template do Sylius

O Sylius oferece um poderoso sistema de eventos de template que permite injetar conteúdo em partes específicas do layout sem sobrescrever templates inteiros. Você pode usar isso para adicionar o widget de chatbot à área do rodapé.

1. Crie um novo arquivo de template em templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig com o seguinte conteúdo:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Registre o evento de template no seu arquivo de configuração 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. Substitua YOUR_WIDGET_ID pelo seu ID de widget real
4. Limpe o cache do Symfony (veja o Passo 3 abaixo)

Método Alternativo 2: Usando Webpack Encore

Se seu projeto Sylius usa Webpack Encore para gerenciamento de assets, você pode integrar o script do chatbot através do seu pipeline de build JavaScript.

1. Crie um novo arquivo JavaScript em assets/shop/js/asyntai-chatbot.js com o seguinte conteúdo:
   (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. Importe este arquivo no ponto de entrada da sua loja (ex.: assets/shop/entry.js ou assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Reconstrua seus assets executando:
   yarn encore dev

   Ou para produção:

   yarn encore production
4. Substitua YOUR_WIDGET_ID pelo seu ID de widget real

Método Alternativo 3: Usando o Sonata Block Bundle

Se sua instalação do Sylius usa o Sonata Block Bundle (incluído por padrão em algumas configurações do Sylius), você pode criar um serviço de bloco personalizado para renderizar o widget de chatbot.

1. Crie uma nova classe de serviço de bloco no seu projeto, por exemplo 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. Crie o template do bloco em 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. Registre o serviço de bloco no seu config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Coloque o bloco no contexto do rodapé através do admin do Sonata ou adicionando-o à configuração do seu layout
5. Substitua YOUR_WIDGET_ID pelo seu ID de widget real

Etapa 3: Limpar Cache e Verificar

Após fazer suas alterações, você precisa limpar o cache do Symfony e verificar a instalação:

1. Limpe o cache do Symfony executando o seguinte comando a partir da raiz do seu projeto:
   bin/console cache:clear
2. Se você está em um ambiente de produção, também aqueça o cache:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Abra seu site em uma nova aba do navegador ou janela anônima
4. Você deverá ver o botão do widget de chat no canto inferior direito
5. Clique nele para confirmar que abre e funciona corretamente