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 einer gemeinsamen 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 Ihrem Hauptlayout hinzu; es bleibt über die Seitennavigation hinweg bestehen.

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 Einbettungscode kopieren, 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>

Das Widget auf Ihrer Website einbetten

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 Einbettungsscript 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, etc.)

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

  2. Verwenden Sie für 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 Einbettungsproblemen

Die Widget-Schaltfläche erscheint nicht

  • Script-Platzierung prüfen: Stellen Sie sicher, dass das Script 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 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 ist (rot angezeigt), prüfen Sie Ihre Sicherheitseinstellungen oder Firewall.

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

Das Widget lädt, erscheint aber leer

  • Warten auf Inhalte: Bei langsamen Verbindungen kann das Widget kurzzeitig ein Ladesymbol anzeigen.

  • 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 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-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 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 erweiterte CSP-Konfigurationen.

Erweiterte Anpassung über das SDK

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

  • Einen Artikel programmatisch über einen Schaltflächenklick öffnen.

  • Das Widget basierend auf Benutzeraktionen ausblenden oder anzeigen.

  • Eine Suche über die Benutzeroberfläche Ihrer Website auslösen.

Weitere Informationen finden Sie in der Ferndesk SDK-Dokumentation für vollständige API-Details und Codebeispiele.

Nächste Schritte

War das hilfreich?