Das Widget einbinden
Das Hinzufügen des Deskwoot Chat-Widgets zu Ihrer Website erfordert nur eine Zeile Code. Das Widget lädt asynchron und beeinträchtigt nicht die Ladegeschwindigk
Das Deskwoot-Chat-Widget zu deiner Website hinzuzufügen, braucht nur eine einzige Zeile Code. Das Widget lädt asynchron und beeinträchtigt die Ladegeschwindigkeit deiner Seite nicht.
JavaScript-Einbettungscode
Nachdem du einen Website-Posteingang erstellt hast, erzeugt Deskwoot einen JavaScript-Schnipsel. Kopiere ihn unter Einstellungen > Posteingänge > dein Posteingang > Konfiguration. Der Schnipsel sieht so aus: <script src="https://deskwoot.com/widget.js" data-token="YOUR_WIDGET_TOKEN" async></script>. Füge diesen Code vor dem schließenden </body>-Tag auf jeder Seite ein, auf der das Widget erscheinen soll.
Widget-Token
Das Attribut data-token im Einbettungscode ist die eindeutige Kennung deines Widgets. Es verbindet das Widget mit deinem konkreten Posteingang. Du findest es in den Einstellungen deines Posteingangs. Behalte es in deinem Frontend-Code. Es kann gefahrlos öffentlich sichtbar sein, da es Besuchern nur erlaubt, Gespräche zu starten.
React und Next.js
Füge bei React-Anwendungen das Script-Tag in deine index.html ein oder nutze einen useEffect-Hook, um es dynamisch zu laden. Verwende in Next.js die Script-Komponente aus next/script mit strategy='afterInteractive' für optimales Laden. Platziere sie in deiner layout.tsx oder _app.tsx, damit das Widget auf allen Seiten lädt.
WordPress
Gehe in WordPress zu Design > Theme-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, um den Code hinzuzufügen, ohne Theme-Dateien zu bearbeiten. Wenn du einen Seitenbaukasten wie Elementor verwendest, füge ein HTML-Widget mit dem Script-Code 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, und es bleibt über Routenwechsel hinweg bestehen. Nutze das globale Objekt window.deskwootSettings, um Nutzerdaten zu übergeben oder das Widget programmatisch zu konfigurieren.