Installation du widget

Installation de base

Ajoutez cette balise script à votre site, juste avant la balise fermante </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>

Extrait à initialisation automatique

Vous pouvez aussi utiliser une seule balise script si vous n'avez pas besoin de mettre des commandes en file d'attente avant le chargement du widget :

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

Identifier les visiteurs et envoyer des attributs personnalisés

Dès qu'un utilisateur se connecte à votre site, appelez sonny('identify') avec son e-mail et toute donnée supplémentaire que votre équipe de support doit voir. Transmettez les champs supplémentaires sous attributes — les nouvelles clés sont créées automatiquement comme champs personnalisés et affichées à droite de la conversation. Les appels suivants écrasent la valeur précédente.

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

Types de valeurs pris en charge : chaîne, nombre, booléen, date ISO-8601, URL. Passez null pour effacer un attribut. Les clés doivent commencer par une lettre, ne contenir que des lettres, des chiffres ou des tirets bas, et compter au plus 64 caractères. Les clés email, name, id, phone, createdAt et updatedAt sont réservées. Les valeurs texte sont limitées à 1 000 caractères. Limite : 50 attributs par appel.

Ouvrir le widget depuis votre propre bouton

Vous voulez lancer le chat depuis votre propre bouton plutôt que depuis la bulle flottante ? Passez hideLauncher: true à sonny('init') pour masquer le lanceur intégré, puis appelez sonny('open') depuis n'importe quel élément de votre page.

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

Ces commandes contrôlent le widget depuis n'importe où sur votre page :

• sonny('open') — ouvre le panneau de chat.
• sonny('close') — le ferme.
• sonny('toggle') — l'ouvre ou le ferme, idéal pour un bouton bascule unique.
• sonny('show') et sonny('hide') — affichent ou masquent tout le widget, en passant outre vos règles d'affichage.
• sonny('getUnreadCount', callback) — lit à tout moment le nombre actuel de messages non lus.

Vous préférez l'installation en une seule balise script ? Ajoutez data-hide-launcher à la balise script pour masquer le lanceur, puis reliez votre bouton aux mêmes commandes.

Afficher les réponses non lues sur votre propre bouton

Masquer le lanceur masque aussi sa pastille de non-lus : Sonny en informe donc votre page. Le widget déclenche un événement sonny:unread sur window avec detail.count — le même nombre que celui qu'afficherait le lanceur intégré. Parfait pour une pastille sur votre propre navigation mobile.

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

Le compteur couvre les réponses d'agents non lues dans toutes les conversations du visiteur. Il est émis une première fois peu après le chargement du widget — un écouteur ajouté au chargement de la page obtient donc toujours l'état actuel — puis à chaque changement, y compris le retour à 0 quand le visiteur ouvre le chat.

Options de personnalisation

Personnalisez le widget depuis l'onglet « Chat en direct » de votre canal dans Sonny.

Étapes suivantes

Maintenant que votre widget est installé, configurez aussi le transfert d'e-mails.

Documentation associée

• Personnalisation du widget

  Adaptez le widget à votre marque : couleurs, logos, messages et comportement.

• Identification des visiteurs

  Identifiez les utilisateurs connectés et envoyez des attributs personnalisés depuis votre site.

• Où le widget apparaît

  Affichez ou masquez le widget selon la page, le visiteur, un paramètre d'URL, la date, l'horaire, l'appareil ou le temps passé sur la page.

• SDK de chat mobile

  Ajoutez le chat visiteur à votre application iOS, Android ou React Native. Parcourez les SDK publics, les applications d'exemple et les outils de suivi des problèmes.

• Configuration de l'e-mail

  Transférez votre e-mail de support vers Sonny et gérez l'e-mail à côté du chat en direct.

• Canaux

  Créez et gérez les points de contact où vos clients vous joignent par chat en direct et par e-mail.