Como Adicionar o Chatbot IA Asyntai ao Docusaurus

Guia passo a passo para sites de documentação Docusaurus

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 Script ao docusaurus.config.js (Recomendado)

A melhor forma de adicionar o chatbot a todas as páginas do seu site Docusaurus é pelo arquivo de configuração:

Abra seu projeto Docusaurus no seu editor de código
Localize e abra o arquivo docusaurus.config.js na raiz do seu projeto
Encontre o objeto const config = { }
Adicione ou atualize o campo scripts com o seu widget Asyntai:

const config = {
  // ... other config options

  scripts: [
    // Other scripts if any
    {
      src: 'https://asyntai.com/static/js/chat-widget.js',
      'data-asyntai-id': 'YOUR_WIDGET_ID',
      async: true,
    },
  ],

  // ... rest of config
};

Salve o arquivo docusaurus.config.js
Reconstrua seu site executando npm run build ou yarn build
Reinicie o servidor de desenvolvimento se estiver rodando localmente

Dica: O campo scripts aceita um array de fontes JavaScript. A tag script será inserida no head HTML de cada página automaticamente. Este é o método mais limpo e fácil de manter para sites Docusaurus.

Método Alternativo 1: Formato de String (Sintaxe Mais Simples)

Se você preferir uma abordagem mais simples, pode usar o formato de string no array de scripts:

const config = {
  scripts: [
    'https://asyntai.com/static/js/chat-widget.js',
  ],
};

Nota: Ao usar o formato de string, você precisará modificar a URL do script para incluir o ID do widget como parâmetro de consulta, ou usar o formato de objeto mostrado na Etapa 2, que permite definir o atributo data-asyntai-id diretamente.

Método Alternativo 2: Tags Head Personalizadas

Você também pode adicionar o script usando o campo headTags no docusaurus.config.js:

const config = {
  headTags: [
    {
      tagName: 'script',
      attributes: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        'data-asyntai-id': 'YOUR_WIDGET_ID',
        async: true,
      },
    },
  ],
};

Dica: O campo headTags oferece mais controle sobre as tags HTML exatas inseridas na seção <head>. Este método é funcionalmente equivalente ao uso do campo scripts.

Metodo Alternativo 3: Template HTML Personalizado (Avancado)

Para usuários avançados que precisam de controle total sobre o template HTML:

Crie um novo diretorio: src/theme (se nao existir)
Crie um arquivo: src/theme/Root.js
Adicione o seguinte codigo para injetar o script dinamicamente:

import React, { useEffect } from 'react';

export default function Root({children}) {
  useEffect(() => {
    const 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);

    return () => {
      // Cleanup when component unmounts
      document.head.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

Salve o arquivo e reconstrua seu site

Importante: O componente Root.js envolve toda a sua aplicacao. Este metodo avancado so deve ser usado se voce precisar de logica JavaScript personalizada ou tiver requisitos especificos que nao podem ser atendidos com a abordagem do arquivo de configuracao.

Metodo Alternativo 4: Swizzle do Componente Footer

Voce pode personalizar o footer para incluir o script:

Execute o comando swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Isso cria uma copia do componente Footer em src/theme/Footer/
Edite o componente Footer para incluir sua tag script
Adicione o script antes da tag de fechamento do footer
Salve e reconstrua seu site

Nota: O swizzling oferece controle total sobre os componentes do Docusaurus, mas significa que voce precisara manter esse componente por conta propria. Atualizacoes do Docusaurus nao atualizarao automaticamente os componentes que passaram por swizzle.

Passo 3: Compilar e Implantar

Após adicionar o código, compile e implante seu site Docusaurus:

# Build the site
npm run build

# Or with Yarn
yarn build

# Deploy to your hosting platform
# (Vercel, Netlify, GitHub Pages, etc.)

Dica: Durante o desenvolvimento, execute npm start ou yarn start para visualizar suas alteracoes localmente. O chatbot deve aparecer no canto inferior direito em todas as paginas.

Passo 4: Verificar a Instalação

Apos implantar suas alteracoes, abra seu site de documentacao em uma nova aba do navegador. Voce deve ver o botao 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 ter reconstruido seu site apos fazer alteracoes. Verifique se voce substituiu YOUR_WIDGET_ID pelo ID real do seu widget no painel. Limpe o cache do navegador ou visualize no modo anonimo. Abra o console do navegador (F12) para verificar erros de JavaScript.

Documentação