Deine Kunden sollten nicht nach einer „Kontakt”-Seite suchen müssen, die drei Klicks tief vergraben ist. Heedbacks einbettbares Widget bringt Support, Konversationen und Self-Service-Inhalte dorthin, wo die Nutzer bereits sind — auf deiner Website oder in deiner App. In dieser Anleitung gehen wir Installation, Konfiguration und Tests durch, damit du in unter zehn Minuten live gehen kannst.

Voraussetzungen

Stelle vor dem Start sicher, dass du Folgendes hast:

Ein Heedback-Konto mit mindestens einer eingerichteten Organisation
Zugang zum HTML deiner Website oder die Möglichkeit, den Einstiegspunkt deines Frontend-Frameworks zu bearbeiten (React, Vue, Next.js etc.)
Den Widget-Embed-Code deiner Organisation, verfügbar unter Einstellungen → Widget im Heedback-Dashboard

Schritt 1: Embed-Code kopieren

Navigiere zu Einstellungen → Widget in deinem Heedback-Dashboard. Dort findest du ein einsatzbereites Script-Tag, das so aussieht:

<script
  src="https://widget.heedback.com/embed.js"
  data-org-id="your-org-id"
  async
></script>

Dieses Snippet lädt das Widget asynchron, sodass es das Rendern deiner Seite nicht blockiert. Kopiere es — du fügst es im nächsten Schritt in deine Seite ein.

Einfaches HTML: Füge das Snippet direkt vor dem schließenden </body>-Tag in deiner Haupt-HTML-Datei ein. Das war’s — das Widget erscheint auf jeder Seite, die dieses Script einbindet.

React / Next.js: Füge das Script in dein Root-Layout ein oder nutze einen useEffect-Hook, um es dynamisch einzufügen. Bei Next.js App Router platziere es in app/layout.tsx mit der <Script>-Komponente und strategy="afterInteractive".

Vue / Nuxt: In Nuxt füge das Script in nuxt.config.ts unter dem app.head.script-Array hinzu. In einer Standard-Vue-App injiziere es in deine index.html oder mounte es im onMounted-Lifecycle-Hook von App.vue.

Single-Page-Apps: Das Widget bleibt bei Routenwechseln automatisch bestehen. Für clientseitige Navigation ist keine besondere Behandlung nötig.

Schritt 3: Erscheinungsbild konfigurieren

Zurück in Einstellungen → Widget kannst du anpassen, wie das Widget aussieht und sich verhält:

Markenfarbe: Setze eine Primärfarbe, die zu deiner Marke passt. Der Widget-Button, Header und Akzent-Elemente übernehmen diese Farbe.
Position: Wähle Platzierung unten-rechts oder unten-links. Unten-rechts ist die Konvention, die die meisten Nutzer erwarten, aber wähle, was Überlappungen mit anderen UI-Elementen vermeidet.
Begrüßungsnachricht: Schreibe eine kurze Begrüßung, die erscheint, wenn Nutzer das Widget zum ersten Mal öffnen. Halte sie freundlich und handlungsorientiert — etwa „Hi! Wie können wir dir heute helfen?”
Logo: Lade dein Firmenlogo hoch, das im Widget-Header für Markenkonsistenz erscheint.

Änderungen werden sofort gespeichert und auf deiner Live-Seite reflektiert, ohne erneutes Deployment.

Das Widget ist nicht nur eine Chat-Box. Je nach Plan und Konfiguration können Kunden:

Konversationen starten oder fortsetzen: Echtzeit-Messaging mit deinem Support-Team, mit vollständiger Historie über Sitzungen hinweg.
Deine Wissensdatenbank durchstöbern: Artikel aus deinem Hilfecenter werden direkt im Widget angezeigt, sodass Nutzer sich selbst helfen können, ohne deine App zu verlassen.
Nach Antworten suchen: Eine integrierte Suchleiste durchsucht deine Wissensdatenbank, damit Kunden relevante Artikel finden, bevor sie eine Konversation öffnen.
Feature Requests einreichen: Wenn du Feature Boards aktiviert hast, können Nutzer Ideen durchstöbern und abstimmen, ohne deine Seite zu verlassen.
Ankündigungen sehen: Changelog-Einträge können im Widget erscheinen und halten Kunden über neue Features und Fixes informiert.

Schritt 5: Eingeloggte Nutzer identifizieren

Standardmäßig sind Widget-Besucher anonym. Um Konversationen mit bekannten Nutzern zu verknüpfen — damit dein Team Namen, E-Mails und Historie sieht — übergib Nutzerdaten über die JavaScript-API:

<script>
  window.heedbackSettings = {
    user: {
      id: "usr_abc123",
      email: "jane@example.com",
      name: "Jane Doe",
    },
  };
</script>

Platziere dies vor dem Embed-Script. Wenn ein eingeloggter Nutzer das Widget öffnet, werden seine Konversationen mit seinem Profil in Heedback verknüpft. Das macht es überflüssig, dass sich Nutzer manuell identifizieren, und gibt deinen Agents vollen Kontext ab der ersten Nachricht.

Schritt 6: Vor dem Go-Live testen

Bevor du in Produktion gehst, überprüfe, dass das Widget korrekt funktioniert:

Öffne deine Seite in einem Inkognito-Fenster, um einen Erstbesucher zu simulieren. Der Widget-Button sollte an der konfigurierten Position erscheinen.
Sende eine Testnachricht und bestätige, dass sie in deiner Heedback-Inbox ankommt.
Antworte vom Dashboard und verifiziere, dass die Antwort in Echtzeit im Widget erscheint.
Teste auf Mobilgeräten — das Widget ist responsiv und passt sich automatisch an kleinere Bildschirme an.
Prüfe auf z-Index-Konflikte — wenn das Widget hinter Modals oder Sticky-Headern erscheint, wende dich an den Support für CSS-Override-Hinweise.

Tipps und Best Practices

Verstecke das Widget nicht hinter einem Menü. Der ganze Sinn ist sofortiger Zugang. Lass es sichtbar auf jeder Seite schweben.
Nutze identifizierte Nutzer wo möglich. Anonyme Konversationen erzeugen Reibung, wenn Nutzer zurückkehren — sie verlieren die Historie und deine Agents den Kontext.
Halte deine Wissensdatenbank aktuell. Der Self-Service-Wert des Widgets ist nur so gut wie die Inhalte dahinter. Veraltete Artikel untergraben Vertrauen.
Überwache Widget-Engagement in deinem Heedback-Analytics-Dashboard. Verfolge, wie viele Nutzer es öffnen, wie viele sich über Artikel selbst helfen und wie viele Konversationen starten.

So fügst du das einbettbare Widget zu deiner Website hinzu

Voraussetzungen

Schritt 1: Embed-Code kopieren

Schritt 2: Widget zu deiner Seite hinzufügen

Schritt 3: Erscheinungsbild konfigurieren

Schritt 4: Widget-Features erkunden

Schritt 5: Eingeloggte Nutzer identifizieren

Schritt 6: Vor dem Go-Live testen

Tipps und Best Practices

Verwandte Funktionen