So erhalten und installieren Sie Ihren Zendesk Web Widget Embed Code

Das Zendesk Web Widget ist eine der schnellsten Möglichkeiten, Kundensupport zu Ihrer Website hinzuzufügen. Es ist diese kleine Chat-Blase, die Sie in der Ecke von Websites sehen, die es Besuchern ermöglicht, Ihr Hilfe-Center zu durchsuchen, eine Konversation zu starten oder ein Ticket einzureichen, ohne die Seite zu verlassen.

Bevor Kunden es jedoch nutzen können, müssen Sie den Embed Code abrufen und ihn zu Ihrer Website hinzufügen. Diese Anleitung führt Sie genau durch diesen Vorgang, unabhängig davon, ob Sie das neuere Messaging-Widget oder die Classic-Version verwenden.

Die zwei Zendesk Web Widget Versionen verstehen

Zendesk bietet zwei verschiedene Widget-Typen an, und es ist wichtig für die Installation zu wissen, welchen Sie haben.

Messaging Web Widget ist die moderne Version. Es unterstützt fortlaufende Konversationen (Kunden können den Chat verlassen und wieder zurückkehren), native KI-Agenten und Echtzeit-Messaging. Dies wird von Zendesk für neue Setups empfohlen. Weitere Informationen finden Sie im Messaging Installationsleitfaden.

Web Widget (Classic) ist die ältere Version. Es verwendet sitzungsbasierte Chats und bietet detailliertere Formularoptionen. Einige ältere Zendesk-Konten verwenden dies noch, und es wird vollständig unterstützt. Weitere Details finden Sie in der Classic Widget Dokumentation.

Hier ist ein Vergleich:

Wenn Sie sich nicht sicher sind, welches Sie haben, überprüfen Sie Ihr Admin Center. Der Navigationspfad gibt Ihnen sofort Auskunft. Weitere Details finden Sie in der Zendesk Entwicklerdokumentation.

Was Sie vor dem Start benötigen

Bevor Sie Ihren Embed Code abrufen, stellen Sie sicher, dass Sie Folgendes haben:

• Ein Zendesk-Konto mit Administratorzugriff
• Zugriff auf den HTML-Code oder das Content-Management-System Ihrer Website
• Ein aktiviertes Hilfe-Center (erforderlich für die automatische Einbettungsoption des Messaging-Widgets)
• Grundlegende Kenntnisse darüber, wo Skripte auf Ihrer Website platziert werden

Wenn Sie WordPress, Shopify oder eine andere Plattform verwenden, benötigen Sie Administratorzugriff, um Theme-Dateien zu bearbeiten oder Plugins zu installieren. Für Teams, die KI-gestützte Antworten zu ihrem Widget hinzufügen möchten, bietet eesel AI eine Zendesk-Integration, die aus Ihrem Hilfe-Center und vergangenen Tickets lernt.

Schritt 1: Greifen Sie auf Ihre Widget-Einstellungen in Zendesk zu

Navigieren Sie zuerst zum richtigen Ort in Ihrem Zendesk Admin Center.

Für das Messaging Web Widget: Gehen Sie zu Admin Center > Kanäle > Messaging und Social > Messaging.

Für das Classic Web Widget: Gehen Sie zu Admin Center > Kanäle > Classic > Web Widget.

Sie sehen eine Liste von Widgets, wenn Sie mehrere konfiguriert haben. Klicken Sie auf den Namen des Widgets, das Sie installieren möchten. Dadurch wird das Konfigurationsfenster geöffnet, in dem Sie das Aussehen und Verhalten anpassen können, bevor Sie den Code generieren.

Schritt 2: Konfigurieren Sie das Aussehen und die Funktionen Ihres Widgets

Bevor Sie den Embed Code generieren, legen Sie fest, wie das Widget aussehen und funktionieren soll. Dies erspart Ihnen, es später aktualisieren zu müssen.

Visuelle Einstellungen, die konfiguriert werden müssen:

• Farben: Legen Sie die Primärfarbe Ihrer Marke für Schaltflächen und Überschriften fest
• Position: Wählen Sie die untere linke oder untere rechte Ecke
• Launcher-Stil: Wählen Sie das Symbol und den Text aus, die auf der Schaltfläche angezeigt werden
• Logo: Laden Sie Ihr Firmenlogo hoch (Enterprise-Pläne können das Zendesk-Branding entfernen)

Funktionale Komponenten, die aktiviert werden müssen:

• Hilfe-Center Suche: Ermöglicht es Kunden, Artikel zu finden, bevor sie Sie kontaktieren
• Kontaktformular: Ermöglicht die Ticket-Einreichung direkt über das Widget
• Live-Chat: Ermöglicht Echtzeit-Gespräche mit Agenten
• Rückrufanfragen: Ermöglicht es Kunden, einen Rückruf anzufordern (erfordert Zendesk Talk)

Verhaltenseinstellungen:

