Back to blog

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

2026-03-20 · 5 min read
tutorial ai chatbot embed website

Step-by-step guide to embedding an AI chatbot that answers questions from your documents. One line of code, no backend required.

You have documents. FAQs, product guides, policies, help articles. Your visitors have questions. Instead of making them search, scroll, and email you, what if they could just ask?

This guide shows you how to add an AI assistant to any website that answers from your actual documents, with source citations and confidence scoring. No AI expertise needed. One line of code to embed.

What you'll get

  • A floating chat bubble on your website
  • AI answers grounded in your documents (not generic ChatGPT responses)
  • Source citations showing which document the answer came from
  • Confidence badges (Verified, Grounded, Mixed, AI Generated) so visitors know how well-supported the answer is
  • Your branding: colors, logo, welcome message
  • Works on any website: static HTML, WordPress, Shopify, Wix, React, anything

Step 1: Create a free account

Go to ask360.app and click Sign Up Free. You get:

  • 1 project
  • 2 documents
  • 100 queries per month
  • Forever free, no credit card

Step 2: Create a project

After signing in, click Create Project. Give it a name and description.

The project name appears in the chat header. The description helps visitors understand what the AI assistant knows about. Pick a URL suffix that makes sense for your brand (e.g., acme-support).

Step 3: Upload your documents

Click Documents and upload your files. Supported formats:

  • PDF (scanned documents are not supported, text-based PDFs only)
  • DOCX (Word documents)
  • XLSX (Excel spreadsheets, each sheet becomes a section)
  • Plain text / HTML
  • URL import (paste a web page URL and we'll extract the content)

The AI reads your documents, splits them into passages, and creates a searchable knowledge base. This takes a few seconds for small documents, up to a minute for large ones.

For the free tier, you can upload 2 documents up to 5 MB total. That's enough for a FAQ page and a product guide, or an employee handbook and a policy document.

Step 4: Configure your assistant

Go to Settings to customize:

  • System prompt: Tell the AI how to behave. Example: "You are a helpful support assistant for ACME Corp. Answer questions based on our documentation. If you don't know the answer, say so."
  • Welcome message: The greeting visitors see when they open the chat
  • Suggested questions: Quick-reply pills that help visitors get started
  • Colors: Match your brand (primary and secondary colors)
  • Logo: Upload your company logo for the chat header

You can also use Generate with AI to create a system prompt, description, and suggested questions automatically based on your uploaded documents.

Step 5: Publish and embed

Click the Publish tab. You'll see three deployment options:

Option A: Chat bubble (recommended)

One line of code. Add this before the closing </body> tag on your website:

<script src="https://ask360.app/widget.js" data-project="your-project-slug"></script>

A floating bubble appears in the corner. Visitors click it to open the chat. That's it.

Customization options:

<script src="https://ask360.app/widget.js"
        data-project="your-project-slug"
        data-position="left"
        data-color="#3b82f6"></script>
  • data-position: left or right (default: right)
  • data-color: hex color for the bubble (default: your project's primary color)

Option B: Inline iframe

Embed the chat directly in a page section:

<iframe src="https://ask360.app/chat/your-project-slug?embed=1"
        width="100%" height="600" frameborder="0"
        allow="clipboard-write"></iframe>

Good for help center pages or dedicated support sections.

Option C: Direct link

Share the chat as a standalone URL:

https://ask360.app/chat/your-project-slug

Works for email signatures, QR codes, social media bios, or anywhere you want a direct link.

Platform-specific instructions

Shopify

  1. Go to Online Store > Themes > Edit Code
  2. Open theme.liquid
  3. Paste the script tag before </body>
  4. Save

WordPress

  1. Go to Appearance > Theme File Editor
  2. Open footer.php
  3. Paste the script tag before </body>
  4. Save

Or use a plugin like "Insert Headers and Footers" to add the code without editing theme files.

Wix

  1. Go to Settings > Custom Code
  2. Click Add Code
  3. Paste the script tag
  4. Set placement to Body - End
  5. Apply to All Pages

Squarespace

  1. Go to Settings > Developer Tools > Code Injection
  2. Paste the script tag in the Footer field
  3. Save

Static HTML

Paste the script tag before </body> in your HTML file. Done.

React / Vue / Angular

Add the script tag to your index.html before </body>, or load it dynamically:

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://ask360.app/widget.js';
  script.setAttribute('data-project', 'your-project-slug');
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

What happens behind the scenes

When a visitor asks a question:

  1. The question is checked against safety guardrails (rate limiting, content filtering, prompt injection detection)
  2. The question is converted to a vector embedding
  3. Two parallel searches run: semantic (meaning-based) and keyword (exact match)
  4. Results are fused using Reciprocal Rank Fusion
  5. A cross-encoder neural model re-scores the top candidates
  6. Neighboring passages are grabbed for full context
  7. Everything is sent to the LLM with your system prompt
  8. The response streams back in real time with source citations and a confidence badge
  9. PII redaction runs on the stream before it reaches the visitor

All of this happens in under a second for the first token. The visitor just sees a fast, accurate answer with sources.

Try it before you embed

The Publish tab includes demo pages where you can preview exactly how the bubble and iframe will look on a real website. Share these URLs with your webmaster or team for approval before going live.

FAQ

How much does it cost? The free tier is free forever. Paid plans add more projects, documents, and queries. See pricing.

Do I need to know about AI to use this? No. Upload documents, customize the look, paste one line of code. The AI pipeline (embeddings, retrieval, reranking, confidence scoring) is handled for you.

Will it slow down my website? No. The widget is under 10 KB, has no dependencies, and loads lazily. It only creates the chat iframe when the visitor clicks the bubble.

Can visitors ask follow-up questions? Yes. The chat maintains conversation context, so follow-ups like "What about part-time employees?" work naturally.

What if the AI doesn't know the answer? It tells the visitor. The confidence badge shows "AI Generated" when document support is weak, and the system prompt instructs the AI to be honest about gaps.

Can I update my documents later? Yes. Upload new versions or add new documents anytime. The knowledge base re-indexes automatically and the semantic cache clears so answers reflect the latest content.

Get started

Sign up free and have your AI assistant live in 5 minutes. No credit card, no time limit.

More articles Try Ask360 free