Installing the Chat Widget

The HelpFaster widget is a lightweight JavaScript snippet that adds an AI-powered chat interface to your website. Installation takes less than two minutes.

Getting the Embed Code

Open your chatbot in the HelpFaster dashboard.
Go to the Widget tab.
Copy the embed snippet. It looks like this:

<script
  src="https://widget.helpfaster.ai/widget.js"
  data-bot-id="YOUR_BOT_ID"
  defer
></script>

Paste the snippet into your website's HTML, just before the closing </body> tag. If you use a CMS like WordPress, Webflow, or Shopify, paste it into the custom code / footer injection area.

Data Attributes

You can configure the widget directly through data attributes on the script tag:

| Attribute | Description | Default | |---|---|---| | data-bot-id | Required. Your chatbot ID. | — | | data-mode | floating (bottom-right bubble) or inline (renders inside a container). | floating | | data-color | Primary color hex code, e.g. #2563eb. | Your dashboard setting | | data-position | bottom-right or bottom-left. Only applies in floating mode. | bottom-right | | data-welcome | Welcome message shown when the widget opens. | Your dashboard setting |

Example with Options

<script
  src="https://widget.helpfaster.ai/widget.js"
  data-bot-id="YOUR_BOT_ID"
  data-mode="floating"
  data-color="#059669"
  data-position="bottom-left"
  data-welcome="Hi there! How can I help?"
  defer
></script>

Inline Mode

If you want the chat to appear inside a specific section of your page rather than as a floating bubble, set data-mode="inline" and add a container element:

<div id="helpfaster-widget" style="height:500px;"></div>
<script
  src="https://widget.helpfaster.ai/widget.js"
  data-bot-id="YOUR_BOT_ID"
  data-mode="inline"
  defer
></script>

The widget will render inside the #helpfaster-widget container and fill its dimensions.

Single-Page Applications

For React, Next.js, Vue, or other SPA frameworks, you can load the widget dynamically. Add the script in your root layout or use a useEffect hook to inject it after mount. The widget detects route changes automatically and stays open across navigations.

Verifying Installation

After deploying, open your website and look for the chat bubble in the bottom-right (or left) corner. Click it and send a test message. If the bot responds with content from your knowledge base, installation is complete.

If the widget does not appear, check your browser console for errors and make sure the data-bot-id value matches the ID shown in your dashboard.

PreviousSetting Up Your Knowledge Base NextCustomizing Your Widget