• Geschäftszeiten: Legen Sie fest, wann das Widget angezeigt wird oder die Nachrichten ändert
• Begrüßungen: Konfigurieren Sie automatisierte Willkommensnachrichten
• Mobile Reaktionsfähigkeit: Stellen Sie sicher, dass das Widget auf Telefonen und Tablets funktioniert

Nehmen Sie sich einen Moment Zeit, um Ihre Änderungen in der Vorschau anzuzeigen. Zendesk bietet eine Live-Vorschau, sodass Sie genau sehen können, wie das Widget für Kunden aussehen wird.

Schritt 3: Generieren und kopieren Sie Ihren Embed Code

Sobald Sie mit der Konfiguration zufrieden sind, ist es an der Zeit, den eigentlichen Code abzurufen.

Scrollen Sie nach unten zum Abschnitt Installation und klicken Sie, um ihn zu erweitern. Sie sehen einen JavaScript-Snippet, der ungefähr so aussieht:

<!-- Start of Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_WIDGET_KEY"></script>
<!-- End of Zendesk Widget script -->

Klicken Sie auf das Symbol Kopieren, um den gesamten Snippet in Ihre Zwischenablage zu kopieren. Dieser Code enthält Ihren eindeutigen Widget-Schlüssel, der das Widget mit Ihrem spezifischen Zendesk-Konto verbindet. Weitere Details zum Installationsprozess finden Sie im Zendesk Messaging Installationsleitfaden.

Wenn Sie diesen Code an einen Entwickler senden müssen, klicken Sie stattdessen auf Code per E-Mail an ein Teammitglied senden.

Schritt 4: Fügen Sie den Code zu Ihrer Website hinzu

Jetzt müssen Sie diesen Code in den HTML-Code Ihrer Website einfügen. Die Platzierung ist wichtig: Fügen Sie ihn kurz vor dem schließenden </body> Tag auf jeder Seite hinzu, auf der das Widget angezeigt werden soll.

Standard-HTML-Websites

Öffnen Sie die HTML-Dateien Ihrer Website und fügen Sie den Snippet vor </body> ein. Wenn Sie ein Vorlagensystem verwenden, fügen Sie es zu Ihrer Basisvorlage hinzu, damit es auf allen Seiten angezeigt wird.

WordPress

Sie haben mehrere Optionen:

• Theme-Editor: Gehen Sie zu Design > Theme-Datei-Editor, öffnen Sie footer.php und fügen Sie ihn vor </body> ein
• Customizer: Einige Themes haben einen Abschnitt "Benutzerdefinierte Skripte" oder "Footer-Code" unter Design > Anpassen
• Plugin: Verwenden Sie ein Plugin wie "Insert Headers and Footers", um Code hinzuzufügen, ohne Theme-Dateien zu bearbeiten

Shopify

• Gehen Sie zu Online Store > Themes
• Klicken Sie auf Aktionen > Code bearbeiten für Ihr aktives Theme
• Öffnen Sie theme.liquid im Layout-Ordner
• Fügen Sie den Snippet vor dem schließenden </body> Tag ein
• Speichern

Andere Plattformen

Die meisten Content-Management-Systeme bieten eine Möglichkeit, benutzerdefinierte Skripte hinzuzufügen:

• Wix: Einstellungen > Benutzerdefinierter Code
• Squarespace: Einstellungen > Erweitert > Code-Injektion
• Webflow: Projekteinstellungen > Benutzerdefinierter Code

Speichern Sie nach dem Hinzufügen des Codes Ihre Änderungen und leeren Sie alle Caches. Weitere plattformspezifische Anleitungen finden Sie in der Zendesk Entwicklerdokumentation.

Schritt 5: Überprüfen Sie Ihre Installation

Gehen Sie nicht einfach davon aus, dass es funktioniert hat. Nehmen Sie sich einen Moment Zeit, um zu überprüfen, ob alles korrekt funktioniert.

Öffnen Sie Ihre Website in einem Inkognito- oder privaten Browserfenster. Dadurch wird sichergestellt, dass Sie sie so sehen, wie ein neuer Besucher sie sehen würde, ohne dass zwischengespeicherte Daten stören.

Überprüfen Sie Folgendes:

• Der Widget-Launcher wird in der von Ihnen gewählten Ecke angezeigt
• Wenn Sie darauf klicken, wird die Widget-Oberfläche geöffnet
• Ihr Branding (Farben, Logo) wird korrekt angezeigt
• Die Hilfe-Center Suche funktioniert, falls aktiviert
• Sie können einen Chat starten oder ein Testticket einreichen

Testen Sie sowohl auf dem Desktop als auch auf dem Mobilgerät, um ein reaktionsfähiges Verhalten sicherzustellen. Das Widget sollte sich an kleinere Bildschirme anpassen, ohne das Layout Ihrer Website zu beeinträchtigen.

Wenn das Widget nicht angezeigt wird, überprüfen Sie die Entwicklerkonsole Ihres Browsers auf JavaScript-Fehler. Häufige Probleme sind:

• Das Skript wird durch eine Content-Security-Policy blockiert
• Konflikte mit anderen Chat-Widgets
• Der Code wurde an der falschen Stelle platziert

