De standaard Heedback-widget doet zijn werk — maar met de App Builder maak je hem helemaal van jou. In plaats van een standaard chatbubbel kun je een Home-tab ontwerpen die bezoekers naar de juiste bron leidt: een gesprek starten, FAQ’s doorbladen, een afspraak inplannen of een aangepaste link volgen. Allemaal zonder ook maar één regel code te schrijven.

Deze handleiding behandelt alles, van het openen van de builder tot het publiceren van je aangepaste widget.

Vereisten

Voordat je de App Builder gebruikt, zorg ervoor dat:

Je een actieve Heedback-organisatie hebt met een Pro-abonnement.
Je account beheerders- of eigenaarsrechten heeft.
De Heedback-widget al op je website is geïnstalleerd (zie Instellingen > Widget voor het inbedscript).
Je een globaal idee hebt van welke acties je bezoekers wilt laten ondernemen — dit helpt bij het kiezen van de juiste blokken.

De App Builder openen

Open je Heedback-dashboard en ga naar Widget > App Builder in de linkerzijbalk.
Je ziet een visuele editor met je huidige Home-tab layout aan de linkerkant en een blokkenpalet aan de rechterkant.
Het live-voorbeeldpaneel aan de rechterkant wordt in realtime bijgewerkt terwijl je wijzigingen aanbrengt — wat je ziet is precies wat je bezoekers te zien krijgen.

De App Builder werkt op basis van een blokkensysteem. Elk blok vertegenwoordigt een specifieke actie of inhoudssectie die op de Home-tab van de widget verschijnt.

Beschikbare blokken

Heedback biedt verschillende bloktypes, elk ontworpen voor een specifiek doel:

Gesprek: Het klassieke “Start een gesprek” startpunt. Bezoekers klikken erop om een nieuw supportgesprek te openen of een bestaand voort te zetten. Dit is het meest gebruikte blok en staat meestal bovenaan.
FAQ / Kennisbank: Toont je meestgelezen helpartikelen direct in de widget. Bezoekers kunnen zoeken en browsen zonder je site te verlaten. Vereist gepubliceerde kennisbankartikelen.
Afspraak inplannen: Laat bezoekers een gesprek inplannen met je team. Verbind je agendaprovider (Calendly, Cal.com of een aangepaste URL) en de planningsinterface verschijnt inline.
Aangepaste link: Een flexibel blok dat naar elke URL linkt — je documentatiesite, een feedbackbord, een specifieke landingspagina of een extern hulpmiddel. Voeg een titel, beschrijving en icoon toe om het visueel te onderscheiden.
Changelog: Toont je laatste productupdates direct in de widget, zodat gebruikers zien wat er nieuw is zonder elders te navigeren.

Elk blok heeft eigen configuratiemogelijkheden. Het FAQ-blok laat je bijvoorbeeld kiezen welke collecties je wilt uitlichten, terwijl het Aangepaste link-blok een externe URL en een aangepast icoon ondersteunt.

Blokken ordenen met drag-and-drop

Het samenstellen van je Home-tab layout is eenvoudig:

Blok toevoegen: Klik op een bloktype vanuit het palet om het aan je layout toe te voegen.
Herordenen: Sleep een blok omhoog of omlaag om de positie te wijzigen. De volgorde is belangrijk — blokken bovenaan krijgen de meeste zichtbaarheid en klikken.
Configureren: Klik op het tandwielicoon op een blok om de instellingen te openen. Vul titels, beschrijvingen en eventuele blokspecifieke opties in.
Verwijderen: Klik op het prullenbakicoon op een blok om het uit de layout te verwijderen.

Een praktische opzet voor de meeste SaaS-producten: Gespreksblok bovenaan (voor urgente zaken), gevolgd door FAQ (voor selfservice), dan Changelog (voor bewustwording) en een Aangepaste link naar je community of documentatie onderaan.

Voorvertonen en testen

Bekijk altijd een voorvertoning van je wijzigingen voordat je publiceert:

De live voorvertoning in de App Builder wordt automatisch bijgewerkt terwijl je bewerkt. Controleer of blokken in de juiste volgorde staan en of titels duidelijk leesbaar zijn.
Klik op Voorvertoning op site om een tijdelijke voorvertoning te openen op je daadwerkelijke website. Dit toont de widget precies zoals bezoekers het zullen zien, inclusief je huisstijl, kleuren en positionering.
Test de interactie van elk blok: klik op het Gespreksblok om te verifiëren dat de chat opent, controleer of FAQ-artikelen correct laden en bevestig dat aangepaste links naar de juiste URL’s navigeren.

Het is waardevol om op zowel desktop als mobiel te testen — de widget past zich aan de schermgrootte aan en je blokindeling moet ook op kleinere schermen natuurlijk aanvoelen.

Je wijzigingen publiceren

Zodra je tevreden bent met de layout:

Klik op de Opslaan-knop in de App Builder.
Wijzigingen worden direct gepubliceerd naar je live widget. Er is geen aparte deploy-stap — bezoekers zien de bijgewerkte Home-tab bij hun volgende paginabezoek.
Je kunt op elk moment terugkeren naar de App Builder om blokken toe te voegen, te verwijderen of te herordenen. Elke opslaging overschrijft de vorige layout.

Als je wilt terugkeren naar een eerdere versie, is er geen ingebouwde versiegeschiedenis, dus overweeg een screenshot te maken van je huidige layout voordat je grote wijzigingen aanbrengt.

Tips en best practices

Houd het overzichtelijk. Drie tot vier blokken is ideaal. Te veel opties veroorzaken keuzestress — bezoekers klikken uiteindelijk nergens op.
Zet de meest waardevolle actie vooraan. Als de meeste bezoekers hulp nodig hebben, begin dan met Gesprek. Als de meeste vragen in de documentatie worden beantwoord, begin dan met FAQ.
Gebruik beschrijvende titels. “Hulp nodig” is vaag. “Chat met ons team” of “Doorzoek helpartikelen” vertelt bezoekers precies wat ze kunnen verwachten.
Herzie elk kwartaal. Naarmate je product evolueert, zou je widget dat ook moeten doen. Nieuwe functierlancering? Voeg tijdelijk een Changelog-blok toe. Wervingscampagne? Voeg een Aangepaste link naar je vacaturepagina toe.
Sluit aan bij je merk. De App Builder respecteert de kleur- en huisstijlinstellingen van je widget uit Instellingen > Widget. Zorg ervoor dat je bloktitels en beschrijvingen passen bij je merkidentiteit.

Gerelateerde functies

Widget-configuratie: Stel kleuren, positie, huisstijl en het inbedscript in dat de widget op je site laadt.
Kennisbank: Voedt het FAQ-blok. Meer artikelen betekenen een nuttigere selfservice-ervaring in de widget.
Changelog: Het Changelog-blok haalt gegevens uit je gepubliceerde berichten — houd je changelog actief voor maximale widgetimpact.
AI Auto-Reply: Wanneer bezoekers een gesprek starten vanuit de widget, kan AI Auto-Reply directe eerste antwoorden geven.