Öffne im Theme-Editor die Datei theme.liquid, füge den Code vor ein und speichere. Das Widget erscheint dann auf jeder Shop-Seite.

Das Widget einbinden

Q: Kann ich das Widget mit JavaScript steuern?

Ja, mit window.deskwootWidget.open(), .close() und .toggle(). Details und Beispiele stehen im Artikel zum programmatischen Öffnen des Chat-Widgets.

Aktualisiert am 20.10.20264 Min. Lesezeit

Deutsch

Auf dieser Seite

Das Chat-Widget bindest du mit einem einzigen Code-Schnipsel in deine Website ein. Ein kurzes Script vor dem schließenden </body>-Tag, fertig. Das funktioniert auf jeder Website: WordPress, Shopify, Webflow, eigener Code oder statische HTML-Seiten. Mehrere Widgets sind möglich, zum Beispiel ein anderes Widget auf der Marketing-Website als in deiner App. Der Schnipsel übernimmt die Einstellungen, die du im Posteingang festgelegt hast.

Das Deskwoot-Chat-Widget zu deiner Website hinzuzufügen, braucht nur einen kurzen Code-Schnipsel. Das Widget lädt asynchron und bremst deine Seite nicht aus.

JavaScript-Einbettungscode

Nachdem du einen Live-Chat-Posteingang erstellt hast, erzeugt Deskwoot einen JavaScript-Schnipsel. Du kopierst ihn unter Einstellungen > Posteingänge > dein Posteingang > Tab Einstellungen > Widget installieren. Der Schnipsel ist ein kurzes Inline-Script: Er setzt window.deskwootSettings = { widgetToken: "YOUR_WIDGET_TOKEN" } und lädt dann https://deskwoot.com/widget/deskwoot-loader.js asynchron. Füge diesen Code auf jeder Seite, auf der das Widget erscheinen soll, vor dem schließenden </body>-Tag ein.

Der Wert widgetToken im Einbettungscode ist die eindeutige Kennung deines Widgets. Er verbindet das Widget mit deinem Posteingang. Du findest ihn in den Einstellungen deines Posteingangs. Er gehört in deinen Frontend-Code und darf öffentlich sichtbar sein, denn er erlaubt Besuchern nur, Konversationen zu starten.

React und Next.js

In React-Anwendungen fügst du das Script in deine index.html ein oder lädst es mit einem useEffect-Hook dynamisch. In Next.js nutzt du die Script-Komponente aus next/script mit strategy='afterInteractive'. Platziere sie in deiner layout.tsx oder _app.tsx, damit das Widget auf allen Seiten lädt.

WordPress

Gehe in WordPress zu Design > Theme-Datei-Editor und öffne die Datei footer.php. Füge das Widget-Script vor dem schließenden </body>-Tag ein. Alternativ kannst du ein Plugin wie „Insert Headers and Footers“ nutzen und den Code einfügen, ohne Theme-Dateien zu bearbeiten. Wenn du einen Page Builder wie Elementor verwendest, füge ein HTML-Widget mit dem Script hinzu.

Single-Page-Anwendungen

Das Deskwoot-Widget funktioniert mit allen SPA-Frameworks, darunter React, Vue, Angular und Svelte. Lade das Script einmal in deiner App-Shell, dann bleibt es bei Routenwechseln erhalten. Über das globale Objekt window.deskwootSettings übergibst du Optionen wie eine signierte Nutzeridentität, mit window.deskwoot öffnest, schließt oder wechselst du das Widget aus deinem Code.

Häufige Fragen

Wo finde ich den Einbettungscode?

Unter Einstellungen > Posteingänge: Öffne deinen Live-Chat-Posteingang, dann im Tab Einstellungen den Bereich Widget installieren. Kopieren, in deine Website einfügen, fertig.

Wo muss der Schnipsel hin?

Am besten direkt vor das schließende </body>-Tag deiner Seite. Im <head> funktioniert er auch, weil das Script asynchron lädt.

Funktioniert das mit WordPress?

Ja. Entweder über die footer.php deines Themes (vor </body>), über einen Block „Individuelles HTML“ oder mit einem Plugin wie „Insert Headers and Footers“. Alle drei Wege funktionieren.

Und mit Shopify?

Öffne im Theme-Editor die Datei theme.liquid, füge den Code vor </body> ein und speichere. Das Widget erscheint dann auf jeder Shop-Seite.

Lädt das Widget asynchron?

Ja. Das Script blockiert das Rendern der Seite nicht und lädt nach den wichtigen Ressourcen. Die Ladezeit deiner Seite bleibt also praktisch gleich.

Kann ich das Widget nur auf bestimmten Seiten zeigen?

Ja. Binde den Schnipsel nur dort ein, wo du ihn brauchst, zum Beispiel in einem Footer-Template, das nur auf bestimmten Seiten geladen wird. Chat-Trigger mit einer URL-Bedingung zeigen eine proaktive Nachricht nur auf bestimmten Seiten, blenden das Widget aber nicht aus.

Was ist, wenn ich mehrere Posteingänge habe?

Jeder Live-Chat-Posteingang hat seinen eigenen Schnipsel mit eigenem Token. Pro Seite läuft nur ein Widget. Üblich ist ein Widget pro Website oder Domain.

Funktioniert das Widget in Iframes?

Ja, aber in einem Iframe sind manche Funktionen eingeschränkt (kein proaktives automatisches Öffnen). Die meisten Teams binden das Widget in die übergeordnete Seite ein, Iframes nutzen sie vor allem zum Testen.

Kann ich das Widget mit JavaScript steuern?

Ja, mit window.deskwootWidget.open(), .close() und .toggle(). Details und Beispiele stehen im Artikel zum programmatischen Öffnen des Chat-Widgets.

Werden die Daten DSGVO-konform übertragen?

Ja. Das Widget lädt von deskwoot.com, die Daten liegen auf Servern in der EU (Niederlande). Standardmäßig setzt das Widget kein Tracking-Cookie, sondern speichert nur ein anonymes Besucher-Token im LocalStorage.

Wie finde ich den Fehler, wenn das Widget nicht erscheint?

Öffne die Entwicklertools deines Browsers und dort die Konsole. Lädt das Script, aber das Widget erscheint nicht, prüfe, ob CSS deiner Seite stört (zum Beispiel overflow:hidden auf einem übergeordneten Element). Lädt das Script nicht, prüfe die Position des Schnipsels und deine Content Security Policy.

War diese Anleitung hilfreich?

Fynn zu dieser Anleitung fragen

Kurze Antwort aus dieser Anleitung und dem restlichen Hilfecenter.