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 with inline citations, 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.
• Captures leads automatically — Collect visitor name, email, and company during conversations. Lead data is sanitized and validated before storage.
• Streams responses in real time — Visitors see answers appear word-by-word via server-sent events, just like modern AI chat applications. No waiting for a full response.

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 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 streaming responses.

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 or backend. 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 streaming chat endpoint with your widget API key:

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

The streaming endpoint returns server-sent events (SSE), delivering the AI response token-by-token. This lets you display a typing effect in your custom UI, just like modern chat applications. For non-streaming responses, use /api/widget/chat instead.

Conversation history is automatically persisted. Pass the same conversationId to continue a conversation, or retrieve past messages via the history endpoint:

curl https://orckai.app/api/widget/chat/history?widgetKey=wk_...&conversationId=conv_...

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:

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 download the source document directly through the chat interface. 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, upload a custom avatar, and configure the 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 specific knowledge bases so that different widgets on different pages answer from different document sets.
• Lead capture — Optionally collect visitor name, email, phone, and company. View conversations and lead data in the admin dashboard.
• Markdown rendering — Responses render with full markdown support — headings, lists, code blocks, and links display properly in the chat window.

Enterprise-Grade Security

Deploying a chatbot on a public website means exposing an AI endpoint to the open internet. Orckai takes this seriously with multiple layers of protection built in from day one — not bolted on as an afterthought.

These protections work together so you can embed the chatbot on your website with confidence. Rate limits block volume abuse, prompt injection defenses catch manipulation attempts, domain restrictions prevent unauthorized embedding, and encryption protects data at every layer. Everything is logged for audit.

Getting Started

Adding AI chat to your website does not require months of development or security reviews. 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, captures leads, and works around the clock — all behind enterprise-grade security.

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 security layers — so you can switch between them without rebuilding anything.

Create Your First Widget