Je klanten zouden niet moeten zoeken naar een “Contact” pagina die drie klikken diep begraven ligt. De insluitbare widget van Heedback plaatst support, gesprekken en selfservice-content precies daar waar gebruikers zich al bevinden — op je website of in je app. In deze handleiding lopen we door installatie, configuratie en testen, zodat je binnen tien minuten live kunt gaan.

Vereisten

Zorg ervoor dat je het volgende hebt voordat je begint:

Een Heedback-account met minimaal één organisatie
Toegang tot de HTML van je website, of de mogelijkheid om het entry point van je frontend-framework aan te passen (React, Vue, Next.js, etc.)
De widget-inbedcode van je organisatie, beschikbaar onder Instellingen → Widget in het Heedback-dashboard

Stap 1: Het inbedscript kopiëren

Ga naar Instellingen → Widget in je Heedback-dashboard. Je vindt een kant-en-klare script-tag die er als volgt uitziet:

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

Dit script laadt de widget asynchroon, zodat het je pagina niet blokkeert bij het renderen. Kopieer het — je plakt het in de volgende stap in je site.

Gewone HTML: Plak het script vlak voor de afsluitende </body> tag in je hoofd-HTML-bestand. Klaar — de widget verschijnt op elke pagina die dit script bevat.

React / Next.js: Voeg het script toe aan je root layout of gebruik een useEffect hook om het dynamisch te injecteren. Bij Next.js App Router plaats je het in app/layout.tsx met het <Script> component en strategy="afterInteractive".

Vue / Nuxt: In Nuxt voeg je het script toe aan nuxt.config.ts onder de app.head.script array. In een standaard Vue-app injecteer je het in je index.html of mount je het in de onMounted lifecycle hook van App.vue.

Single-page apps: De widget blijft behouden bij routewijzigingen. Er is geen speciale afhandeling nodig voor client-side navigatie.

Stap 3: Uiterlijk configureren

Terug in Instellingen → Widget kun je aanpassen hoe de widget eruitziet en zich gedraagt:

Merkkleur: Stel een primaire kleur in die past bij je merk. De widgetknop, headers en accentelementen nemen deze kleur over.
Positie: Kies rechtsonder of linksonder. Rechtsonder is de conventie die de meeste gebruikers verwachten, maar kies wat het best past zonder andere UI-elementen te overlappen.
Welkomstbericht: Schrijf een korte begroeting die verschijnt wanneer gebruikers de widget voor het eerst openen. Houd het warm en actioneeerbaar — iets als “Hoi! Hoe kunnen we je helpen?”
Logo: Upload je bedrijfslogo zodat het in de widgetheader verschijnt voor merkconsistentie.

Wijzigingen worden direct opgeslagen en weerspiegeld op je live site zonder opnieuw te deployen.

Stap 4: Widgetfuncties verkennen

De widget is meer dan een chatvenster. Afhankelijk van je abonnement en configuratie kunnen klanten:

Gesprekken starten of voortzetten: Realtime berichten met je supportteam, met volledige geschiedenis die bewaard blijft over sessies.
Je kennisbank doorbladeren: Artikelen uit je helpcentrum worden direct in de widget getoond, zodat gebruikers zichzelf kunnen helpen zonder je app te verlaten.
Antwoorden zoeken: Een ingebouwde zoekbalk doorzoekt je kennisbank zodat klanten relevante artikelen vinden voordat ze een gesprek starten.
Functie-aanvragen indienen: Als je feature boards hebt ingeschakeld, kunnen gebruikers ideeën bekijken en erop stemmen zonder je site te verlaten.
Aankondigingen bekijken: Changelog-berichten kunnen in de widget verschijnen, zodat klanten op de hoogte blijven van nieuwe functies en fixes.

Stap 5: Ingelogde gebruikers identificeren

Standaard zijn widgetbezoekers anoniem. Om gesprekken te koppelen aan bekende gebruikers — zodat je team namen, e-mailadressen en geschiedenis ziet — geef je gebruikersgegevens door via de JavaScript API:

<script>
  window.heedbackSettings = {
    user: {
      id: "usr_abc123",
      email: "jan@voorbeeld.nl",
      name: "Jan de Vries",
    },
  };
</script>

Plaats dit voor het inbedscript. Wanneer een ingelogde gebruiker de widget opent, worden hun gesprekken gekoppeld aan hun profiel in Heedback. Dit voorkomt dat gebruikers zichzelf handmatig moeten identificeren en geeft je medewerkers volledige context vanaf het eerste bericht.

Stap 6: Testen voor je live gaat

Verifieer dat de widget correct werkt voordat je naar productie pusht:

Open je site in een incognitovenster om een eerste bezoeker te simuleren. De widgetknop moet op de geconfigureerde positie verschijnen.
Stuur een testbericht en bevestig dat het in je Heedback-inbox arriveert.
Antwoord vanuit het dashboard en verifieer dat het antwoord in realtime in de widget verschijnt.
Test op mobiel — de widget is responsief en past zich automatisch aan kleinere schermen aan.
Controleer op z-index conflicten — als de widget achter modals of sticky headers verschijnt, neem dan contact op met support voor CSS-overschrijvingsadvies.

Tips en best practices

Verberg de widget niet achter een menu. Het hele idee is directe toegang. Laat het zichtbaar zweven op elke pagina.
Gebruik geïdentificeerde gebruikers waar mogelijk. Anonieme gesprekken creëren wrijving wanneer gebruikers terugkomen — ze verliezen hun geschiedenis en je medewerkers verliezen context.
Houd je kennisbank actueel. De selfservicewaarde van de widget is slechts zo goed als de content erachter. Verouderde artikelen ondermijnen vertrouwen.
Monitor widgetbetrokkenheid in je Heedback-analytics dashboard. Volg hoeveel gebruikers het openen, hoeveel zichzelf helpen via artikelen en hoeveel een gesprek starten.

Gerelateerde functies

Kennisbank — De artikelen die je widget toont komen hier vandaan. Een goed georganiseerd helpcentrum maakt de widget drastisch nuttiger.
AI Auto-Reply — Schakel AI-gestuurde antwoorden in zodat klanten directe antwoorden krijgen, zelfs wanneer je team offline is.
Meertalige ondersteuning — Bied de widget automatisch aan in de voorkeurstaal van je klanten.
Meldingen — Zorg ervoor dat je team direct wordt gewaarschuwd zodra een klant via de widget contact opneemt.

De insluitbare widget toevoegen aan je website