Widget installeren

Basisinstallatie

Voeg deze scripttag toe aan je website, vlak voor de afsluitende </body>-tag:

<script>
  (function(w,d,s,o,f,js,fjs){
    w['Sonny']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','sonny','https://www.usesonny.com/widget.js');
  sonny('init', { siteId: 'YOUR_SITE_ID' });
</script>

Code met automatische init

Je kunt ook één scripttag gebruiken als je geen commando's in de wachtrij hoeft te zetten voordat de widget laadt:

<script
  src="https://www.usesonny.com/widget.js"
  data-site-id="YOUR_SITE_ID"
  async
></script>

Bezoekers identificeren en eigen kenmerken meesturen

Zodra een gebruiker inlogt op je site, roep je sonny('identify') aan met zijn e-mailadres en alle extra gegevens die je supportteam moet zien. Geef extra velden mee onder attributes — nieuwe sleutels worden automatisch aangemaakt als Aangepaste velden en verschijnen rechts naast het gesprek. Bij elke volgende aanroep wordt de vorige waarde overschreven.

<script>
  // Identify the visitor and pass any custom attributes you want
  // surfaced in the agent sidebar. Unknown keys are auto-created
  // as Custom Fields in your workspace settings.
  sonny('identify', {
    email: 'jane@acme.com',
    name: 'Jane Doe',
    attributes: {
      plan: 'pro',
      mrr: 499,
      signedUpAt: '2025-08-01T00:00:00Z',
      website: 'https://acme.com'
    }
  });
</script>

Ondersteunde waardetypen: string, getal, boolean, ISO-8601-datum, URL. Geef null mee om een kenmerk te wissen. Sleutels moeten met een letter beginnen, mogen alleen letters, cijfers of underscores bevatten en zijn maximaal 64 tekens lang. De sleutels email, name, id, phone, createdAt en updatedAt zijn gereserveerd. Tekstwaarden zijn maximaal 1.000 tekens. Limiet: 50 kenmerken per aanroep.

Open de widget met je eigen knop

Wil je de chat starten vanaf je eigen knop in plaats van de zwevende ballon? Geef hideLauncher: true mee aan sonny('init') om de ingebouwde launcher te verbergen en roep daarna sonny('open') aan vanaf elk element op je pagina.

<!-- 1. Boot Sonny with its built-in launcher hidden -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['Sonny']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','sonny','https://www.usesonny.com/widget.js');
  sonny('init', { siteId: 'YOUR_SITE_ID', hideLauncher: true });
</script>

<!-- 2. Open the chat from your own button, anywhere on the page -->
<button onclick="sonny('open')">Chat with us</button>

Met deze commando's bedien je de widget vanaf elke plek op je pagina:

• sonny('open') — opent het chatvenster.
• sonny('close') — sluit het.
• sonny('toggle') — opent of sluit het, ideaal voor één schakelknop.
• sonny('show') en sonny('hide') — tonen of verbergen de hele widget en gaan voor je weergaveregels.
• sonny('getUnreadCount', callback) — leest op elk moment het huidige aantal ongelezen berichten.

Liever de installatie met één scripttag? Voeg data-hide-launcher toe aan de scripttag om de launcher te verbergen en koppel je knop daarna aan dezelfde commando's.

Toon ongelezen antwoorden op je eigen knop

Als je de launcher verbergt, verdwijnt ook de badge met ongelezen berichten. Daarom laat Sonny het je pagina weten. De widget verstuurt een sonny:unread-event op window met detail.count — hetzelfde aantal dat de ingebouwde launcher zou tonen. Perfect voor een badge in je eigen mobiele navigatie.

<button id="chat-button" onclick="sonny('open')">
  Chat with us
  <span id="chat-unread" hidden></span>
</button>

<script>
  function showUnread(count) {
    var badge = document.getElementById('chat-unread');
    badge.textContent = count > 9 ? '9+' : count;
    badge.hidden = count === 0;
  }

  // Fires once after the widget loads, then on every change.
  window.addEventListener('sonny:unread', function (event) {
    showUnread(event.detail.count);
  });

  // Optional: read the count on demand (e.g. after your own nav re-renders).
  sonny('getUnreadCount', showUnread);
</script>

Het aantal telt ongelezen antwoorden van medewerkers in alle gesprekken van de bezoeker. Het event gaat één keer af kort nadat de widget is geladen — zodat een listener die je bij het laden van de pagina toevoegt altijd de actuele stand krijgt — en daarna telkens als het aantal verandert, ook terug naar 0 zodra de bezoeker de chat opent.

Aanpassingsopties

Pas de widget aan via het tabblad "Livechat" van je kanaal in Sonny.

Volgende stappen

Je widget is geïnstalleerd. Stel nu ook het doorsturen van e-mail in.

Gerelateerde handleidingen

• Widget aanpassen

  Stem de widget af op je merk met kleuren, logo's, berichten en gedrag.

• Bezoekers identificeren

  Identificeer ingelogde gebruikers en stuur aangepaste kenmerken vanaf je website.

• Waar de widget verschijnt

  Toon of verberg de widget per pagina, bezoeker, URL-parameter, datum, schema, apparaat of tijd op de pagina.

• Mobiele chat-SDK's

  Voeg bezoekerschat toe aan je iOS-, Android- of React Native-app. Bekijk de openbare SDK's, voorbeeldapps en issuetrackers.

• E-mail instellen

  Stuur je support-e-mail door naar Sonny en beheer e-mail naast livechat.

• Kanalen

  Maak en beheer de plekken waar klanten je bereiken via livechat en e-mail.