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 website inbox, Deskwoot generates a JavaScript snippet. Copy it from Settings > Inboxes > your inbox > Configuration. The snippet looks like this: <script src="https://deskwoot.com/widget.js" data-token="YOUR_WIDGET_TOKEN" async></script>. Paste this code before the closing </body> tag on every page where you want the widget to appear.

Widget token

The data-token attribute 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 to pass user data or configure the widget programmatically.