EMBEDDABLE CUSTOMIZABLE

Embed AI on Any Website

Add intelligent chat widgets to your website in minutes

Transform your website with AI-powered chat widgets that provide instant support, capture leads, and answer questions 24/7. No coding experience required - just copy, paste, and customize.

5 min

Setup time

70%

Support deflection

24/7

Availability

100%

On-brand

Video Tutorial

Why Add an AI Widget?

Instant Support

Provide immediate answers to customer questions without waiting for human agents. Reduce response times from hours to seconds.

Knowledge-Powered

Connect your knowledge base for accurate, contextual responses. Your AI widget knows your products, policies, and procedures.

Fully Branded

Match your brand colors, customize the interface, and maintain consistent visual identity across all touchpoints.

Lead Capture

Qualify prospects, collect contact information, and route high-intent visitors to your sales team automatically.

Widget Use Cases

Customer Support

Handle common inquiries, troubleshoot issues, and escalate complex cases to human agents when needed.

70% ticket deflection

Sales Assistant

Guide visitors through product selection, answer pricing questions, and schedule demos with your sales team.

30% more conversions

Internal Help Desk

Support employees with HR policies, IT troubleshooting, and onboarding questions on your intranet.

50% faster resolution

Documentation Search

Help users find relevant documentation, tutorials, and guides through natural language queries.

3x better findability

Create Your Widget

Setup Widget Configuration Create a new widget, select your prompt template, and configure basic settings like title and welcome message.

💡 Pro Tip

Use prompt templates with knowledge base integration for the most accurate responses. Create templates specific to different use cases like support, sales, or documentation.
Customize Appearance Match your brand with custom colors, position settings, and interface styling. Preview changes in real-time.
Generate API Key Create a secure API key for your widget. This key authenticates your widget with the orckAI platform.

⚠️ Security Warning

Keep your API key secure and never share it publicly. If compromised, regenerate it immediately from the widget settings.

Install on Your Website

HTML/JavaScript

<!-- Add before closing </body> tag -->
<script>
(function() {
    var script = document.createElement('script');
    script.src = 'https://widget.orckai.com/widget.js';
    script.async = true;
    script.onload = function() {
        OrckAIWidget.init({
            apiKey: 'wk_your_api_key_here',
            position: 'bottom-right',
            primaryColor: '#1976d2'
        });
    };
    document.head.appendChild(script);
})();
</script>

React

import { useEffect } from 'react';

function App() {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://widget.orckai.com/widget.js';
        script.async = true;
        script.onload = () => {
            window.OrckAIWidget.init({
                apiKey: 'wk_your_api_key_here',
                position: 'bottom-right',
                primaryColor: '#1976d2'
            });
        };
        document.head.appendChild(script);

        return () => {
            document.head.removeChild(script);
        };
    }, []);

    return <div>Your App</div>;
}

Next.js

// pages/_app.js or app/layout.js
import { useEffect } from 'react';
import Script from 'next/script';

export default function MyApp({ Component, pageProps }) {
    return (
        <>
            <Component {...pageProps} />
            <Script
                src="https://widget.orckai.com/widget.js"
                strategy="afterInteractive"
                onLoad={() => {
                    window.OrckAIWidget.init({
                        apiKey: 'wk_your_api_key_here',
                        position: 'bottom-right',
                        primaryColor: '#1976d2'
                    });
                }}
            />
        </>
    );
}

Configuration Options

Parameter	Type	Default	Description
`apiKey`	string	required	Your widget API key starting with "wk_"
`position`	string	"bottom-right"	"bottom-right", "bottom-left", "bottom-center"
`primaryColor`	string	"#1976d2"	Hex color code for widget theme
`title`	string	"AI Assistant"	Widget header title
`welcomeMessage`	string	"How can I help?"	Initial message shown to users
`placeholder`	string	"Type a message..."	Input field placeholder text
`width`	number	400	Widget width in pixels
`height`	number	600	Widget height in pixels

Knowledge Base Integration

1. Search

When users ask questions, the widget searches your knowledge base for relevant documents using semantic search.

2. Retrieve

The most relevant document sections are retrieved and ranked based on similarity to the user's question.

3. Answer

AI generates contextual answers using the retrieved information, ensuring accuracy and relevance.

4. Cite

All responses include proper citations showing which documents were used, maintaining transparency and trust.

ℹ️ Document Downloads

Users can download cited documents directly through the widget interface. Downloads are tracked and can be restricted based on your organization's policies.

Widget Management

Update Widget Configuration

Changes to widget settings take effect immediately across all embedded instances. Update colors, messages, or linked knowledge bases without reinstalling code.

Regenerate API Key

If your API key is compromised, regenerate it from the widget settings. Update your website code with the new key within 24 hours - old keys are automatically revoked.

View Analytics

Track widget performance with detailed analytics:

Total conversations and unique users
Most common questions and topics
Knowledge base hit rates and popular documents
User satisfaction ratings and feedback
Response times and resolution rates

Best Practices

Setup

Use specific prompt templates for different use cases
Keep knowledge base content current and well-organized
Test widget responses before going live
Configure appropriate escalation paths

Security

Never expose API keys in client-side code
Rotate API keys regularly
Monitor usage for suspicious activity
Restrict document access as needed

User Experience

Choose colors that match your brand
Position widgets where users expect them
Write clear, helpful welcome messages
Provide quick response options

Troubleshooting

Widget not loading

Cause: Script blocked by ad blockers or incorrect API key

Solution: Check browser console for errors, verify API key format, ensure script URL is whitelisted

Responses are inaccurate

Cause: Outdated knowledge base or vague prompt template

Solution: Update documents, refine prompt template instructions, add more context to knowledge base

Widget styling conflicts

Cause: CSS conflicts with existing website styles

Solution: Widget uses shadow DOM isolation, but check for z-index conflicts or override issues

Slow response times

Cause: Large knowledge base or complex queries

Solution: Optimize knowledge base structure, reduce document size, consider prompt template refinements

API key errors

Cause: Invalid, expired, or incorrectly formatted API key

Solution: Regenerate API key from dashboard, ensure key starts with "wk_", check for typos

Ready to Create Your Widget?

Build intelligent chat experiences that delight users and drive results.

Setup Prompt Templates Configure Knowledge Base