---
title: Eigenes JavaScript
description: Füge deiner Dokumentationsseite JavaScript für Chat-Widgets, Analysen, Drittanbieter-Integrationen und andere Funktionen im Browser hinzu.
---

> **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.

Mit Jamdesk kannst du eigenes JavaScript hinzufügen, das auf jeder Seite deiner Dokumentationswebsite ausgeführt wird. Verwende es für Chat-Widgets, Analysen oder andere clientseitige Skripte, die du benötigst.

## Benutzerdefiniertes JavaScript hinzufügen

Erstelle eine JavaScript-Datei in deinem Dokumentationsverzeichnis und verweise in `docs.json` darauf:

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

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

Dein Skript wird direkt in den HTML-Code der Seite eingebettet und beim Laden der Seite ausgeführt.

## Automatische Erkennung

Wenn du `styling.js` nicht konfigurierst, erkennt Jamdesk automatisch `.js`-Dateien im Stammverzeichnis deines Projekts. Lege einfach eine Datei `script.js` neben deiner `docs.json` ab, damit sie eingebunden wird.

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

Wenn `styling.js` in `docs.json` konfiguriert ist, wird die automatische Erkennung deaktiviert und es werden nur die angegebenen Dateien verwendet.

<Note>Bei der automatischen Erkennung werden **alle** `.js`-Dateien im Stammverzeichnis deines Projekts eingebunden. Wenn sich neben deinen Dokumentationsdateien Hilfsskripte wie `eslint.config.js` oder `postcss.config.js` befinden, verwende `styling.js` in `docs.json`, um genau festzulegen, welche Dateien eingebunden werden sollen.</Note>

## Mehrere Dateien

Binde mehrere Skripte ein, indem du ein Array angibst:

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

Bei der automatischen Erkennung werden alle `.js`-Dateien im Stammverzeichnis alphabetisch sortiert eingebunden. Wenn du `analytics.js` und `chat.js` hast, werden sie in dieser Reihenfolge geladen.

## Beispiele

Eine ausführlichere Anleitung, die ein Skript mit CSS kombiniert, findest du unter [CSS- & JS-Beispiele](https://jamdesk.com/docs/de/customization/custom-code-examples). Sie fügt eine schwebende Schaltfläche „Ask AI“ und einen Header in Markenfarben hinzu.

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

### Benutzerdefiniertes Analytics

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

### Feedback-Widget

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

## Funktionsweise

Deine JavaScript-Dateien werden während des Build-Prozesses gelesen und direkt in den HTML-Code jeder Seite eingebettet. Das Skript-Tag wird am Ende von `<body>` eingefügt, sodass das DOM verfügbar ist, wenn dein Code ausgeführt wird.

Eigenes JavaScript wird auch in `jamdesk dev` ausgeführt (CLI 1.1.222 und höher), damit du ein Skript vor dem Push testen kannst. Fehler, die dein Skript auslöst, erscheinen in der Browserkonsole. In `jamdesk dev` ist `window.__JAMDESK_DEV__` auf `true` gesetzt. So kannst du produktionsspezifischen Code wie Analysen überspringen:

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

Wenn du die Cookie-Einwilligung mit `integrations.cookies` konfigurierst, wird dein Skript nur auf der veröffentlichten Website ausgeführt, nachdem der Besucher seine Einwilligung erteilt hat.

Das Skript wird einmal ausgeführt, wenn ein Besucher deine Website zum ersten Mal lädt. Wenn jemand auf einen Link in der Dokumentation klickt, wird der Seiteninhalt ohne vollständiges Neuladen ausgetauscht. Das Skript wird daher nicht erneut ausgeführt. Wenn dein Code mit dem Seiteninhalt arbeitet, [reagiere auf Seitenänderungen](https://jamdesk.com/docs/de/customization/custom-code-examples#code-nach-jedem-seitenwechsel-ausführen).

## Einschränkungen

- Skripte werden auf **jeder Seite** ausgeführt. Es ist nicht möglich, sie auf bestimmte Seiten zu beschränken.
- Änderungen werden mit deinem nächsten **Build** wirksam.
- Skripte werden in den HTML-Code **eingebettet** und nicht als separate Dateien bereitgestellt.
- Für Analysen empfiehlt sich stattdessen die Verwendung der integrierten [Integrationen](https://jamdesk.com/docs/de/integrations/google-analytics), die Einwilligung und Leistung automatisch berücksichtigen.

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Eigenes CSS" icon="paintbrush" href="/de/customization/custom-css">
    Überschreibe Theme-Stile mit eigenem CSS
  </Card>
  <Card title="CSS- & JS-Beispiele" icon="wand-magic-sparkles" href="/de/customization/custom-code-examples">
    Eine schwebende Schaltfläche „Ask AI“ und ein Header im Markenstil
  </Card>
  <Card title="Integrationen" icon="plug" href="/de/integrations/google-analytics">
    Integrierte Analysen und Integrationen von Drittanbietern
  </Card>
</Columns>