Embedding the HelpGuides chatbot on your site

The HelpGuides chatbot is a small JavaScript widget that drops into any website and answers visitor questions using your knowledge base. It appears as a floating button in the bottom-right corner, streams AI responses in real time, and can hand visitors off to your support team when it can't answer.

This guide walks you through embedding it on your site in under 5 minutes.

What you'll need

Your Company ID — find it in the HelpGuides editor under Chatbot Settings. The embed code on that page already has your ID filled in.
Access to your website's HTML, or to a tag manager like Google Tag Manager.

Before you embed, here's what's happening under the hood so you know what to expect:

The script injects a single <div> into the page and renders the widget inside a Shadow DOM, so its styles never conflict with your site's CSS.
On load, it calls /api/embed/settings to pull your configured name, color, icon, welcome message, and contact-form preference.
When a visitor sends a message, it streams a response from /api/chat, which is grounded in your knowledge base articles.
If the bot can't find an answer (or the visitor hits a rate limit), it offers a "Send email to support team" button — provided you've enabled the contact form in Chatbot Settings.
Failed queries are logged so you can see what your visitors are asking that isn't covered yet.

The widget is around 20 KB, has no external dependencies, and loads asynchronously — it will not slow down your page.

Option 1: Direct HTML embed (recommended)

This is the simplest method. Paste the snippet below just before the closing </body> tag of every page where you want the chatbot to appear.

<script
  src="https://helpguides.app/embed/chatbot.js"
  data-company-id="YOUR_COMPANY_ID"
  async
></script>

Replace YOUR_COMPANY_ID with the ID shown on your Chatbot Settings page. That's it — refresh your site and the chat button will appear in the bottom-right corner.

Where to find the exact snippet

Open the HelpGuides editor and go to Chatbot → Embed instructions. The snippet there has your Company ID pre-filled, so you can copy it directly.

Option 2: Google Tag Manager

GTM injects scripts dynamically, which means document.currentScript is null when the widget loads. To work around this, you must set a global config object before the script runs.

In GTM, create a new Custom HTML tag with this content:

<script>
  window.HelpGuidesChatbot = {
    companyId: "YOUR_COMPANY_ID",
    baseUrl: "https://helpguides.app"
  };
</script>
<script
  src="https://helpguides.app/embed/chatbot.js"
  async
></script>

Set the trigger to All Pages (or whichever pages you want the chatbot on), then publish your container.

Important: the window.HelpGuidesChatbot block must appear before the <script src="…"> tag. If you reverse them, the widget will log an error to the console and won't render.

Verifying the install

Open your site in a browser.
Look for the round chat button in the bottom-right corner.
Click it — you should see your configured welcome message and assistant name.
Ask a test question to confirm responses are streaming correctly.

If the button doesn't appear, open the browser console (right-click → Inspect → Console) and look for any messages starting with HelpGuides Chatbot:. The two most common errors are:

"data-company-id attribute is required" — your snippet is missing the Company ID, or (on GTM) the config block is missing or runs after the script.
"could not determine base URL" — only happens on GTM when baseUrl is missing from the config object. Add it as shown above.

Customizing the chatbot

All visual and behavioral settings live in the HelpGuides editor under Chatbot Settings — you don't need to redeploy the embed code to change them:

Name & welcome message — what visitors see in the header and on first open
Accent color — used for the launcher button, links, and primary buttons
Icon — pick a built-in icon or upload a custom image
Contact form — toggle whether to offer email handoff when the bot can't answer
Support email — where contact-form submissions are delivered

Changes propagate to all embedded widgets on the next page load — there is no cache to bust.

Delete the <script> tag from your site (or pause the GTM tag). The widget will stop loading immediately on the next page view.

That's everything you need. If you run into trouble, reach out from the Contact option in your HelpGuides dashboard.