Como Adicionar o Chatbot IA Asyntai ao SilverStripe

Guia passo a passo para SilverStripe CMS

Plataforma:

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:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Nota: O código acima é apenas um exemplo. Você deve copiar seu próprio código de incorporação exclusivo do seu Dashboard, pois ele contém seu ID de widget pessoal.

Passo 2: Adicionar ao Template do SilverStripe (Recomendado)

A maneira mais simples de adicionar o chatbot ao seu site SilverStripe é editando diretamente o arquivo de template principal do seu tema:

Abra o arquivo de template do seu tema (ex.: themes/yourtheme/templates/Page.ss)
Adicione o código de incorporação logo antes da tag de fechamento </body>:

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Salve o arquivo e limpe o cache do SilverStripe adicionando ?flush=1 à URL do seu site

Dica: O SilverStripe usa arquivos de template .ss com um sistema de herança de templates. Colocar o script no seu template base Page.ss garante que o chatbot apareça em todas as páginas do seu site. Se o seu tema usa uma pasta Includes, você também pode colocar o script em um arquivo de include compartilhado.

Método Alternativo 1: Usando a Classe Requirements no Controller

O SilverStripe oferece uma classe Requirements para gerenciar dependências de JavaScript e CSS programaticamente. Esta é a abordagem recomendada para desenvolvedores:

Abra app/src/PageController.php (ou seu arquivo de controlador de página)
No método init(), use Requirements::customScript() para carregar o widget dinamicamente:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        JS);
    }
}

Salve o arquivo e limpe o cache visitando seudominio.com?flush=1

Nota: A classe Requirements é a forma padrão do SilverStripe para incluir scripts e folhas de estilo. Usar Requirements::customScript() gera JavaScript inline. Este método garante que o widget seja carregado em todas as páginas gerenciadas pelo seu PageController.

Método Alternativo 2: Usando Requirements no Template

Você também pode usar a sintaxe de template do SilverStripe para incluir arquivos JavaScript diretamente no seu template .ss:

Abra o arquivo de template do seu tema (ex.: themes/yourtheme/templates/Page.ss)
Adicione o seguinte perto do final do template, antes de </body>:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

Dica: A sintaxe <% require %> é a forma do SilverStripe no nível de template para incluir assets. Note que este método não suporta nativamente a adição de atributos data personalizados à tag script, então adicionamos um pequeno trecho de inicialização para definir o ID do widget.

Método Alternativo 3: Usando Configuração do SilverStripe (YAML)

Para uma abordagem baseada em configuração, você pode usar a configuração YAML do SilverStripe para adicionar requisitos globais:

Abra ou crie o arquivo app/_config/app.yml
Adicione a configuração para incluir o widget via uma extensão personalizada ou configuração de controlador:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

Crie o arquivo de extensão app/src/Extensions/AsyntaiChatbotExtension.php:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        ");
    }
}

Aplique a extensão ao seu PageController em app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Execute ?flush=1 para reconstruir o cache de configuração

Nota: Usar configuração YAML e extensões é a abordagem mais modular do SilverStripe. Ela mantém a integração do chatbot separada da lógica principal do seu controlador e facilita a ativação ou desativação sem alterar o código.

Passo 3: Verifique a Instalação

Após adicionar o código e limpar o cache do SilverStripe, abra seu site em uma nova aba do navegador. Você deverá ver o botão do widget de chat no canto inferior direito. Clique nele para garantir que abre e funciona corretamente.

Não está vendo o widget? Certifique-se de que limpou o cache adicionando ?flush=1 à URL do seu site. Verifique se substituiu YOUR_WIDGET_ID pelo seu ID de widget real do painel. Limpe o cache do navegador ou visualize no modo anônimo. Abra o console do navegador (F12) para verificar se há erros de JavaScript. Se estiver usando a classe Requirements, verifique se o método init() do seu PageController está sendo chamado corretamente.