CSS- und JavaScript-Beispiele

Diese Seite zeigt ein Beispiel auf einer Demo-Site namens Harbor. Der Header erhält das Harbor-Logo, die Harbor-Farben und zwei zusätzliche Links. Außerdem erscheint unten rechts ein schwebender Ask AI-Button. Du kannst die Dateien unverändert kopieren und anschließend dein eigenes Logo und deine eigenen Farben einsetzen.

Die Screenshots zeigen die Benutzeroberfläche auf Englisch.

Was an diesem Header anders ist

Standardmäßig fügt sich der Jam-Header in die Seite ein. Im hellen Modus ist er transparent und zeigt den dezenten Farbverlauf dahinter. Im dunklen Modus hat er denselben fast schwarzen Farbton wie alles andere. Die Ecken der Buttons sind leicht abgerundet. Die Harbor-Version ändert vier Dinge:

• Der Header ist in beiden Modi dunkelblau und hebt sich so von der Seite ab.
• Am unteren Rand verläuft eine dünne orangefarbene Linie.
• Das Suchfeld, Ask AI und Book a demo sind vollständig abgerundete Pillen.
• Das weiße Harbor-Logo ersetzt das Standardlogo.

Die Änderungen umfassen CSS und eine Logodatei. Der Header von Jamdesk selbst bleibt unverändert. Suche, Ask AI, der Theme-Wechsel und das mobile Menü funktionieren also wie gewohnt.

Das Beispiel verwendet diese Dateien in deinem Projekt:

harbor-docs/
├── docs.json              ← logo, header links and brand colors
├── style.css              ← header and button styles
├── script.js              ← creates the Ask AI button
└── images/
    └── harbor-logo.svg    ← white logo for the navy header

Mit docs.json beginnen

Der erste Teil kommt ohne Code aus. Logo, Farben, Header-Links und der Book a demo-Button werden in docs.json festgelegt:

{
  "logo": {
    "light": "/images/harbor-logo.svg",
    "dark": "/images/harbor-logo.svg"
  },
  "colors": {
    "primary": "#C2410C",
    "light": "#D9480F",
    "dark": "#9A3412"
  },
  "navbar": {
    "links": [
      { "label": "Blog", "href": "https://example.com/blog" },
      { "label": "Status", "href": "https://example.com/status" }
    ],
    "primary": {
      "type": "button",
      "label": "Book a demo",
      "href": "https://example.com/demo"
    }
  }
}

Das Logo ist weiß. Da der Header in beiden Modi dunkelblau ist, genügt dieselbe Datei für beide.

Jamdesk verwendet deine Farbe primary für den Book a demo-Button, den aktiven Seitenleisteneintrag und Links. Dadurch ist das Orange auf der gesamten Site zu sehen. Im dunklen Modus wird stattdessen die Farbe light verwendet. Achte darauf, dass sie dunkel genug ist, damit weißer Text auf dem Button gut lesbar bleibt. Unter Navigationslinks findest du alle Optionen für die Navigationsleiste.

Den Header gestalten

Text, Rahmen, Suchfeld und abgerundete Ecken des Headers werden über CSS-Variablen festgelegt. Wenn du diese Variablen im Header setzt, ändert sich nur der Header:

/* header[data-has-tabs] matches the site header only.
   A plain `header` selector would also match the title
   block at the top of every page. */
header[data-has-tabs] {
  --header-top: #0f1d3a;
  --header-bottom: #1b2f5b;
  --header-stripe: #f97316;
  --color-text-primary: #ffffff;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-bg-primary: #0f1d3a;
  --color-bg-secondary: rgba(255, 255, 255, 0.08);
  --color-bg-hover: rgba(255, 255, 255, 0.16);
  --color-border: rgba(255, 255, 255, 0.16);
  /* Rounds the search box, Ask AI and buttons into pills */
  --radius-md: 999px;
  --radius-lg: 999px;
}

html.dark header[data-has-tabs] {
  --header-top: #0a1328;
  --header-bottom: #13234a;
  --color-bg-primary: #0a1328;
}

/* Some themes keep the header background transparent on
   purpose, so paint the color on a layer behind it. */
header[data-has-tabs]::before {
  content: "";
  position: absolute;
  inset: 0 -24px; /* reach past the 16-24px page gutter */
  z-index: -1;
  background: linear-gradient(
    90deg, var(--header-top), var(--header-bottom)
  );
  border-bottom: 3px solid var(--header-stripe);
}

/* The sparkle icon uses the accent color, which is hard to
   see on navy, so give it the stripe color instead */
header[data-has-tabs] .fa-sparkles {
  color: #fdba74;
}

Das Dunkelblau liegt auf einer ::before-Ebene, weil das Jam-Theme für den Header mit !important den Wert none für background festlegt. Eine normale background-Regel für den Header würde sich nicht durchsetzen. Die Ebene liegt hinter dem Inhalt des Headers und funktioniert in jedem Theme.

Wenn du --radius-md und --radius-lg auf 999px setzt, werden die Buttons im Header zu Pillen. Die Änderung gilt nur innerhalb von header[data-has-tabs]. Karten und Codeblöcke auf der Seite behalten ihre gewohnten Ecken.

