Embedding the Widget

Updated Oct 20, 20264 min read

English

On this page

Embedding the chat widget is one snippet of code on your site. Paste it before the closing </body> tag (or use Google Tag Manager) and the widget is live. No build step, no NPM package needed. Works on every CMS: WordPress, Webflow, Shopify, Wix, plain HTML, anything that lets you inject a script tag.

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.

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

Where do I find my embed snippet?

Settings → Inboxes → your live chat inbox → Settings tab → Widget Installation. The snippet is pre-filled with your widget token; just copy and paste.

Where on the page does the snippet go?

Anywhere before </body>. The widget loads lazily, so position doesn't affect first-paint performance. Many sites use Google Tag Manager and skip touching the HTML directly.

How do I install it on WordPress?

Use a Header/Footer code snippet plugin (e.g. WPCode), paste the snippet in the 'Body' or 'Footer' slot, save. No plugin? Edit your theme's footer.php and paste before </body>.

How do I install it on Shopify?

Online Store → Themes → Edit code → theme.liquid → paste before </body>. The widget shows on every storefront page automatically.

How do I install it on Webflow?

Project Settings → Custom Code → Footer Code → paste the snippet. Publish to apply.

Can I install via Google Tag Manager?

Yes, recommended for marketing teams. Create a Custom HTML tag with the snippet, fire on all pages, publish. No dev work needed.

Does the widget conflict with other chat scripts?

Usually no. The widget runs inside its own iframes, so its styles don't mix with your site's CSS, and it uses a high z-index (around 2 billion) so it sits above your site's elements. If you see overlap with another script using a similar z-index, the cleanest fix is to remove the other chat script: you don't need two.

Can I install the widget on multiple domains?

Yes, the same snippet works on any number of domains. If you want different colors or welcome messages per brand, create separate inboxes and use the matching snippet per site.

How do I identify the logged-in user to the widget?

Use identity verification: set `window.deskwootSettings.user` before the snippet (or call `window.deskwoot.identify(user)` after login) with `identifier` (your user ID), `identifierHash` (an HMAC SHA256 of the identifier that your server signs with the inbox secret from the Pre Chat Form tab) and optionally `email` and `name`. Verified visitors chat under their real name and email and skip the pre-chat form. You can also send `attributes`, such as the user's plan. To let Fynn answer the visitor from them in the live chat, sign them on your server with `attributesHash`; attributes without a signature are only shown to your team. The format is in the widget developer docs.

Does the widget work with Single Page Apps (React, Vue, Next.js)?

Yes. Embed the loader once in your root layout. Route changes don't reset the widget: conversation state persists across SPA navigation.

Can I preview the widget without publishing the snippet?

Yes. The Settings tab of your live chat inbox shows a live preview of the widget next to the appearance settings. Useful for checking customization changes before you save them.

Was this guide helpful?

Ask Fynn about this guide

Get a short answer from this guide and the rest of the help center.