Das Standard-Widget von Heedback erfüllt seinen Zweck — aber mit dem App Builder machst du es zu deinem eigenen. Statt einer Einheitslösung als Chat-Blase kannst du einen Home-Tab designen, der Besucher zur richtigen Ressource führt: eine Konversation starten, FAQs durchstöbern, ein Meeting buchen oder einem individuellen Link folgen. Alles ohne eine einzige Zeile Code.

Diese Anleitung deckt alles ab, vom Zugriff auf den Builder bis zur Veröffentlichung deines angepassten Widgets.

Voraussetzungen

Bevor du den App Builder nutzt, stelle sicher:

Du hast eine aktive Heedback-Organisation mit einem Pro-Plan.
Dein Konto hat Admin- oder Inhaber-Berechtigungen.
Das Heedback-Widget ist bereits auf deiner Website installiert (siehe Einstellungen > Widget für den Embed-Code).
Du hast eine grobe Vorstellung davon, welche Aktionen Besucher ausführen sollen — das hilft bei der Auswahl der richtigen Blöcke.

Zugriff auf den App Builder

Öffne dein Heedback-Dashboard und navigiere zu Widget > App Builder in der linken Seitenleiste.
Du siehst einen visuellen Editor mit deinem aktuellen Home-Tab-Layout auf der linken Seite und einer Block-Palette auf der rechten Seite.
Das Live-Vorschau-Panel rechts aktualisiert sich in Echtzeit, während du Änderungen vornimmst — was du siehst, ist genau das, was deine Besucher bekommen.

Der App Builder arbeitet mit einem blockbasierten System. Jeder Block repräsentiert eine eigenständige Aktion oder einen Inhaltsbereich, der auf dem Home-Tab des Widgets erscheint.

Die verfügbaren Blöcke verstehen

Heedback bietet mehrere Block-Typen, jeder für einen bestimmten Zweck konzipiert:

Konversation: Der klassische „Konversation starten”-Einstiegspunkt. Besucher klicken darauf, um eine neue Support-Konversation zu öffnen oder eine bestehende fortzusetzen. Das ist der häufigste Block und sitzt normalerweise ganz oben.
FAQ / Wissensdatenbank: Zeigt deine meistgelesenen Hilfeartikel direkt im Widget an. Besucher können suchen und stöbern, ohne deine Seite zu verlassen. Erfordert veröffentlichte Wissensdatenbank-Artikel.
Terminbuchung: Ermöglicht Besuchern, ein Gespräch mit deinem Team zu vereinbaren. Verbinde deinen Kalenderanbieter (Calendly, Cal.com oder eine benutzerdefinierte URL) und die Buchungsoberfläche erscheint inline.
Benutzerdefinierter Link: Ein flexibler Block, der auf jede URL verlinkt — deine Dokumentationsseite, ein Feedback-Board, eine bestimmte Landingpage oder ein externes Tool. Füge Titel, Beschreibung und Icon hinzu, um ihn visuell abzuheben.
Changelog: Zeigt deine neuesten Produktupdates direkt im Widget an, damit Nutzer sehen, was neu ist, ohne woanders hinzunavigieren.

Jeder Block hat seine eigenen Konfigurationsoptionen. Der FAQ-Block lässt dich beispielsweise auswählen, welche Sammlungen hervorgehoben werden, während der Benutzerdefinierte-Link-Block eine externe URL und ein benutzerdefiniertes Icon unterstützt.

Blöcke per Drag-and-drop anordnen

Das Layout deines Home-Tabs zu bauen ist unkompliziert:

Block hinzufügen: Klicke auf einen Block-Typ in der Palette, um ihn zu deinem Layout hinzuzufügen.
Neu anordnen: Ziehe einen Block nach oben oder unten, um seine Position zu ändern. Die Reihenfolge ist wichtig — Blöcke oben bekommen die meiste Sichtbarkeit und Klicks.
Konfigurieren: Klicke auf das Zahnrad-Icon eines Blocks, um seine Einstellungen zu öffnen. Fülle Titel, Beschreibungen und blockspezifische Optionen aus.
Entfernen: Klicke auf das Papierkorb-Icon, um einen Block aus dem Layout zu entfernen.

Eine praktische Anordnung für die meisten SaaS-Produkte: Konversations-Block oben (für dringende Anliegen), gefolgt von FAQ (für Self-Service), dann Changelog (für Awareness) und ein Benutzerdefinierter Link zu deiner Community oder Dokumentation ganz unten.

Vorschau und Testen

Vor der Veröffentlichung überprüfe immer deine Änderungen:

Die Live-Vorschau im App Builder aktualisiert sich automatisch beim Bearbeiten. Prüfe, ob Blöcke in der richtigen Reihenfolge erscheinen und Titel gut lesbar sind.
Klicke auf Auf Website ansehen, um eine temporäre Vorschau auf deiner tatsächlichen Website zu öffnen. Diese zeigt das Widget genau so, wie Besucher es sehen werden, inklusive Branding, Farben und Positionierung.
Teste jede Block-Interaktion: Klicke auf den Konversations-Block, um zu verifizieren, dass der Chat sich öffnet, prüfe, ob FAQ-Artikel korrekt laden, und bestätige, dass benutzerdefinierte Links zur richtigen URL navigieren.

Es lohnt sich, sowohl auf Desktop- als auch auf Mobile-Ansichten zu testen — das Widget passt sich der Bildschirmgröße an und deine Block-Anordnung sollte sich auch auf kleineren Bildschirmen natürlich anfühlen.

Änderungen veröffentlichen

Sobald du mit dem Layout zufrieden bist:

Klicke auf den Speichern-Button im App Builder.
Änderungen werden sofort auf deinem Live-Widget veröffentlicht. Es gibt keinen separaten Deployment-Schritt — Besucher sehen den aktualisierten Home-Tab beim nächsten Seitenaufruf.
Du kannst jederzeit zum App Builder zurückkehren, um Blöcke hinzuzufügen, zu entfernen oder umzuordnen. Jedes Speichern überschreibt das vorherige Layout.

Wenn du zurückkehren möchtest, gibt es keine eingebaute Versionshistorie — mache deshalb einen Screenshot deines aktuellen Layouts, bevor du größere Änderungen vornimmst.

Tipps und Best Practices

Bleib fokussiert. Drei bis vier Blöcke sind der Sweet Spot. Zu viele Optionen erzeugen Entscheidungsparalyse — Besucher klicken am Ende gar nichts.
Setze die wertvollste Aktion an den Anfang. Wenn die meisten Besucher Hilfe brauchen, starte mit Konversation. Wenn die meisten Fragen in der Dokumentation beantwortet werden, starte mit FAQ.
Verwende beschreibende Titel. „Hilfe” ist vage. „Mit unserem Team chatten” oder „Hilfeartikel durchstöbern” sagt Besuchern genau, was sie erwartet.
Überarbeite vierteljährlich. Wenn sich dein Produkt weiterentwickelt, sollte auch dein Widget mitwachsen. Neues Feature-Launch? Füge temporär einen Changelog-Block hinzu. Recruiting-Push? Füge einen Link zu deiner Karriereseite hinzu.
Passe es an deine Marke an. Der App Builder respektiert die Farb- und Branding-Einstellungen deines Widgets aus Einstellungen > Widget. Stelle sicher, dass Block-Titel und Beschreibungen zu deiner Markenstimme passen.

So gestaltest du dein Widget mit dem App Builder