Jamdesk Documentation logo

JavaScript personnalisé

Ajoutez du JavaScript personnalisé à votre site de documentation pour les widgets de chat, l'analytique, les intégrations tierces et d'autres fonctionnalités 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 :

docs.json
{
  "styling": {
    "js": "/script.js"
  }
}
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.

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 :

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)

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

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

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 <body>, 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 intégrées à la place, qui gèrent automatiquement le consentement et les performances

Prochaines étapes

CSS personnalisé

Remplacez les styles du thème avec du CSS personnalisé

Intégrations

Analytique intégrée et intégrations tierces