Widget installieren

Einfache Installation

Füge diesen Script-Tag direkt vor dem schließenden </body>-Tag in deine Website ein:

<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 mit automatischer Initialisierung

Du kannst auch einen einzelnen Script-Tag verwenden, wenn du keine Befehle vor dem Laden des Widgets einreihen musst:

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

Besucher identifizieren & benutzerdefinierte Attribute senden

Sobald sich ein Nutzer auf deiner Website anmeldet, ruf sonny('identify') mit seiner E-Mail-Adresse und allen zusätzlichen Daten auf, die dein Support-Team sehen soll. Übergib zusätzliche Felder unter attributes – neue Schlüssel werden automatisch als benutzerdefinierte Felder angelegt und rechts neben der Unterhaltung angezeigt. Spätere Aufrufe überschreiben den vorherigen Wert.

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

Unterstützte Werttypen: String, Zahl, Boolean, ISO-8601-Datum, URL. Übergib null, um ein Attribut zu löschen. Schlüssel müssen mit einem Buchstaben beginnen, dürfen nur Buchstaben, Ziffern oder Unterstriche enthalten und höchstens 64 Zeichen lang sein. Die Schlüssel email, name, id, phone, createdAt und updatedAt sind reserviert. Textwerte sind auf 1.000 Zeichen begrenzt. Limit: 50 Attribute pro Aufruf.

Widget über einen eigenen Button öffnen

Du möchtest den Chat über deinen eigenen Button statt über die schwebende Sprechblase öffnen? Übergib hideLauncher: true an sonny('init'), um den integrierten Launcher auszublenden, und ruf dann sonny('open') von einem beliebigen Element auf deiner Seite auf.

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

Mit diesen Befehlen steuerst du das Widget von überall auf deiner Seite:

• sonny('open') – öffnet das Chatfenster.
• sonny('close') – schließt es.
• sonny('toggle') – öffnet bzw. schließt es im Wechsel, ideal für einen einzelnen Umschalt-Button.
• sonny('show') und sonny('hide') – zeigt das ganze Widget an oder blendet es aus und übersteuert dabei deine Anzeigeregeln.
• sonny('getUnreadCount', callback) – liest jederzeit die aktuelle Anzahl ungelesener Nachrichten aus.

Du bevorzugst die Installation mit einem einzelnen Script-Tag? Ergänze den Script-Tag um data-hide-launcher, um den Launcher auszublenden, und verbinde deinen Button dann mit denselben Befehlen.

Ungelesene Antworten an deinem eigenen Button anzeigen

Wenn du den Launcher ausblendest, verschwindet auch sein Badge für ungelesene Nachrichten – deshalb informiert Sonny stattdessen deine Seite. Das Widget löst ein sonny:unread-Event auf window mit detail.count aus – dieselbe Zahl, die der integrierte Launcher anzeigen würde. Perfekt für ein Badge in deiner eigenen mobilen Navigation.

<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 Zahl umfasst ungelesene Agenten-Antworten aus allen Unterhaltungen des Besuchers. Das Event wird kurz nach dem Laden des Widgets einmal ausgelöst – ein beim Seitenaufruf registrierter Listener erhält also immer den aktuellen Stand – und danach bei jeder Änderung, auch zurück auf 0, sobald der Besucher den Chat öffnet.

Anpassungsoptionen

Pass das Widget in Sonny im Tab „Live-Chat“ deines Kanals an.

Nächste Schritte

Dein Widget ist installiert – richte jetzt auch die E-Mail-Weiterleitung ein.

Verwandte Anleitungen

• Widget anpassen

  Pass das Widget mit Farben, Logos, Nachrichten und Verhalten an deine Marke an.

• Besucher identifizieren

  Identifiziere angemeldete Nutzer und sende benutzerdefinierte Attribute von deiner Website.

• Festlegen, wo das Widget erscheint

  Zeig das Widget an oder blende es aus – nach Seite, Besucher, URL-Parameter, Datum, Zeitplan, Gerät oder Verweildauer.

• Mobile Chat-SDKs

  Bau den Besucher-Chat in deine iOS-, Android- oder React-Native-App ein. Mit öffentlichen SDKs, Beispiel-Apps und Issue-Trackern.

• E-Mail einrichten

  Leite deine Support-E-Mails an Sonny weiter und bearbeite E-Mails zusammen mit dem Live-Chat.

• Kanäle

  Erstelle und verwalte die Orte, an denen Kunden dich per Live-Chat und E-Mail erreichen.