DeskCrew

Add the DeskCrew widget to your website (including WordPress)

To add the DeskCrew support widget to your website, paste one <script> tag just before the closing </body> tag on every page where you want the chat launcher to appear. That single line loads DeskCrew, drops a floating help bubble in the bottom-right corner, and connects it to your workspace. It works on any site that lets you edit HTML. Plain HTML, WordPress, Webflow, Shopify, Squarespace, Ghost, or a custom React/Next.js app. This guide shows you exactly where to get the snippet, where to paste it (with step-by-step WordPress instructions), what each attribute means, and how to confirm it loaded.

Get your embed snippet

Your embed snippet lives on the Install page of your DeskCrew dashboard, under the Embed snippet heading at the top. It is pre-filled with your workspace's own widget key and board slug, so you never have to build it by hand. Click Copy and it is on your clipboard.

The snippet looks like this:

<script src="https://deskcrew.io/desk.js" data-key="pub_xxxxxxxxxxxxxxxxxxxxxxxx" data-board="your-slug"></script>
  • https://deskcrew.io/desk.js is the DeskCrew loader script. It is the same file for every customer; your specific workspace is identified by the attributes, not the URL.
  • data-key is your public widget key (it always starts with pub_). It is safe to expose in page source. It only lets the widget read your public board and open tickets. See "What data-key and data-board mean" below.
  • data-board is your board slug: the short, lowercase name of your feedback board (letters, numbers, and hyphens only).

Copy the snippet exactly as shown on your Install page. Do not retype the key by hand. A single wrong character means the widget can't connect.

Where to paste it (the general rule)

Paste the snippet immediately before the closing </body> tag of your site's HTML, on every page that should show the widget. Putting it at the very end of the body keeps it from blocking your page's own content while it loads. If your site has a shared footer or layout template, paste it there once and it appears site-wide.

If you can only edit a "header" area (many site builders only expose a header/footer injection box), the widget still works there. DeskCrew loads asynchronously and finds its own <script> tag automatically. Before </body> is simply the fastest-loading spot.

You only need the script tag once per page. DeskCrew has a built-in guard (window.__DESKCREW__) that ignores duplicate loads, so if you accidentally include it twice nothing breaks. But keep it to one for cleanliness.

Install on WordPress

On WordPress, the reliable way to add the widget is a free header/footer plugin. You paste the snippet once and it loads on every page. You do not need to edit theme files or know any code. Here are the three common methods, easiest first.

This is the safest method because it survives theme updates.

  1. In your WordPress admin, go to Plugins → Add New.
  2. Search for WPCode (formerly "Insert Headers and Footers") or Insert Headers and Footers by WPBeginner. Install and activate it.
  3. Go to the plugin's settings. For WPCode it's Code Snippets → Header & Footer; for Insert Headers and Footers it's Settings → Insert Headers and Footers.
  4. Paste your DeskCrew snippet into the Footer box (labeled "Scripts in Footer" or "Body"). Using the footer box is the equivalent of "before </body>."
  5. Click Save Changes.
  6. Visit your live site in a new tab. The DeskCrew bubble should appear within a second or two.

Method 2. Full Site Editor / block themes (WordPress 6.x default themes)

If you use a modern block theme (Twenty Twenty-Four, etc.):

  1. Go to Appearance → Editor → Patterns → Footer (or edit your footer template part).
  2. Add a Custom HTML block at the bottom of the footer.
  3. Paste your DeskCrew snippet into that block.
  4. Click Save.

Method 3. Theme footer.php (advanced, only with a child theme)

Only do this if you're comfortable editing PHP and you're using a child theme (editing the parent theme directly means the change is wiped on the next update).

  1. Go to Appearance → Theme File Editor (or edit files over SFTP).
  2. Open footer.php.
  3. Paste the snippet on its own line, immediately before the </body> tag.
  4. Save the file.

For most people, Method 1 is the right choice. It's update-proof and requires no code editing.

Install on other platforms

