How to Embed an AI Chatbot on Your Website (3 Methods)

Why Add AI Chat to Your Website

Visitors expect instant answers. If they have to dig through FAQ pages, send an email, or wait for business hours, they leave. An AI chatbot solves this by providing 24/7 support that responds in seconds, not hours.

Here is what a well-configured AI chatbot does for your business:

• Reduces support ticket volume — Answers 60-80% of common questions automatically, freeing your team to handle complex issues that actually need a human.
• Provides instant answers from your knowledge base — Upload your documentation, product guides, and policies. The chatbot answers directly from your content, not generic training data.
• Works around the clock — No shifts, no holidays, no time zones. Your customers get help at 2 AM on a Sunday just as easily as Tuesday at noon.
• Improves user experience — A conversational interface is faster and more natural than navigating menus or searching documentation.

OrcKAI gives you three ways to add AI chat to your website, ranging from a five-minute embed to a fully custom API integration. Choose the method that fits your needs.

Method 1: Widget Embed (Easiest)

The fastest way to add AI chat is the OrcKAI widget embed. It adds a floating chat button to the bottom corner of your site. Visitors click it, a chat window opens, and they start talking to your AI instantly. The entire setup takes about five minutes.

Step 1: Create a Widget in the Dashboard

Log in to orckai.app, go to the Widgets section, and create a new widget. Give it a name, set a welcome message, and choose a prompt template that defines how your AI should respond. You can tell it to stay on-topic, reference your documentation, or adopt a specific tone.

Step 2: Upload Knowledge Base Documents

Navigate to the Knowledge Base and upload your documents — PDFs, Word files, Excel spreadsheets, or plain text. OrcKAI processes each file, splits the content into chunks, generates vector embeddings, and stores them for retrieval. When a visitor asks a question, the widget uses RAG (Retrieval-Augmented Generation) to find the most relevant sections from your documents and include them in the AI response.

Step 3: Paste the Embed Code

Copy the embed snippet from the widget settings and paste it before the closing </body> tag on your website:

<script>
  window.ORCHESTRAI_CONFIG = {
    widgetKey: 'wk_your_widget_key_here',
    position: 'bottom-right',
    apiUrl: 'https://orckai.app/api'
  };
</script>
<script src="https://orckai.app/orchestrai-widget.min.js" defer></script>

That is it. The widget appears on your site immediately. The widgetKey is your unique API key (prefixed with wk_) that authenticates requests. The position option accepts bottom-right or bottom-left. The apiUrl points to your OrcKAI instance — use the hosted URL or your self-hosted domain.

Method 2: iframe Embed

If you want more control over where the chat appears — inside a specific section of your page rather than as a floating button — you can use an iframe embed. This is useful for embedding the chat inside a support page, a help center sidebar, or a dedicated contact section.

<div style="width: 100%; max-width: 480px; height: 600px; margin: 0 auto;">
  <iframe
    src="https://orckai.app/widget/embed?key=wk_your_widget_key_here"
    width="100%"
    height="100%"
    style="border: 1px solid #e2e8f0; border-radius: 12px;"
    allow="clipboard-write"
    title="AI Chat Assistant"
  ></iframe>
</div>

The iframe approach gives you full control over dimensions, positioning, and surrounding layout. You can place it alongside other content, show it conditionally, or style the container to match your design system. The chat functionality inside the iframe is identical to the floating widget — same knowledge base, same prompt template, same AI model.

Method 3: API Integration

For teams that want a fully custom chat interface, OrcKAI exposes a REST API that you can call from any frontend. This gives you complete control over the UI, conversation flow, and how responses are displayed. You build the chat interface; OrcKAI handles the AI, knowledge base retrieval, and response generation.

Send a message to the chat endpoint with your widget API key:

curl -X POST https://orckai.app/api/widget/chat \
  -H "Content-Type: application/json" \
  -H "x-api-key: wk_your_widget_key_here" \
  -d '{
    "message": "How do I reset my password?",
    "conversationId": "optional-conversation-id"
  }'

The API returns the AI response along with any citations from your knowledge base. For streaming responses, connect to the SSE (Server-Sent Events) endpoint and process chunks as they arrive. This lets you display a typing effect in your custom UI, just like modern chat applications.

The API approach is ideal when you need to integrate chat into a mobile app, embed it in a React or Vue component with custom state management, or combine it with other business logic before displaying responses. See the Widget SDK documentation for the full API reference.

Setting Up Your Knowledge Base

Regardless of which embed method you choose, the power of your chatbot depends on the knowledge base behind it. Here is how the pipeline works:

1. Upload documents — Drag and drop PDFs, DOCX, XLSX, TXT, or other supported file formats into the Knowledge Base section of the dashboard.
2. Automatic processing — OrcKAI extracts text from each document, splits it into semantically meaningful chunks, and generates vector embeddings using a high-quality embedding model.
3. Semantic indexing — Embeddings are stored and indexed for fast similarity search across your entire document library.
4. RAG at query time — When a visitor asks a question, OrcKAI embeds the query, searches for the most relevant document chunks, and passes them to the AI model as context. The model answers based on your content, not general knowledge.

The more comprehensive your documents, the better the chatbot performs. Upload product manuals, API documentation, onboarding guides, troubleshooting articles, and pricing information for the best results.

Citations and Trust

One of the biggest challenges with AI chatbots is trust. Visitors want to know that the answer is accurate and where it came from. OrcKAI solves this with automatic citations.

When the AI uses content from your knowledge base to answer a question, it includes inline citations in the format [Source: filename.pdf]. This tells the visitor exactly which document the information came from, allowing them to verify the answer or read the full source document. Citations build credibility and reduce the "hallucination anxiety" that many users feel with AI-generated responses.

Customization Options

Every widget can be tailored to match your brand and guide conversations effectively:

• Branding and colors — Set your primary color, logo, and chat window title to match your website design.
• Welcome message — Define the first message visitors see when they open the chat. Use it to set expectations or suggest common questions.
• Prompt templates — Create templates that instruct the AI on tone, scope, and behavior. For example, restrict it to only answer questions about your product, or instruct it to always suggest contacting support for billing issues.
• Conversation scope — Tie the widget to a specific subset of your knowledge base so that different widgets on different pages answer from different document sets.

Security Considerations

Before deploying a chatbot on a public website, make sure your setup is secure:

• API key scoping — Each widget key (wk_ prefix) is scoped to a specific widget and organization. It cannot access other widgets, users, or admin endpoints. Keys are SHA-256 hashed in the database.
• Rate limiting — The API gateway enforces rate limits per key to prevent abuse. Configure thresholds that match your expected traffic.
• Knowledge base content — Only upload documents that are safe for the AI to surface publicly. Do not include internal credentials, customer PII, or proprietary data in a knowledge base connected to a public-facing widget.
• CORS configuration — If using the API method, configure CORS on your OrcKAI instance to only accept requests from your domain.

Conclusion

Adding AI chat to your website does not require months of development. Start with Method 1 — the widget embed — and have a working chatbot in five minutes. Upload your key documents to the knowledge base, and you immediately have an AI assistant that answers from your content, cites its sources, and works around the clock.

As your needs grow, upgrade to the iframe embed for layout flexibility or the full API for a completely custom experience. All three methods use the same backend, the same knowledge base, and the same AI models — so you can switch between them without rebuilding anything.

Create Your First Widget