Ferndesk
Self-Service-Widget

So betten Sie das Self-Service Widget ein

Das Self-Service Widget wird mithilfe eines einfachen Script-Snippets in Ihre Website eingebettet.

Sobald es zu Ihrem HTML hinzugefügt wurde, erscheint es als schwebende Schaltfläche auf allen Seiten, auf denen das Script geladen wird, und ermöglicht Besuchern den sofortigen Zugriff auf Ihr Help Center.

Das Einbetten des Widgets dauert nur zwei Minuten. Kopieren Sie den Einbettungscode aus dem Ferndesk-Dashboard und fügen Sie ihn in das HTML Ihrer Website ein.

Voraussetzungen

  • Admin-Zugriff auf das Ferndesk-Dashboard.

  • Admin- oder Entwicklerzugriff auf das HTML oder den Code Ihrer Website.

  • Mindestens ein veröffentlichter Artikel in Ihrem Help Center (empfohlen).

Bevor Sie beginnen

Sie können das Widget an folgenden Stellen einbetten:

  • Alle Seiten: Fügen Sie das Script in eine geteilte Vorlage oder Header-Datei ein (empfohlen für globalen Zugriff).

  • Spezifische Seiten: Fügen Sie das Script nur auf bestimmten Seiten hinzu, auf denen Hilfe sichtbar sein soll.

  • Single-Page-Apps (SPAs): Fügen Sie das Script einmal in Ihr Hauptlayout ein; es bleibt über die Seitennavigation hinweg bestehen.

Generieren Sie Ihren Einbettungscode

  1. Loggen Sie sich im Ferndesk-Dashboard ein.

  2. Klicken Sie in der linken Seitenleiste unter Help Center auf Widget.

  3. Klicken Sie auf die Schaltfläche „Install“ Ihres Widgets.

  4. Klicken Sie auf die Schaltfläche Copy Embed Code, um das gesamte Snippet in Ihre Zwischenablage zu kopieren.

Ihr Einbettungscode wird wie folgt aussehen:

<!-- Step #1. Install the Ferndesk SDK -->
<script>
    !(function (e, t) {
        var n = 'ferndesk-sdk',
            r = e.FERNDESK_SDK_SRC || 'https://static.ferndesk.com/dist/sdk.js',
            c = 'Ferndesk',
            s = t.currentScript;
        function a() {
            if (!t.getElementById(n)) {
                var e = t.createElement('script');
                ((e.id = n),
                    (e.src = r),
                    (e.async = !0),
                    s && s.nonce && ((e.nonce = s.nonce), e.setAttribute('nonce', s.nonce)));
                var c = t.getElementsByTagName('script')[0];
                c.parentNode.insertBefore(e, c);
            }
        }
        if ('function' != typeof e[c]) {
            var i = [],
                o = function () {
                    i.push(arguments);
                };
            ((o.q = i), (e[c] = o));
        }
        'complete' === t.readyState || 'interactive' === t.readyState
            ? a()
            : t.addEventListener('DOMContentLoaded', a);
    })(window, document);
</script>

<!-- Step #2. Initialize the widget -->
<script>
Ferndesk('init', { widgetId: 'YOUR_WIDGET_ID' })
</script>

Betten Sie das Widget auf Ihrer Seite ein

Für eine Standard-HTML-Website

  1. Öffnen Sie die Haupt-HTML-Datei Ihrer Website (oft index.html genannt, eine Template-Datei oder ein Header/Footer-Include).

  2. Suchen Sie das schließende </body>-Tag am Ende der Datei.

  3. Fügen Sie den gesamten Einbettungscode direkt vor dem </body>-Tag ein:

Für eine React-Anwendung

  1. Öffnen Sie Ihr Hauptlayout oder Ihre App-Komponente (z. B. App.js oder _app.js in Next.js).

  2. Fügen Sie das Einbettungsscript in einem useEffect-Hook hinzu, nachdem Ihre Komponente gemountet wurde:

import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    // Load the Ferndesk SDK
    const script = document.createElement('script');
    script.src = 'https://static.ferndesk.com/dist/sdk.js';
    script.async = true;
    document.body.appendChild(script);

    // Initialize the widget once the SDK loads
    script.onload = () => {
      window.Ferndesk('init', { widgetId: 'YOUR_WIDGET_ID' });
    };
  }, []);

  return (
    <>
      {/* Your app content */}
    </>
  );
}

