---
title: JavaScript personalizado
description: Adicione JavaScript personalizado ao site de documentação para widgets de chat, análise, integrações de terceiros e outras funções executadas no cliente.
---

> **For AI agents:** the complete documentation index is at [llms.txt](https://jamdesk.com/docs/llms.txt). Append `.md` to any page URL for its markdown version.

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

## Adicionar JavaScript personalizado

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

```json docs.json
{
  "styling": {
    "js": "/script.js"
  }
}
```

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

Seu script é inserido diretamente no 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 os 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.

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

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

<Note>A detecção automática inclui **todos** os arquivos `.js` na raiz do projeto. Se houver scripts utilitários, como `eslint.config.js` ou `postcss.config.js`, junto aos arquivos de documentação, use `styling.js` em `docs.json` para especificar exatamente quais arquivos incluir.</Note>

## Vários arquivos

Inclua vários scripts passando um array:

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

Com a detecção automática, todos os arquivos `.js` na 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](https://jamdesk.com/docs/pt/customization/custom-code-examples). Ele adiciona um botão flutuante Ask AI e um cabeçalho com as cores da marca.

### Widget de chat (Crisp)

```javascript script.js
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

```javascript script.js
// 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

```javascript script.js
// 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 cada página. 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 também é executado em `jamdesk dev` (CLI 1.1.222 e posterior), permitindo testar um script antes de enviá-lo. Os erros gerados pelo script aparecem no console do navegador. Em `jamdesk dev`, `window.__JAMDESK_DEV__` é `true`, então você pode ignorar código exclusivo de produção, como o de análise:

```javascript
if (!window.__JAMDESK_DEV__) {
  // analytics, chat widgets and other production-only code
}
```

Se você configurar o consentimento de cookies com `integrations.cookies`, seu script será executado somente no site publicado, depois que o visitante der consentimento.

O script é executado uma vez, quando o visitante acessa o site pela primeira vez. Clicar em um link dentro da documentação troca o conteúdo da página sem recarregá-la completamente, então o script não é executado novamente. Se o seu código depender do conteúdo da página, [monitore as alterações de página](https://jamdesk.com/docs/pt/customization/custom-code-examples#execute-o-código-após-cada-mudança-de-página).

## Limitações

- Os scripts são executados em **todas as páginas**. Não é possível direcioná-los a páginas específicas
- As alterações entram em vigor no próximo **build**
- Os scripts são **incorporados** ao HTML, e não servidos como arquivos separados
- Para análise, considere usar as [integrações](https://jamdesk.com/docs/pt/integrations/google-analytics) integradas, que gerenciam o consentimento e o desempenho automaticamente

## O que vem a seguir?

<Columns cols={2}>
  <Card title="CSS personalizado" icon="paintbrush" href="/pt/customization/custom-css">
    Substitua os estilos do tema com CSS personalizado
  </Card>
  <Card title="Exemplos de CSS e JS" icon="wand-magic-sparkles" href="/pt/customization/custom-code-examples">
    Um botão flutuante Ask AI e um cabeçalho com a identidade da marca
  </Card>
  <Card title="Integrações" icon="plug" href="/pt/integrations/google-analytics">
    Análise integrada e integrações de terceiros
  </Card>
</Columns>