Como Adicionar o Chatbot de IA Asyntai ao Kirby

Guia passo a passo para sites Kirby 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.

Etapa 2: Adicionar ao Snippet do Kirby (Recomendado)

O Kirby é um CMS PHP baseado em arquivos que usa snippets para partes reutilizáveis de templates. A abordagem recomendada é criar um snippet dedicado para o chatbot:

Crie um novo arquivo de snippet em site/snippets/asyntai-widget.php
Cole seu código de incorporação no arquivo:

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

Em seguida, inclua o snippet no seu template principal (ex.: site/templates/default.php) ou no seu layout, logo antes da tag de fechamento </body>:

<?php snippet('asyntai-widget') ?>
</body>
</html>

Dica: Se você usa um layout compartilhado ou snippet de rodapé, pode adicionar a chamada do snippet lá para que apareça automaticamente em todas as páginas. Por exemplo, adicione-o ao seu snippet de rodapé logo antes de </body>.

Método Alternativo 1: Adicionar ao Snippet de Rodapé

Se o seu site Kirby usa um snippet de rodapé, você pode adicionar o código de incorporação diretamente lá:

Abra site/snippets/footer.php (crie-o se não existir)
Adicione o código de incorporação antes da tag de fechamento </body>:

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

Certifique-se de que seus templates incluem o snippet de rodapé:

<?php snippet('footer') ?>

Nota: Se o snippet de rodapé já está incluído em todos os seus templates, adicionar o chatbot aqui garante que ele apareça em todas as páginas sem modificar arquivos de template individuais.

Método Alternativo 2: Usando Plugin do Kirby

Você pode criar um plugin do Kirby para injetar automaticamente o script do chatbot em todas as páginas sem modificar nenhum template:

Crie o diretório e arquivo do plugin em site/plugins/asyntai/index.php
Adicione o seguinte código para usar os hooks do Kirby para injetar o script:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

Dica: A abordagem de plugin é ideal se você deseja que o chatbot carregue em todas as páginas automaticamente sem editar nenhum arquivo de template ou snippet. Também mantém a integração do chatbot modular e fácil de ativar ou desativar.

Método Alternativo 3: Usando o Helper js() do Kirby

O Kirby fornece um helper js() integrado para carregar arquivos JavaScript. Você pode usá-lo no seu template ou snippet:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

Ou adicione o script diretamente no arquivo PHP do seu template antes de </body>:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

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

Nota: Se você usar o helper js(), certifique-se de que ele está dentro da seção <body> do seu template para garantir que o chatbot carregue corretamente.

Passo 3: Verifique a Instalação

Após adicionar o código de incorporação ao seu site Kirby, visite seu site em uma nova aba do navegador ou em uma janela anônima. Você deverá ver o botão do widget de chat no canto inferior direito. Clique nele para verificar se abre e funciona corretamente.

Não está vendo o widget? Certifique-se de que substituiu YOUR_WIDGET_ID pelo seu ID de widget real do painel. Verifique se o arquivo de snippet ou plugin está salvo no diretório correto. Se estiver usando o método de plugin, certifique-se de que a estrutura de diretórios do plugin é site/plugins/asyntai/index.php. Limpe o cache do navegador ou teste em modo anônimo. Verifique o console de desenvolvedor do navegador (F12) para quaisquer erros.