Adding the Widget to Your Site

The HelpdeskHero widget is a small floating panel that lets your visitors search articles and ask AI questions without leaving your website or app. Adding it takes just a few minutes.

Find Your Embed Code

Open your HelpdeskHero dashboard and click Widget in the sidebar. Make sure the Show widget on your website toggle is turned on. Once enabled, an embed code section will appear with a script tag that looks like this:

<script src="https://helpdeskhero.app/widget.js" data-helpdesk-id="YOUR_ID"></script>

Click the Copy button to copy the full snippet to your clipboard.

Add It to a Standard HTML Website

Open the HTML file for your website (usually index.html) and paste the embed code just before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your page content -->

  <script src="https://helpdeskhero.app/widget.js" data-helpdesk-id="YOUR_ID"></script>
</body>
</html>

The widget loads asynchronously, so it will not slow down your page. It will appear as a floating button in the corner of the screen.

Add It to a React or Next.js App

For React apps, the simplest approach is to add the script tag to your public index.html file (in the public folder), just before the closing </body> tag. This works for Create React App, Vite, and similar setups.

If you prefer to load it as a component, create a HelpdeskWidget component that loads the script dynamically:

import { useEffect } from 'react';

function HelpdeskWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://helpdeskhero.app/widget.js';
    script.setAttribute('data-helpdesk-id', 'YOUR_ID');
    script.async = true;
    document.body.appendChild(script);
return () =&gt; {
  document.body.removeChild(script);
};

  }, []);
  return null;
}
export default HelpdeskWidget;

Then include <HelpdeskWidget /> in your root layout or App component. For Next.js, you can place this in your layout.tsx or use the next/script component:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://helpdeskhero.app/widget.js"
          data-helpdesk-id="YOUR_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Add It to a Vue App

In Vue, add the script to your index.html file in the public folder, just before </body>. Alternatively, load it in your App.vue using the onMounted lifecycle hook:

<script setup>
import { onMounted, onUnmounted } from 'vue';

let scriptEl;
onMounted(() => {
  scriptEl = document.createElement('script');
  scriptEl.src = 'https://helpdeskhero.app/widget.js';
  scriptEl.setAttribute('data-helpdesk-id', 'YOUR_ID');
  scriptEl.async = true;
  document.body.appendChild(scriptEl);
});
onUnmounted(() => {
  if (scriptEl) document.body.removeChild(scriptEl);
});
</script>

Add It to WordPress

If you are using WordPress, go to Appearance > Theme File Editor and open the footer.php file. Paste the embed code just before the </body> tag. Alternatively, use a plugin like "Insert Headers and Footers" to add the script without editing theme files directly.

Add It to Webflow, Squarespace, or Wix

Most website builders have a section for custom code. Look for a "Custom Code" or "Footer Code" setting in your site's global settings. Paste the embed code there. In Webflow, this is under Project Settings > Custom Code > Footer Code. In Squarespace, go to Settings > Advanced > Code Injection > Footer. In Wix, go to Settings > Custom Code and add it to the body end position.

Verify It Works

After adding the code, open your website in a browser. You should see the widget launcher button in the bottom corner of the page. Click it to open the widget and try searching for an article or asking a question. If the button does not appear, check your browser console for any errors and make sure the data-helpdesk-id value matches what is shown in your dashboard.