Customising your chatbot
The HelpGuides chatbot is an embeddable widget that answers visitor questions using your knowledge base. You can fully customise how it looks and introduces itself, then drop it onto any website in minutes.
All chatbot settings live at HelpGuides editor → Chatbot. Only company admins and super admins can edit these settings — team members can view them but not change them.
A live preview of the widget — both the chat window header and the floating button — updates as you make changes, so you can see exactly what visitors will see before saving.
Chatbot name
The name displayed in the chat header when a visitor opens the widget. Keep it friendly and on-brand — common choices are your product name + "Support" (e.g. "Acme Support"), or a persona name like "Aria".
Support email
An email address shown inside the chat widget as a fallback contact option. If a visitor can't find what they're looking for, they can reach out here. Leave it blank to hide the contact option entirely.
Welcome message & subtext
These two fields control what visitors read the moment the chat window opens.
| Field | Purpose | Example |
|---|---|---|
| Welcome message | Main greeting — the first thing a visitor reads | "How can we help you today?" |
| Welcome subtext | A supporting line below the greeting | "Ask me anything about our product — I'll search our knowledge base for you." |
Keep the welcome message short and warm. Use the subtext to set expectations about what the bot can answer.
Chatbot icon
The icon appears in the chat header and on the floating button that sits in the corner of the page. You have two options:
Preset icons
Choose from six built-in icons:
- Chat bubble (default)
- Question mark
- Headset
- Robot
- Sparkle
- Lightning bolt
Custom icon upload
Upload your own image for a fully branded look. Guidelines:
- Format: PNG or SVG
- Max file size: 100 KB
- Recommended size: 64 × 64 px
- A square image with a transparent background works best
Accent color
The accent color is applied to the floating button, call-to-action buttons inside the widget, and highlight elements. It defaults to Indigo (#4f46e5).
Pick from the preset grid or enter any hex value directly:
| Preset | Hex |
|---|---|
| Indigo | #4f46e5 |
| Violet | #7c3aed |
| Pink | #db2777 |
| Red | #dc2626 |
| Orange | #ea580c |
| Yellow | #ca8a04 |
| Green | #16a34a |
| Cyan | #0891b2 |
| Blue | #2563eb |
| Slate | #4b5563 |
For best results, match this to your portal's accent color so the widget feels like a natural extension of your brand.
Embedding the chatbot on your website
Once you've saved your settings, you can add the chatbot widget to any website using one of the two methods below. The widget loads asynchronously and won't affect your page's load time.
Option 1: Direct HTML (recommended)
Paste the following snippet into the <head> section of your website — in your index.html, layout template, or theme's header settings:
<script src="https://helpguides.app/embed/chatbot.js" data-company-id="YOUR_COMPANY_ID"></script>
Your unique snippet with the correct data-company-id pre-filled is shown on the Chatbot settings page — use the Copy button to grab it.
The widget appears as a floating button in the bottom-right corner of every page the script is loaded on.
Option 2: Google Tag Manager
If you manage your site scripts through Google Tag Manager (GTM), use this approach instead — GTM's dynamic script injection doesn't support document.currentScript, so a small config object is needed alongside the script.
- In GTM, go to Tags → New → Custom HTML tag.
- Paste the following (with your values from the Chatbot settings page):
<script>
window.HelpGuidesChatbot = {
companyId: "YOUR_COMPANY_ID",
baseUrl: "https://helpguides.app"
};
</script>
<script src="https://helpguides.app/embed/chatbot.js"></script>
- Set the trigger to All Pages (or whichever pages you want the widget on).
- Click Save, then Submit to publish the container.
The config object (
window.HelpGuidesChatbot) must appear before the script tag in the same HTML block. The chatbot script reads it on load to identify your company.
Your full GTM snippet with the correct values is also shown on the Chatbot settings page — use the Copy button.
How the widget pulls your settings
The embed script fetches your chatbot configuration (name, icon, color, welcome message) from HelpGuides at load time. This means:
- Changes take effect immediately — update and save in the editor, and the live widget reflects them on the next page load, with no need to update the embed code.
- The embed code never needs to change unless your company ID changes (which it won't).
Troubleshooting
Widget doesn't appear on the page — check that the script tag is in the <head> (not below </body>), and that the data-company-id (or window.HelpGuidesChatbot.companyId) matches exactly what's shown on the Chatbot settings page.
Widget shows with default branding, not my customisations — make sure you clicked Save after making changes in the editor. The widget fetches settings fresh on each page load.
Custom icon doesn't display — confirm the file is PNG or SVG, under 100 KB, and was saved successfully (look for the green checkmark after saving).
GTM widget not appearing — ensure the window.HelpGuidesChatbot config block and the <script src="..."> tag are both inside a single Custom HTML tag, and that the trigger is set to fire on the correct pages. After saving, use GTM's Preview mode to verify the tag fires.
Last updated: May 23, 2026