Ferndesk
Self-Service-Widget

Wie man das Self-Service Widget einbettet

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, sodass Besucher sofort auf Ihr Help Center zugreifen können.

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 Entwickler-Zugriff 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 einbetten auf:

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

  • Bestimmten Seiten: Fügen Sie das Script nur auf bestimmten Seiten hinzu, auf denen die 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.

Einbettungscode generieren

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

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 gegen 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 geladen 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 statischen Seitengenerator (Next.js, Gatsby usw.)

  1. Fügen Sie den Einbettungscode zu Ihrem Layout oder Ihrer Dokumentvorlage 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 auf der Registerkarte Konsole nach Fehlermeldungen.

  • Netzwerkanfragen prüfen: Überprüfen Sie auf der Registerkarte Netzwerk der Entwicklertools, ob das SDK-Script von https://static.ferndesk.com/dist/sdk.js geladen wird. Wenn es blockiert ist (rot angezeigt wird), überprü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

  • Auf Inhalte warten: Bei langsamen Verbindungen zeigt das Widget möglicherweise kurzzeitig einen Lade-Spinner an.

  • 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 nicht richtig aus

  • Browser-Cache leeren: Ihr Browser speichert möglicherweise alte Widget-Dateien im Cache. 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 nicht die Stile des Widgets ü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. Möglicherweise müssen Sie 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-Anweisung Ihres CSP-Headers hinzu.

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

  • Verwendung einer Nonce: Wenn Sie Nonces verwenden, unterstützt der Einbettungscode Nonce-Attribute. Wenden Sie sich für erweiterte CSP-Konfigurationen an den Ferndesk Support.

Erweiterte Anpassung über das SDK

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

  • Einen Artikel programmgesteuert bei einem Klick auf eine Schaltfläche ö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.

Was kommt als Nächstes?

War das hilfreich?