Benutzerdefiniertes JavaScript

Benutzerdefiniertes JavaScript läuft auf jeder Seite deiner Dokumentationsseite. Verwende es für Chat-Widgets, Analytics oder andere clientseitige Skripte, die du benötigst.

Benutzerdefiniertes JavaScript hinzufügen

Erstelle eine JavaScript-Datei in deinem Dokumentationsverzeichnis und referenziere sie in docs.json:

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

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

Jamdesk bettet dein Skript in das HTML der Seite ein. Es wird beim Laden der Seite ausgeführt.

Automatische Erkennung

Ohne styling.js erkennt Jamdesk .js-Dateien im Stammverzeichnis deines Projekts. Lege eine script.js-Datei neben deiner docs.json ab, um sie einzubinden.

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

Wenn du styling.js in docs.json konfigurierst, wird die automatische Erkennung deaktiviert. Dann werden nur die aufgelisteten Dateien verwendet.

Mehrere Dateien

Binde mehrere Skripte ein, indem du ein Array übergibst:

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

Die automatische Erkennung umfasst jede .js-Datei im Stammverzeichnis, alphabetisch sortiert. analytics.js wird vor chat.js geladen.

Beispiele

CSS- & JS-Beispiele kombiniert ein Skript mit CSS. Es fügt eine schwebende „Ask AI"-Schaltfläche und einen markenfarbigen Header hinzu.

Chat-Widget (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);
})();

Benutzerdefiniertes Analytics

// 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
  }
});

Feedback-Widget

// 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);
});

Funktionsweise

Der Build liest deine JavaScript-Dateien und bettet sie in das HTML jeder Seite ein. Das Script-Tag steht am Ende von <body>. Das DOM ist verfügbar, wenn dein Code ausgeführt wird.

Benutzerdefiniertes JavaScript läuft auch in jamdesk dev (CLI 1.1.222 und neuer). Teste dort ein Skript, bevor du es veröffentlichst. Fehler, die dein Skript auslöst, erscheinen in der Browser-Konsole. window.__JAMDESK_DEV__ ist in jamdesk dev auf true gesetzt. Verwende es, um produktionsspezifischen Code wie Analytics zu überspringen:

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

Wenn du die Cookie-Einwilligung mit integrations.cookies konfigurierst, läuft dein Skript nur auf der veröffentlichten Seite, nachdem der Besucher zugestimmt hat.

Das Skript läuft einmal, wenn ein Besucher deine Seite zum ersten Mal lädt. Ein Klick auf einen Link innerhalb der Dokumentation tauscht den Seiteninhalt aus, ohne die Seite komplett neu zu laden. Das Skript wird dann nicht erneut ausgeführt. Code, der Seiteninhalte liest oder verändert, sollte auf Seitenwechsel reagieren.

Einschränkungen

• Skripte laufen auf jeder Seite. Es gibt keine Möglichkeit, bestimmte Seiten gezielt anzusprechen
• Änderungen werden beim nächsten Build wirksam
• Skripte werden inline in das HTML eingebettet und nicht als separate Dateien ausgeliefert
• Verwende für Analytics bevorzugt die eingebauten Integrationen. Sie übernehmen Einwilligung und Performance für dich

Wie geht es weiter?