Como Adicionar o Chatbot IA Asyntai ao OpenCart

Guia passo a passo para sites OpenCart

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: Editar o Template do Rodapé (Recomendado)

A maneira mais direta de adicionar o chatbot é editando o template de rodapé do seu tema:

Acesse seus arquivos do OpenCart via FTP ou gerenciador de arquivos
Navegue até o template de rodapé do seu tema:
- OpenCart 3.x/4.x: catalog/view/theme/YOUR_THEME/template/common/footer.twig
- OpenCart 2.x: catalog/view/theme/YOUR_THEME/template/common/footer.tpl
Abra o arquivo de rodapé para edição
Encontre a tag de fechamento </body>
Cole seu código de incorporação Asyntai logo antes da tag </body>
Salve o arquivo
Limpe o cache do OpenCart: Dashboard → Ícone de engrenagem azul (canto superior direito) → Refresh ou exclua o conteúdo de system/storage/cache/

Dica: Se você está usando o tema padrão, o caminho seria catalog/view/theme/default/template/common/footer.twig. Sempre crie um backup antes de editar arquivos de template.

Alternativa: Usando a Opção de Código Personalizado do Tema

Many modern OpenCart themes include a built-in option for custom code:

Faça login no seu Painel Admin do OpenCart
Vá para Extensions → Themes (ou Extensions → Extensions → Themes)
Clique em Edit no seu tema ativo
Procure por uma seção "Custom Code", "Footer Scripts" ou "Custom JavaScript"
Cole seu código de incorporação Asyntai
Clique em "Save"
Limpe o cache

Nota: Nem todos os temas possuem esta opção. Se o seu tema não inclui campos de código personalizado, use o método de edição de template ou instale uma extensão.

Alternativa: Usando uma Extensão de Código Personalizado

Você pode instalar uma extensão gratuita do OpenCart Marketplace para adicionar scripts personalizados:

Acesse o OpenCart Marketplace
Pesquise por "Custom Script", "Header Footer Scripts" ou "Custom Code"
Baixe e instale uma extensão adequada
No seu painel admin, vá para Extensions → Extensions → Modules
Encontre e instale o módulo de código personalizado
Configure o módulo e cole seu código de incorporação Asyntai na seção de rodapé
Salve e limpe o cache

Importante: Usar extensões é recomendado em vez de editar arquivos do núcleo, pois elas sobrevivem às atualizações do OpenCart. Extensões populares incluem "Custom Script in Header & Footer" disponível no marketplace.

Alternativa: Usando o Método addScript (Para Desenvolvedores)

Para desenvolvedores, o OpenCart 3.x/4.x oferece uma forma programática de adicionar scripts:

Abra catalog/controller/common/footer.php
Adicione a seguinte linha antes de $data['scripts'] = $this->document->getScripts('footer');:
$this->document->addScript('https://asyntai.com/static/js/chat-widget.js', 'footer');
Para o atributo data, você precisará modificar o footer.twig para incluí-lo manualmente, ou adicionar JavaScript inline após o loop de scripts

Nota: Para que o widget funcione corretamente com o atributo data, o método de template é mais simples, pois o método addScript não suporta atributos personalizados diretamente.

Passo 3: Verifique a Instalação

Após salvar suas alterações e limpar o cache, visite sua loja em uma nova aba do navegador ou 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 limpar o cache do OpenCart. Vá ao seu painel admin, clique no ícone de engrenagem azul no canto superior direito e clique nos botões de atualização. Também tente limpar o cache do navegador ou visualizar em uma janela anônima. Se você modificou o arquivo de template errado, verifique se seu tema está usando o arquivo que você editou.