Widget einbetten

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 Ladegeschwindigkeit Ihrer Seite.

JavaScript-Einbettungscode

Nach dem Erstellen eines Website-Posteingangs generiert Deskwoot ein JavaScript-Snippet. Kopieren Sie es aus Einstellungen > Posteingänge > Ihr Posteingang > Konfiguration. Das Snippet sieht so aus: <script src="https://deskwoot.com/widget.js" data-token="IHR_WIDGET_TOKEN" async></script>. Fügen Sie diesen Code vor dem schließenden </body>-Tag auf jeder Seite ein, auf der das Widget erscheinen soll.

Widget-Token

Das data-token-Attribut im Einbettungscode ist die eindeutige Kennung Ihres Widgets. Es verbindet das Widget mit Ihrem spezifischen Posteingang. Sie finden es in Ihren Posteingangs-Einstellungen. Es kann bedenkenlos im Frontend-Code verwendet werden, da es Besuchern nur erlaubt, Unterhaltungen zu starten.

React und Next.js

Für React-Anwendungen fügen Sie das Script-Tag in Ihre index.html ein oder verwenden Sie einen useEffect-Hook zum dynamischen Laden. In Next.js verwenden Sie die Script-Komponente von next/script mit strategy='afterInteractive' für optimales Laden. Platzieren Sie es in Ihrer layout.tsx oder _app.tsx, um das Widget auf allen Seiten zu laden.

WordPress

Gehen Sie in WordPress zu Design > Theme-Editor und öffnen Sie die Datei footer.php. Fügen Sie das Widget-Script vor dem schließenden </body>-Tag ein. Alternativ verwenden Sie ein Plugin wie 'Insert Headers and Footers', um den Code hinzuzufügen, ohne Theme-Dateien zu bearbeiten. Wenn Sie einen Page Builder wie Elementor verwenden, fügen Sie ein HTML-Widget mit dem Script-Code hinzu.

Single-Page-Anwendungen

Das Deskwoot-Widget funktioniert mit allen SPA-Frameworks einschließlich React, Vue, Angular und Svelte. Laden Sie das Script einmal in Ihrer App-Shell und es bleibt über Routenwechsel bestehen. Verwenden Sie das globale window.deskwootSettings-Objekt, um Benutzerdaten zu übergeben oder das Widget programmatisch zu konfigurieren.