Installazione del widget

Installazione di base

Aggiungi questo tag script al tuo sito web, subito prima del tag di chiusura </body>:

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

Snippet con inizializzazione automatica

Puoi anche usare un solo tag script se non devi mettere in coda comandi prima che il widget si carichi:

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

Identifica i visitatori e invia attributi personalizzati

Quando un utente accede al tuo sito, chiama sonny('identify') con la sua email e gli eventuali dati aggiuntivi che vuoi far vedere al tuo team di assistenza. Passa i campi aggiuntivi in attributes: le nuove chiavi vengono create automaticamente come Campi personalizzati e mostrate sul lato destro della conversazione. Le chiamate successive sovrascrivono il valore precedente.

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

Tipi di valore supportati: stringa, numero, booleano, data ISO-8601, URL. Passa null per cancellare un attributo. Le chiavi devono iniziare con una lettera, usare solo lettere, numeri o trattini bassi ed essere lunghe al massimo 64 caratteri. Le chiavi email, name, id, phone, createdAt e updatedAt sono riservate. I valori di testo sono limitati a 1.000 caratteri. Limite: 50 attributi per chiamata.

Apri il widget dal tuo pulsante

Vuoi aprire la chat dal tuo pulsante invece che dalla bolla fluttuante? Passa hideLauncher: true a sonny('init') per nascondere il pulsante di avvio integrato, poi chiama sonny('open') da qualsiasi elemento della 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>

Questi comandi controllano il widget da qualsiasi punto della pagina:

• sonny('open'): apre il pannello della chat.
• sonny('close'): lo chiude.
• sonny('toggle'): lo apre o lo chiude, ideale per un unico pulsante di attivazione.
• sonny('show') e sonny('hide'): mostrano o nascondono l'intero widget, ignorando le tue regole di visualizzazione.
• sonny('getUnreadCount', callback): legge in qualsiasi momento il numero attuale di messaggi non letti.

Preferisci l'installazione con un solo tag script? Aggiungi data-hide-launcher al tag script per nascondere il pulsante di avvio, poi collega il tuo pulsante agli stessi comandi.

Mostra le risposte non lette sul tuo pulsante

Nascondendo il pulsante di avvio si nasconde anche il suo badge dei non letti, quindi Sonny lo comunica alla tua pagina. Il widget invia un evento sonny:unread su window con detail.count, lo stesso numero che mostrerebbe il pulsante di avvio integrato. Perfetto per un badge nella navigazione mobile del tuo sito.

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

Il conteggio comprende le risposte non lette degli agenti in tutte le conversazioni del visitatore. Viene emesso una volta poco dopo il caricamento del widget, così un listener aggiunto al caricamento della pagina riceve sempre lo stato attuale, e poi di nuovo a ogni variazione, compreso il ritorno a 0 quando il visitatore apre la chat.

Opzioni di personalizzazione

Personalizza il widget dalla scheda "Chat dal vivo" del tuo canale in Sonny.

Prossimi passi

Ora che il widget è installato, configura anche l'inoltro email.

Guide correlate

• Personalizzazione del widget

  Adatta il widget al tuo brand con colori, logo, messaggi e comportamento.

• Identificazione dei visitatori

  Identifica gli utenti che hanno effettuato l'accesso e invia attributi personalizzati dal tuo sito web.

• Dove compare il widget

  Mostra o nascondi il widget in base a pagina, visitatore, parametro URL, data, programmazione, dispositivo o tempo sulla pagina.

• SDK di chat per app mobili

  Aggiungi la chat con i visitatori alla tua app iOS, Android o React Native. Esplora gli SDK pubblici, le app di esempio e gli issue tracker.

• Configurazione dell'email

  Inoltra la tua email di assistenza a Sonny e gestisci le email insieme alla live chat.

• Canali

  Crea e gestisci i punti in cui i clienti ti contattano via live chat ed email.