Embedding the Widget

Adding the Deskwoot chat widget to your website takes just one line of code. The widget loads asynchronously and does not affect your page load performance.

JavaScript embed code

After creating a live chat inbox, Deskwoot generates a JavaScript snippet. Copy it from Settings > Inboxes > your inbox > Settings tab > Widget Installation. The snippet is a short inline script: it sets window.deskwootSettings = { widgetToken: "YOUR_WIDGET_TOKEN" } and then loads https://deskwoot.com/widget/deskwoot-loader.js asynchronously. Paste this code before the closing </body> tag on every page where you want the widget to appear.

Widget token

The widgetToken value in the embed code is your widget's unique identifier. It connects the widget to your specific inbox. You can find it in your inbox settings. Keep it in your frontend code: it is safe to expose publicly as it only allows visitors to start conversations.

React and Next.js

For React applications, add the script tag to your index.html or use a useEffect hook to load it dynamically. In Next.js, use the Script component from next/script with strategy='afterInteractive' for optimal loading. Place it in your layout.tsx or _app.tsx to load the widget on all pages.

WordPress

In WordPress, go to Appearance > Theme Editor and open the footer.php file. Paste the widget script before the closing </body> tag. Alternatively, use a plugin like 'Insert Headers and Footers' to add the code without editing theme files. If you use a page builder like Elementor, add an HTML widget with the script code.

Single-page applications

The Deskwoot widget works with all SPA frameworks including React, Vue, Angular, and Svelte. Load the script once in your app shell and it persists across route changes. Use the global window.deskwootSettings object for options such as a signed user identity, and window.deskwoot to open, close or toggle the widget from your code.

Frequently asked questions