Como Adicionar o Chatbot de IA Asyntai ao Adobe Experience Manager

Guia passo a passo para sites AEM

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: Adicione o Código Usando o Componente de Página (Recomendado)

O método recomendado é adicionar o código do chatbot à seção head do componente de página do AEM para instalação em todo o site:

Faça login na sua instância AEM Author
Navegue até o CRXDE Lite (normalmente em http://your-aem-instance:4502/crx/de)
Localize o template do componente de página (geralmente em /apps/your-project/components/page)
Encontre ou crie o arquivo head.html ou headerlibs.html
Adicione seu código de incorporação Asyntai a este arquivo
Clique em "Save All" no menu superior
Replique as alterações para sua instância de publicação

Dica: Colocar o código no arquivo head.html garante que o chatbot apareça em todas as páginas que usam esse template. Esta é a abordagem mais limpa para instalação em todo o site.

Método Alternativo 1: Bibliotecas de Cliente (ClientLibs)

Para uma abordagem mais estruturada, você pode usar o sistema de Bibliotecas de Cliente do AEM:

Crie uma nova pasta de biblioteca de cliente em /apps/your-project/clientlibs
Defina o tipo de nó cq:clientLibraryFolder
Crie um arquivo js.txt listando seus arquivos JavaScript
Adicione seu código de incorporação Asyntai a um arquivo JavaScript nesta pasta
Inclua a biblioteca de cliente no seu componente de página usando:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

Nota: Este método é recomendado para projetos com estrutura ClientLib existente e oferece melhor organização para implementações maiores.

Método Alternativo 2: Gerenciamento de Tags (Adobe Launch)

Se você estiver usando o Adobe Launch (antigo DTM) ou outro gerenciador de tags:

Faça login no Adobe Experience Platform Launch
Navegue até sua propriedade
Acesse Rules e crie uma nova regra
Defina o evento para "Page Bottom" ou "DOM Ready"
Adicione uma ação: Custom Code
Cole seu código de incorporação Asyntai
Salve e publique a biblioteca

Dica: Usar o Adobe Launch é a abordagem recomendada pela Adobe para adicionar scripts de terceiros. Oferece melhor controle, capacidades de teste e não requer implantação de código.

Método Alternativo 3: Experience Fragment

Para implementação flexível e amigável ao autor:

Navegue até Experience Fragments no AEM
Crie um novo Experience Fragment
Adicione um componente de Texto ou componente HTML
Mude para o modo de código HTML
Cole seu código de incorporação Asyntai
Inclua este Experience Fragment no rodapé do seu template de página

Importante: Certifique-se de ter as permissões adequadas no AEM para modificar templates e componentes. Para AEM as a Cloud Service, as alterações podem precisar passar pelo seu pipeline CI/CD.

Passo 3: Verifique a Instalação

Após implantar suas alterações, limpe o cache do navegador e visite seu site. 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? Verifique o console do navegador (F12) para erros de JavaScript. Confirme que o código foi implantado corretamente na sua instância de publicação. Para AEM as a Cloud Service, certifique-se de que suas alterações passaram pelo pipeline de implantação com sucesso.