Ferndesk
Self-Service-Widget

So binden Sie das Self-Service Widget ein

Das Self-Service Widget wird über ein einfaches Skript-Snippet in Ihre Website eingebunden.

Sobald es zu Ihrem HTML hinzugefügt wurde, erscheint es als schwebende Schaltfläche auf allen Seiten, auf denen das Skript geladen wird, sodass Besucher sofort auf Ihr Help Center zugreifen können.

Das Einbinden 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

  • Administratorzugriff auf das Ferndesk-Dashboard.

  • Administrator- 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 wie folgt einbinden:

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

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

  • Single-Page-Apps (SPAs): Fügen Sie das Skript einmal in Ihr Hauptlayout ein; es bleibt bei der Seitennavigation erhalten.

Generieren Sie Ihren Einbettungscode

  1. Melden Sie sich im Ferndesk-Dashboard an.

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

  3. Klicken Sie auf die Schaltfläche Installieren Ihres Widgets.

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

Ihr Einbettungscode wird so 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>

Binden Sie das Widget auf Ihrer Website ein

Für eine Standard-HTML-Website

  1. Öffnen Sie die Haupt-HTML-Datei Ihrer Website (oft index.html genannt, eine Vorlagendatei 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 in einem useEffect-Hook das Einbettungsskript nach dem Mounten Ihrer Komponente hinzu:

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 Skript:

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 Dokumentvorlage hinzu.

  2. Verwenden Sie bei Next.js die Komponente <Script> 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 Einbindungsproblemen

Die Widget-Schaltfläche erscheint nicht

  • Skript-Platzierung prüfen: Stellen Sie sicher, dass das Skript im HTML-Body oder -Header 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 nach Fehlermeldungen im Tab Konsole.

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

  • Werbeblocker: Einige Werbeblocker verhindern möglicherweise das Laden des Ferndesk-Skripts. Versuchen Sie, Erweiterungen zu deaktivieren und die Seite neu zu laden.

Das Widget lädt, erscheint aber leer

  • Auf Inhalt warten: Bei langsamen Verbindungen kann das Widget kurzzeitig ein Lade-Symbol anzeigen.

  • Help Center Inhalt 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 wurde geladen, aber das Styling sieht falsch aus

  • Browser-Cache leeren: Ihr Browser speichert möglicherweise alte Widget-Dateien zwischen. Leeren Sie den Cache und laden Sie die Seite 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 die Stile des Widgets nicht überschreibt. Das Widget verwendet Shadow DOM zur Isolierung, aber globale Regeln können es dennoch beeinflussen.

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

Wenn Ihre Website eine strenge 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 Allowlist setzen.

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

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

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

Erweiterte Anpassung über das SDK

Einmal eingebettet, können Sie das Widget programmatisch über das Ferndesk SDK steuern. Zum Beispiel:

  • Programmatisches Öffnen eines Artikels durch einen Schaltflächenklick.

  • Ausblenden oder Einblenden des Widgets basierend auf Benutzeraktionen.

  • Auslösen einer Suche über die Benutzeroberfläche Ihrer Website.

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

Nächste Schritte

War das hilfreich?