Anpassen Ihres Widgets über die Grundeinstellungen hinaus

Sobald das Basis-Widget funktioniert, können Sie erweiterte Anpassungsoptionen über die JavaScript-API erkunden.

Programmgesteuerte Steuerung

Sie können das Verhalten des Widgets mit JavaScript-Befehlen steuern:

// Open the widget
zE('webWidget', 'open');

// Set the visitor's name
zE('webWidget', 'prefill', {
  name: 'John Doe',
  email: 'john@example.com'
});

Eingebetteter Modus

Für mehr Kontrolle über die Platzierung verwenden Sie den eingebetteten Modus, um das Widget in einem bestimmten Container zu platzieren:

window.zEMessenger = {
  autorender: false
};

zE('messenger', 'render', {
  mode: 'embedded',
  widget: {
    targetElement: '#support-container'
  }
});

Dies ist nützlich, um spezielle Support-Seiten zu erstellen oder das Widget in Dashboards zu integrieren. Weitere Informationen finden Sie in der Dokumentation zum eingebetteten Modus.

Authentifizierte Besucher

Wenn sich Ihre Benutzer auf Ihrer Website anmelden, können Sie sie im Widget authentifizieren, sodass sie ihren Konversationsverlauf sehen und ihre Kontaktdaten nicht erneut eingeben müssen. Dies erfordert die Einrichtung der JWT-Authentifizierung in Ihren Zendesk-Einstellungen.

Fehlerbehebung bei häufigen Einbettungsproblemen

Auch bei klaren Anweisungen geht manchmal etwas schief. So beheben Sie häufige Probleme.

Widget wird nicht angezeigt

• Leeren Sie Ihren Cache: Browser cachen stark; versuchen Sie eine harte Aktualisierung (Strg+F5 oder Cmd+Shift+R)
• Überprüfen Sie auf JavaScript-Fehler: Öffnen Sie die Browser-DevTools und suchen Sie in der Konsole nach roten Fehlern
• Überprüfen Sie, ob das Skript geladen wurde: Überprüfen Sie auf der Registerkarte DevTools Network, ob die Zendesk-Skriptanforderung erfolgreich war
• Firewall-Blockierung: Stellen Sie sicher, dass Ihre Firewall Anfragen an zdassets.com und zendesk.com zulässt

Fehler bei der Codeplatzierung

• Stellen Sie sicher, dass sich der Code vor </body> befindet, nicht danach
• Platzieren Sie ihn nicht innerhalb von <head> (dies kann das Laden der Seite verlangsamen)
• Stellen Sie sicher, dass Sie beim Einfügen nicht versehentlich die HTML-Struktur beschädigt haben

Konflikte mit anderen Tools

Wenn Sie andere Chat-Widgets (Intercom, Drift usw.) verwenden, können diese in Konflikt geraten. Verwenden Sie nur ein Chat-Widget pro Seite, um Verwirrung und technische Probleme zu vermeiden.

Probleme mit der mobilen Anzeige

• Überprüfen Sie, ob das Viewport-Meta-Tag Ihrer Website korrekt eingestellt ist
• Stellen Sie sicher, dass der Z-Index des Widgets nicht durch Ihr CSS überschrieben wird
• Testen Sie auf tatsächlichen Geräten, nicht nur auf Browser-Emulatoren

Verbessern Sie Ihr Zendesk-Widget mit KI-Unterstützung

Sobald Ihr Web Widget läuft, werden Sie möglicherweise feststellen, dass es immer noch erhebliche manuelle Arbeit erfordert. Agenten müssen auf jede Konversation antworten, und einfache Fragen nehmen wertvolle Zeit in Anspruch.

Hier kann KI helfen. eesel AI lässt sich direkt in Zendesk integrieren, um Antworten mithilfe Ihrer vorhandenen Hilfe-Center Artikel und vergangenen Ticketdaten zu automatisieren.

So funktioniert es:

• Trainieren Sie mit Ihren Inhalten: eesel lernt aus Ihrem Hilfe-Center, Ihren Makros und gelösten Tickets
• Entwerfen Sie KI-Antworten: Wenn Kunden Ihr Web Widget verwenden, schlägt eesel vollständige Antworten vor, die Agenten überprüfen können
• Autonome Lösung: Bei häufigen Fragen kann eesel direkt antworten, ohne dass ein Agent beteiligt ist
• Eskalieren Sie intelligent: Komplexe Probleme werden automatisch mit vollständigem Kontext an menschliche Agenten weitergeleitet

Die Integration erfolgt innerhalb Ihres bestehenden Zendesk-Setups. Es ist nicht erforderlich, Ihr Web Widget zu ersetzen oder die Art und Weise zu ändern, wie Kunden mit Ihnen interagieren. eesel macht diese Interaktionen einfach effizienter.

Für Teams, die die Reaktionszeiten verkürzen und gleichzeitig die Qualität aufrechterhalten möchten, kann eesel AIs AI Agent ein praktischer nächster Schritt nach der Einrichtung des Basis-Widgets sein.