Most site builders have a dedicated box for exactly this kind of snippet. Paste your DeskCrew script there and save:

  • Webflow: Project Settings → Custom Code → "Footer Code," then publish.
  • Shopify: edit your theme's theme.liquid and paste before </body>, or use an app that injects footer scripts.
  • Squarespace: Settings → Advanced → Code Injection → "Footer."
  • Wix: Settings → Custom Code → Add Custom Code → paste, set it to load on "All pages" and "Body – end."
  • Ghost: Settings → Code injection → "Site Footer."
  • Framer: Site Settings → General → Custom Code → "End of <body> tag."
  • Custom HTML site: paste before </body> in your template.
  • React / Next.js / Vue: add the <script> to your root layout or index.html. In Next.js App Router, use next/script with strategy="afterInteractive".

What data-key and data-board mean

data-key is your public widget key and it is required: without it the widget will not load and you'll see [deskcrew] data-key is required. Widget not loaded. in the browser console: data-board is your board slug and it wires the widget's Help, Updates, and Feedback tabs plus the "view our board" link to the right workspace.

  • data-key (required): Your public widget key, always prefixed pub_. It resolves which DeskCrew workspace the widget belongs to. It is designed to be public. It cannot read private tickets or change settings. So it is safe in your page's HTML. You can regenerate it at any time from the Install page ("Rotate key"), but doing so invalidates the old snippet, so you'll have to re-copy and re-paste.
  • data-board (recommended): Your board slug. A short lowercase identifier (only a–z, 0–9, and - are accepted; anything else is silently ignored). It links the in-widget feedback board and "browse our public board" link to your board at https://deskcrew.io/board/your-slug. If it's missing or contains invalid characters, the core chat still works but the board features are disabled.

Optional attributes you can add

You can customize the widget by adding these optional attributes to the same <script> tag:

  • data-color="#4f46e5". The accent color for the launcher and header. Defaults to indigo #4f46e5. Use your brand hex.
  • data-position="left". Moves the launcher to the bottom-left corner. Defaults to right (bottom-right).
  • data-greeting="How can we help?". The greeting text shown at the top of the panel. Defaults to How can we help?.
  • data-user-token="…". A signed identity token for logged-in users, so their posts and votes are attributed to their account. This is an advanced feature; see the "Identify" article.

Example with customizations:

<script src="https://deskcrew.io/desk.js"
  data-key="pub_xxxxxxxxxxxxxxxxxxxxxxxx"
  data-board="your-slug"
  data-color="#0d9488"
  data-position="right"
  data-greeting="Need a hand?"></script>

How to verify the widget loaded

To confirm the widget is live, open your site in a fresh browser tab (or a private/incognito window to avoid cached pages) and look for the floating help bubble in the bottom-right corner. Click it. A panel should slide up with a Home view and a "Send us a message" option. If it opens and you can start a message, the install worked.

If nothing appears, do these checks in order:

  1. Hard-refresh the page (Ctrl/Cmd + Shift + R) so you're not looking at a cached version without the script.
  2. View the page source (right-click → View Page Source) and confirm the <script src="https://deskcrew.io/desk.js" …> line is actually there. If it's missing, the snippet wasn't saved on the right template.
  3. Open the browser console (F12 → Console tab) and look for messages that start with [deskcrew]. Two common ones:
    • [deskcrew] data-key is required. Widget not loaded. → your data-key attribute is empty or was dropped. Re-copy the snippet.
    • [deskcrew] Could not locate <script> tag. Widget not loaded. → the tag was altered so DeskCrew couldn't find itself. Paste the snippet verbatim.
  4. Check that you're on an allowed origin. The bubble may appear, but if messages won't send and your Help/Updates/Feedback tabs and branding don't load, the page's web address probably isn't in your Allowed origins list. This is the single most common setup problem. See the article "Why your widget isn't appearing: allowed origins" for the fix.

Once the bubble appears and a test message sends successfully, you're done. From here you can add your public feedback board and a "What's new" changelog widget to your site too. See "Embed the feedback board + a What's-new widget in your site."

Related articles
NextCustomize your widget brand and color