---
title: JavaScript personnalisé
description: Ajoutez du JavaScript personnalisé à votre site de docs pour les widgets de chat, l'analytique et autres scripts côté client.
---
Jamdesk vous permet d'ajouter du JavaScript personnalisé qui s'exécute sur chaque page de votre site de documentation. Utilisez-le pour des widgets de chat, de l'analytique ou tout autre script côté client dont vous avez besoin.
## Ajouter du JavaScript personnalisé
Créez un fichier JavaScript dans votre répertoire de documentation et référencez-le dans `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!');
```
Votre script est intégré directement dans le HTML de la page, il s'exécute donc au chargement de la page.
## Détection automatique
Si vous ne configurez pas `styling.js`, Jamdesk détecte automatiquement les fichiers `.js` dans le répertoire racine de votre projet. Déposez simplement un fichier `script.js` à côté de votre `docs.json` et il sera inclus.
```bash
my-docs/
├── docs.json
├── script.js ← auto-detected
├── introduction.mdx
└── getting-started.mdx
```
Lorsque `styling.js` est configuré dans `docs.json`, la détection automatique est désactivée et seuls les fichiers spécifiés sont utilisés.
La détection automatique inclut **tous** les fichiers `.js` dans la racine de votre projet. Si vous avez des scripts utilitaires comme `eslint.config.js` ou `postcss.config.js` à côté de vos docs, utilisez `styling.js` dans `docs.json` pour spécifier exactement quels fichiers inclure.
## Fichiers multiples
Incluez plusieurs scripts en passant un tableau :
```json docs.json
{
"styling": {
"js": ["/chat.js", "/analytics.js"]
}
}
```
Avec la détection automatique, tous les fichiers `.js` à la racine sont inclus, triés par ordre alphabétique. Si vous avez `analytics.js` et `chat.js`, ils se chargent dans cet ordre.
## Exemples
### 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);
})();
```
### Analytique personnalisée
```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);
});
```
## Fonctionnement
Vos fichiers JavaScript sont lus pendant le processus de build et intégrés directement dans le HTML de chaque page. La balise script est placée à la fin de ``, de sorte que le DOM est disponible lorsque votre code s'exécute.
En développement local (`jamdesk dev`), les scripts sont automatiquement pris en compte et rechargés à chaque rafraîchissement du navigateur.
## Limitations
- Les scripts s'exécutent sur **chaque page** — il n'est pas possible de cibler des pages spécifiques
- Les modifications nécessitent un **rebuild** (ou un rafraîchissement du navigateur en dev local) pour prendre effet
- Les scripts sont **intégrés** dans le HTML, non servis comme des fichiers séparés
- Pour l'analytique, envisagez d'utiliser les [intégrations](/fr/integrations/google-analytics) intégrées à la place, qui gèrent automatiquement le consentement et les performances
## Prochaines étapes
Remplacez les styles du thème avec du CSS personnalisé
Analytique intégrée et intégrations tierces