Create a Chatbot With SiteAgent in 5 Minutes: Step-by-Step Tutorial

By max@siteagent.eu · June 18, 2025 · Tutorial · ☕️ 7 min read

Want a custom AI chatbot on your website in minutes? With SiteAgent, you can build, train, and launch a production-ready assistant—no coding, no infrastructure, no hassle. This guide shows you every step, with real visuals and copy-paste code.

Goal: A branded chatbot that answers questions using your content, with analytics and full control.

Why SiteAgent?

Accurate answers: Uses Retrieval-Augmented Generation (RAG) (what's RAG?) and your docs, not random web data.
Real actions: Connects to Shopify, HubSpot, Jira, and more.
Open standards: No lock-in—export your data anytime.
Security: Row-level security and domain controls.
Fast, visual setup: No CLI, no Docker, just your browser.

What You Need

SiteAgent account: Sign up free
Your content: PDF, DOCX, CSV, or a website URL
5 minutes: That's all it takes

Step 1: Create Your Chatbot

Go to Dashboard → Chatbots → New. Name your bot, pick a language, set a welcome message, and click Create.

Creating a new chatbot in the SiteAgent dashboard.

What happens? SiteAgent instantly creates a private vector database and configures RAG for your bot. No waiting, no setup.

Step 2: Add Documents

Click the Documents tab. Drag-and-drop your files or paste a website URL. SiteAgent extracts, cleans, chunks, and embeds your content automatically.

Uploading PDFs and knowledge-base docs.

Step 3: Set the System Prompt

The System Prompt controls your bot's tone, style, and guardrails. Use clear instructions and bullet points. Add brand facts to prevent hallucinations.

Tip: Start with a short intro, add rules, and finish with "If unsure, ask follow-up questions."

Want to master prompt design? See our Meta Prompting guide or OpenAI's Prompt Engineering Guide.

Step 4: Embed on Your Site

Copy the embed code from the dashboard and paste it before </body> in your app/layout.tsx file.

Copying the embed snippet from the dashboard.

Pasting the snippet into app/layout.tsx in VS Code.

<script
  src="https://siteagent.eu/chatbot-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  defer
></script>

Features: Responsive, dark-mode ready, and only loads on your approved domains.

Step 5: Measure & Improve

Open Analytics in the dashboard to see:

Response time: See how fast your bot helps users.
Message volume: Track engagement and popular topics.
Feedback: Use thumbs-up/down to refine your prompt and docs.

Update anytime: Upload new docs and click Re-index for instant learning.

FAQ

Is my data secure?

All documents are encrypted at rest and protected by row-level security. SiteAgent strips NUL bytes to prevent Postgres errors—even malformed files are safe.

Can I connect Shopify, HubSpot, or custom APIs?

Yes! Go to Chatbot → Actions, click New, and pick your integration. The bot can trigger real-world actions via API.
For more, see the Shopify API docs and HubSpot API docs.

Ready to launch? Create your free chatbot now • See all features