Für eine Vue-Anwendung

  1. Öffnen Sie Ihre Haupt-App-Datei (z. B. main.js oder App.vue).

  2. Laden und initialisieren Sie das Widget in einem Lifecycle-Hook oder als globales Script:

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      const script = document.createElement('script');
      script.src = 'https://static.ferndesk.com/dist/sdk.js';
      script.async = true;
      document.body.appendChild(script);

      script.onload = () => {
        window.Ferndesk('init', { widgetId: 'YOUR_WIDGET_ID' });
      };
    });
  }
};

Für einen Static Site Generator (Next.js, Gatsby usw.)

  1. Fügen Sie den Einbettungscode zu Ihrem Layout oder Ihrer Dokumentenvorlage hinzu.

  2. Verwenden Sie für Next.js die <Script>-Komponente in Ihrer _document.js oder Ihrem Layout:

import Script from 'next/script';

export default function Document() {
  return (
    <>
      <Script
        src="https://static.ferndesk.com/dist/sdk.js"
        strategy="afterInteractive"
        onLoad={() => {
          window.Ferndesk('init', { widgetId: 'YOUR_WIDGET_ID' });
        }}
      />
    </>
  );
}

Ihr Widget sollte nun auf Ihrer Website erscheinen 🎉

Fehlerbehebung bei Einbettungsproblemen

Die Widget-Schaltfläche erscheint nicht

  • Script-Platzierung prüfen: Stellen Sie sicher, dass das Script im HTML-Body oder -Head platziert ist und nicht in bedingten Blöcken verschachtelt ist, die die Ausführung verhindern könnten.

  • Browser-Konsole prüfen: Öffnen Sie die Entwicklertools Ihres Browsers (F12 oder Cmd+Option+I) und suchen Sie im Tab „Konsole“ nach Fehlermeldungen.

  • Netzwerkanfragen prüfen: Überprüfen Sie im Tab „Netzwerk“ der Entwicklertools, ob das SDK-Script von https://static.ferndesk.com/dist/sdk.js geladen wird. Wenn es blockiert wird (rot angezeigt), prüfen Sie Ihre Sicherheitseinstellungen oder Firewall.

  • Ad-Blocker: Einige Ad-Blocker können das Laden des Fern-Scripts verhindern. Versuchen Sie, Erweiterungen zu deaktivieren und die Seite neu zu laden.

Das Widget lädt, erscheint aber leer

  • Auf Inhalte warten: Bei langsamen Verbindungen zeigt das Widget eventuell kurz einen Lade-Spinner an.

  • Help-Center-Inhalte prüfen: Stellen Sie sicher, dass Sie mindestens einen veröffentlichten Artikel in Ihrem Ferndesk-Help-Center haben. Eine leere Wissensdatenbank führt zu einem leeren Widget.

Das Widget geladen, aber das Styling sieht fehlerhaft aus

  • Browser-Cache leeren: Ihr Browser speichert eventuell alte Widget-Dateien zwischen. Leeren Sie den Cache und laden Sie neu (Strg+Umschalt+R unter Windows, Cmd+Umschalt+R auf dem Mac).

  • CSS-Konflikte prüfen: Stellen Sie sicher, dass das globale CSS Ihrer Website nicht die Styles des Widgets überschreibt. Das Widget verwendet das Shadow DOM zur Isolierung, aber globale Regeln können es dennoch beeinflussen.

Das Widget-Script wird durch die Content Security Policy (CSP) blockiert

Wenn Ihre Website eine strikte Content Security Policy verwendet, wird das Ferndesk-SDK möglicherweise blockiert. Sie müssen eventuell eine Nonce hinzufügen oder die Ferndesk-Domain auf die Whitelist setzen.

  • Zur CSP-Whitelist hinzufügen: Fügen Sie https://static.ferndesk.com zur script-src-Direktive Ihres CSP-Headers hinzu.

  • Beispiel für CSP-Header: script-src 'self' https://static.ferndesk.com;

  • Eine Nonce verwenden: Bei Verwendung von Nonces unterstützt der Einbettungscode Nonce-Attribute. Kontaktieren Sie den Ferndesk-Support für fortgeschrittene CSP-Konfigurationen.

Erweiterte Anpassung über das SDK

Nach der Einbettung können Sie das Widget programmatisch über das Ferndesk-SDK steuern. Zum Beispiel:

  • Programmatisch einen Artikel per Klick auf eine Schaltfläche öffnen.

  • Das Widget basierend auf Benutzeraktionen ausblenden oder anzeigen.

  • Eine Suche über die UI Ihrer Website auslösen.

Weitere Details zur API und Codebeispiele finden Sie in der Ferndesk SDK-Dokumentation.

Wie geht es weiter

War das hilfreich?