JavaScript-Chat-Widget

Füge dieses Snippet in dein Seiten-Template ein, idealerweise direkt vor dem schließenden </body>-Tag. Es lädt das Widget asynchron, sodass es das Rendering nicht blockiert.

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN"
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

Das war's — die Chat-Bubble erscheint sofort in der unteren rechten Ecke. Kein npm-Paket, kein Bundler, kein Build-Step. Funktioniert in Next.js, React, Vue, Shopify-Themes, WordPress, plain HTML, überall wo JavaScript läuft.

1. Logge dich ins Deskwoot-Dashboard ein (als Kontoinhaber, nicht als Endbesucher — das Widget selbst erfordert kein Endnutzer-Login).
2. Gehe zu Einstellungen → Posteingänge.
3. Erstelle einen neuen Posteingang vom Typ Website oder öffne den vorhandenen.
4. Öffne den Install-Tab — das fertig zum Einfügen vorbereitete Snippet mit deinem inbox-spezifischen widgetToken wird dort angezeigt. Kopiere es unverändert.

Ein widgetToken = ein Posteingang. Konversationen aus diesem Widget landen immer in diesem Posteingang, wo deine Agenten sie aufnehmen. Um zu einem anderen Team oder einer anderen Agentengruppe zu routen, erstelle einen zweiten Posteingang und verwende seinen Token auf einer anderen Seite.

Alle Laufzeitoptionen liegen auf window.deskwootSettings. Nur widgetToken ist erforderlich; alles andere hat einen sinnvollen Standardwert.

window.deskwootSettings = {
  widgetToken: "YOUR_WIDGET_TOKEN",
  color: "#2563EB",
  darkMode: false,
  position: "right",
  welcomeTitle: "Hi there!",
  welcomeMessage: "How can we help?",
  user: {
    email: "jane@example.com",
    name: "Jane Doe"
  }
};

Wenn der Besucher bereits auf deiner Site eingeloggt ist, übergib seine Kontaktdaten, damit die Konversation mit vollem Kontext ankommt statt als anonymer Besucher.

window.deskwootSettings = {
  widgetToken: "...",
  user: {
    email: "jane@example.com",
    name: "Jane Doe"
  }
};

Deskwoot ordnet Besucher per E-Mail zu. Wenn ein Kontakt mit dieser E-Mail bereits im Konto existiert, wird das Widget an denselben Kontaktdatensatz angehängt — alle vergangenen Konversationen, Notizen und benutzerdefinierten Attribute sind für den antwortenden Agenten sichtbar.

Nach dem Laden des Skripts stellt window.deskwootWidget eine Handvoll Methoden bereit, um das Widget aus deiner eigenen UI zu steuern — zum Beispiel ein „Kontakt"-Link in der Navigation, der das Panel öffnen soll, statt zu einer Supportseite zu navigieren.

// All methods wait until the widget has finished loading.
window.deskwootWidget.open();    // expand the chat panel
window.deskwootWidget.close();   // collapse the chat panel
window.deskwootWidget.toggle();  // open if closed, close if open

// Current unread agent-message count for this visitor:
console.log(window.__deskwootUnread);

Setze embedded: true, wenn du das Widget innerhalb eines Containers hostest, der den vollen Viewport beanspruchen soll — typischerweise eine Mobile-App-WebView, ein ganzseitiger Kontaktbildschirm oder ein Modal, das bereits eigene Chrome-Elemente bereitstellt.

Im Embedded-Modus sind Launcher-Bubble, Trigger-Popup und Schließen-Button ausgeblendet, und das Panel dehnt sich auf position:fixed; inset:0 ohne Schatten, ohne Border-Radius, ohne 20px-Offset. Die Deskwoot-iOS-App nutzt genau diesen Modus in ihrem eingebauten Kontakt-Support-Bildschirm.

<button onclick="window.deskwootWidget.open()">Contact Support</button>

Empfohlene Platzierungen

Drei Muster, die wir für In-App-Support gut funktionieren sehen:

<a href="#" onclick="window.deskwootWidget.open(); return false;" class="nav-item">
  <svg class="icon"><!-- chat-bubble icon --></svg>
  Contact Support
</a>

<div role="menuitem" onclick="window.deskwootWidget.open()">
  Chat with support
  <span class="kbd">?</span>
</div>

<button
  onclick="window.deskwootWidget.open()"
  style="position:fixed;bottom:20px;right:20px;background:#2563eb;color:#fff;border:0;border-radius:9999px;padding:12px 18px;box-shadow:0 6px 20px rgba(0,0,0,.15);cursor:pointer;font-weight:600"
>
  💬 Help
</button>

Tipps

• Rufe deskwootWidget.toggle() statt open() auf, wenn derselbe Trigger das Panel schließen soll, wenn es bereits offen ist.
• Zeige ein Ungelesen-Badge auf deinem Trigger mit window.__deskwootUnread — eine Zahl, die aktualisiert wird, während das Panel geschlossen ist.
• Platziere den Trigger konsistent über authentifizierte Seiten hinweg, damit Nutzer immer wissen, wo sie Support finden. Die globale Position hört auf, „versteckter Chat" zu sein, und wird zu „sichtbarer Support-Button".

Für die Standard- (nicht-embedded-) Website-Installation brauchst du nicht keinen eigenen Trigger — deskwoot.js rendert die Bubble selbst und behandelt den Klick.

Wenn deine Site mit einem CSP-Header läuft, whiteliste Deskwoots Origin. Typische minimale Konfiguration:

script-src  https://deskwoot.com;
connect-src https://deskwoot.com wss://deskwoot.com;
img-src     https://deskwoot.com data:;
style-src   'unsafe-inline';

style-src 'unsafe-inline' ist erforderlich, weil das Widget sein eigenes Stylesheet einfügt. Wenn deine CSP Inline-Styles verbietet, können wir auf eine Nonce wechseln — schreib uns unter hello@deskwoot.com.