How to Add an AI Chatbot to Your Website in 5 Minutes

Getting started with SupportHQ takes less than 5 minutes. By the end of this guide, you'll have a live AI agent answering questions on your website.

Step 1: Create Your Account

Head to supporthq.ai/sign-up and create your account. No credit card is required for the 7-day trial. Once you're in, you'll land on your dashboard.

Step 2: Upload Your Knowledge Base

Your AI agent is only as good as the information it has. Navigate to Documents in the sidebar and upload your first document. This can be:

A PDF of your FAQ or help docs
A text file with common questions and answers
A URL to your existing help center (we'll crawl it automatically)

SupportHQ processes your document, splits it into chunks, and creates vector embeddings so the AI can find relevant answers instantly.

Step 3: Customize Your Widget

Go to Settings and customize your widget's appearance:

Brand color — match your site's primary color
Bot name — give your agent a friendly name
Welcome message — set the first message visitors see
Logo — upload your company logo

Step 4: Configure Allowed Domains

Before your widget will work, you must tell SupportHQ which websites are allowed to use it. Go to Settings → Company and find the Allowed Domains section. Enter your domain(s) — one per line:

Enter * to allow all domains
Or list specific domains like yoursite.com (subdomains like app.yoursite.com are included automatically)

Important: The widget will not load if this field is empty. This is a security measure to prevent unauthorized sites from using your chat widget and consuming your message quota.

Step 5: Embed the Widget

Navigate to Embed widget at the bottom of the sidebar. You'll see a single script tag like this:

<script src="https://supporthq.ai/widget.js" data-key="pk_live_YOUR_KEY" defer></script>

Paste this before the closing </body> tag on every page where you want the chat widget to appear.

HTML / Any Website

Open your site's HTML file and paste the script tag just before </body>. Save and deploy. That's it.

WordPress

If you're using WordPress, you don't need to edit HTML files directly. Instead:

Log in to your WordPress Admin Dashboard
Go to Appearance → Theme File Editor
On the right sidebar, click functions.php
Scroll to the bottom of the file and paste the following code:

add_action('wp_footer', function() {
  echo '<script src="https://supporthq.ai/widget.js" data-key="pk_live_YOUR_KEY" defer></script>';
});

Replace pk_live_YOUR_KEY with your actual API key from the dashboard. Click Update File to save.

This tells WordPress to load the SupportHQ widget in the footer of every page on your site. The widget will appear as a chat bubble in the bottom-right corner.

Next.js / React

Add the script tag to your root layout or use the Next.js Script component:

import Script from 'next/script';

<Script
  src="https://supporthq.ai/widget.js"
  data-key="pk_live_YOUR_KEY"
  strategy="lazyOnload"
/>

Shopify

Go to Online Store → Themes → Edit Code. Open theme.liquid and paste the script tag just before the closing </body> tag. Click Save.

Webflow / Squarespace / Wix

Most website builders have a "Custom Code" or "Embed Code" section in their settings. Paste the script tag there. In Webflow, go to Project Settings → Custom Code → Footer Code. In Squarespace, go to Settings → Advanced → Code Injection → Footer.

Step 6: Test It Out

Open your website and click the chat bubble in the bottom-right corner. Ask a question that your uploaded document should be able to answer. The AI will respond in real-time, citing relevant sections from your knowledge base.

What's Next?

Now that your agent is live, here are some recommended next steps:

Connect your calendar — let the AI book meetings directly from the chat
Set up agent handoff — route complex questions to your human team
Upload more documents — the more context the AI has, the better it performs
Review conversations — check the Conversations tab to see how the AI is doing