Das Ask AI-Symbol im Header verwendet deine Akzentfarbe, die auf Dunkelblau schwer zu erkennen ist. Die letzte Regel färbt es hellorange.

Jamdesk fügt im dunklen Modus die Klasse dark zu <html> hinzu. Der Block html.dark macht das Dunkelblau dort daher etwas dunkler:

Eine schwebende Ask-AI-Schaltfläche hinzufügen

Dein Skript fügt der Seite einen normalen <button> hinzu. Beim Anklicken sendet er Ctrl+I, die Tastenkombination zum Öffnen und Schließen des Chatfensters. Er bewirkt also dasselbe wie der Ask AI-Button im Header.

(function () {
  if (document.getElementById('ask-ai-fab')) return;

  var button = document.createElement('button');
  button.id = 'ask-ai-fab';
  button.type = 'button';

  // Jamdesk loads Font Awesome, so its icons are available here
  var icon = document.createElement('i');
  icon.className = 'fa-solid fa-sparkles';
  icon.setAttribute('aria-hidden', 'true');
  button.append(icon, ' Ask AI');

  button.addEventListener('click', function () {
    // Same as pressing Ctrl+I / Cmd+I: toggles the chat panel
    var shortcut = { key: 'i', ctrlKey: true, bubbles: true };
    document.dispatchEvent(new KeyboardEvent('keydown', shortcut));
  });

  document.body.appendChild(button);
})();

Füge anschließend die Button-Stile zu style.css hinzu:

#ask-ai-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40; /* below the header, search and mobile menu */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: #c2410c;
  color: #fff;
  font: inherit;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(15, 29, 58, 0.25);
  cursor: pointer;
}

#ask-ai-fab:hover {
  background: #9a3412;
}

#ask-ai-fab:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}

/* Hide the button while the chat panel is open. On mobile
   the closed panel stays in the page with data-open="false",
   so exclude that case. */
body:has([data-chat-panel]:not([data-open="false"])) #ask-ai-fab {
  display: none;
}

@media (max-width: 767px) {
  #ask-ai-fab {
    right: 16px;
    bottom: 16px;
  }
}

Auf einem Smartphone ist der Button 16px von den Rändern entfernt. Wenn sich der Chat öffnet, bedeckt er den größten Teil des Bildschirms. Der Button bleibt verborgen, bis der Chat wieder geschlossen wird:

Der Button funktioniert nur, wenn der AI-Chat aktiviert ist. Ist chat.enabled in docs.json auf false gesetzt, bewirkt ein Klick nichts. Lass den Button in diesem Fall weg.

Wenn du außerdem ein Support-Widget wie Crisp oder Intercom verwendest, befindet es sich wahrscheinlich ebenfalls unten rechts. Damit die beiden sich nicht überlagern, verwende für #ask-ai-fab left: 24px statt right oder erhöhe bottom, damit der Button über dem Widget sitzt.

Code nach jedem Seitenwechsel ausführen

Dein Skript wird einmal ausgeführt, wenn ein Besucher die Site zum ersten Mal öffnet. Danach lädt ein Klick auf einen Dokumentationslink den Seiteninhalt ohne Neuladen aus. Das Skript wird also nicht erneut ausgeführt. Der Ask AI-Button ist davon nicht betroffen, da er an <body> angehängt ist, das bestehen bleibt.

Wenn dein Code den Seiteninhalt liest oder ändert, muss er erkennen, wann die Seite wechselt. Dieses Snippet überwacht die Hauptspalte und prüft, ob sich die URL geändert hat. Füge es unter dem Button-Code in dieselbe script.js-Datei ein:

(function () {
  var lastPath = location.pathname;
  var main = document.getElementById('main-content') || document.body;

  function onPageChange() {
    // Your per-page code goes here
    console.log('Now on', location.pathname);
  }

  new MutationObserver(function () {
    if (location.pathname === lastPath) return;
    lastPath = location.pathname;
    onPageChange();
  }).observe(main, { childList: true, subtree: true });
})();

onPageChange wird einmal pro neuer Seite ausgeführt, egal ob der Besucher auf einen Link in der Seitenleiste klickt, die Suche verwendet oder die Zurück-Schaltfläche betätigt.

Zu verwendende Selektoren

Die Klassennamen von Jamdesk stammen aus Tailwind und können sich bei jeder Veröffentlichung ändern. Auch Button-Beschriftungen können sich ändern, da sie auf mehrsprachigen Sites übersetzt werden. Verwende stattdessen diese Selektoren:

Änderungen testen

jamdesk dev zeigt dein CSS an, führt aber kein eigenes JavaScript aus. Der AI-Chat funktioniert nur auf deiner veröffentlichten Site. Um das Skript lokal auszuprobieren, füge es in der Browserkonsole auf der Vorschauseite ein. Der Button wird angezeigt, öffnet den Chat aber erst nach der Veröffentlichung.

Prüfe das Ergebnis auf einem Bildschirm in Smartphone-Größe (375px Breite) und im dunklen Modus, nicht nur auf dem Desktop. Dort treten Probleme mit Header-Farben und fixierten Buttons am häufigsten auf.

Wie geht es weiter?