JavaScript personalizado

O Jamdesk permite adicionar JavaScript personalizado que é executado em todas as páginas do site da documentação. Use-o para widgets de chat, análise ou qualquer outro script no cliente de que você precise.

Adicionar JavaScript personalizado

Crie um arquivo JavaScript no diretório da documentação e referencie-o em docs.json:

{
  "styling": {
    "js": "/script.js"
  }
}

// Your custom JavaScript runs on every page
console.log('Hello from custom JS!');

Seu script é incorporado diretamente ao HTML da página e, por isso, é executado enquanto ela carrega.

Detecção automática

Se você não configurar styling.js, o Jamdesk detectará automaticamente arquivos .js no diretório raiz do projeto. Basta colocar um arquivo script.js ao lado de docs.json para que ele seja incluído.

my-docs/
├── docs.json
├── script.js      ← auto-detected
├── introduction.mdx
└── getting-started.mdx

Quando styling.js está configurado em docs.json, a detecção automática é desativada e somente os arquivos especificados são usados.

Vários arquivos

Inclua vários scripts passando um array:

{
  "styling": {
    "js": ["/chat.js", "/analytics.js"]
  }
}

Com a detecção automática, todos os arquivos .js no diretório raiz são incluídos em ordem alfabética. Se você tiver analytics.js e chat.js, eles serão carregados nessa ordem.

Exemplos

Para ver um passo a passo mais detalhado que combina um script com CSS, consulte Exemplos de CSS e JS. Ele adiciona um botão flutuante Ask AI e um cabeçalho com as cores da marca.

Widget de chat (Crisp)

window.$crisp = [];
window.CRISP_WEBSITE_ID = "your-website-id";
(function () {
  var d = document;
  var s = d.createElement("script");
  s.src = "https://client.crisp.chat/l.js";
  s.async = 1;
  d.getElementsByTagName("head")[0].appendChild(s);
})();

Análises personalizadas

// Track outbound link clicks
document.addEventListener('click', function (e) {
  var link = e.target.closest('a[href^="http"]');
  if (link && !link.href.includes(window.location.hostname)) {
    console.log('Outbound click:', link.href);
    // Send to your analytics service
  }
});

Widget de feedback

// Load a feedback widget after the page is ready
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://your-feedback-tool.com/widget.js';
  s.setAttribute('data-project', 'your-project-id');
  document.body.appendChild(s);
});

Como funciona

Seus arquivos JavaScript são lidos durante o processo de build e incorporados diretamente ao HTML de todas as páginas. A tag de script é colocada no final de <body>, para que o DOM esteja disponível quando o código for executado.

O JavaScript personalizado é executado somente no site publicado. jamdesk dev não o inclui. Para testar um script localmente, cole-o no console do navegador na página de visualização.

O script é executado uma vez, quando alguém acessa seu site pela primeira vez. Clicar em um link na documentação troca o conteúdo da página sem recarregá-la por completo, então o script não é executado novamente. Se o código interagir com o conteúdo da página, acompanhe as mudanças de página.

Limitações

• Os scripts são executados em todas as páginas — não há como direcioná-los a páginas específicas
• As alterações entram em vigor na próxima compilação; jamdesk dev não executa scripts personalizados
• Os scripts são incorporados ao HTML, não servidos como arquivos separados
• Para análise, considere usar as integrações integradas, que gerenciam o consentimento e o desempenho automaticamente

O que vem a seguir?