Widget-installering

Basiese installering

Voeg hierdie skripmerker by jou webwerf, net voor die sluitende </body>-merker:

<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>

Brokkie met outomatiese inisialisering

Jy kan ook een skripmerker gebruik as jy nie opdragte in 'n tou hoef te plaas voordat die widget laai nie:

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

Identifiseer besoekers en stuur pasgemaakte eienskappe

Sodra 'n gebruiker op jou webwerf aanmeld, roep sonny('identify') met hul e-pos en enige ekstra data wat jy wil hê jou ondersteuningspan moet sien. Gee ekstra velde onder attributes deur — nuwe sleutels word outomaties as pasgemaakte velde geskep en aan die regterkant van die gesprek gewys. Daaropvolgende oproepe oorskryf die vorige waarde.

<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 waardetipes: string, getal, boolean, ISO-8601-datum, URL. Gee null deur om 'n eienskap skoon te maak. Sleutels moet met 'n letter begin, net letters, syfers of onderstrepe gebruik en hoogstens 64 karakters lank wees. Die sleutels email, name, id, phone, createdAt en updatedAt is gereserveer. Tekswaardes is beperk tot 1 000 karakters. Limiet: 50 eienskappe per oproep.

Maak die widget oop met jou eie knoppie

Wil jy klets met jou eie knoppie begin in plaas van die swewende borrel? Gee hideLauncher: true aan sonny('init') om die ingeboude lanseerder te versteek, en roep dan sonny('open') vanaf enige element op jou bladsy.

<!-- 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>

Hierdie opdragte beheer die widget van enige plek op jou bladsy:

• sonny('open') — maak die kletspaneel oop.
• sonny('close') — maak dit toe.
• sonny('toggle') — wissel tussen oop en toe, ideaal vir 'n enkele wisselknoppie.
• sonny('show') en sonny('hide') — wys of versteek die hele widget, wat jou vertoonreëls oorskryf.
• sonny('getUnreadCount', callback) — lees die huidige aantal ongeleeste boodskappe enige tyd.

Verkies jy die installering met een skripmerker? Voeg data-hide-launcher by die skripmerker om die lanseerder te versteek, en koppel dan jou knoppie aan dieselfde opdragte.

Wys ongeleeste antwoorde op jou eie knoppie

Om die lanseerder te versteek, versteek ook sy ongeleeste-kenteken, so Sonny laat eerder jou bladsy weet. Die widget stuur 'n sonny:unread-gebeurtenis op window met detail.count — dieselfde getal wat die ingeboude lanseerder sou wys. Perfek vir 'n kenteken op jou eie mobiele navigasie.

<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>

Die telling dek ongeleeste agentantwoorde oor die besoeker se gesprekke. Dit vuur een keer kort nadat die widget gelaai het — so 'n luisteraar wat by bladsylaai bygevoeg word, kry altyd die huidige toestand — en dan weer wanneer dit verander, insluitend terug na 0 sodra die besoeker die klets oopmaak.

Aanpassingsopsies

Pas die widget aan vanaf jou kanaal se "Regstreekse klets"-oortjie in Sonny.

Volgende stappe

Noudat jou widget geïnstalleer is, stel ook e-posaanstuur op.

Verwante dokumentasie

• Widget-aanpassing

  Pas die widget by jou handelsmerk aan met kleure, logo's, boodskappe en gedrag.

• Besoekeridentifikasie

  Identifiseer aangemelde gebruikers en stuur pasgemaakte eienskappe vanaf jou webwerf.

• Waar die widget verskyn

  Wys of versteek die widget volgens bladsy, besoeker, URL-parameter, datum, skedule, toestel of tyd op bladsy.

• Mobiele klets-SDK's

  Voeg besoekerklets by jou iOS-, Android- of React Native-app. Blaai deur die openbare SDK's, voorbeeldapps en probleemopspoorders.

• E-pos-opstelling

  Stuur jou ondersteunings-e-pos na Sonny aan en bestuur e-pos saam met regstreekse klets.

• Kanale

  Skep en bestuur die plekke waar kliënte jou per regstreekse klets en e-pos bereik.