AI Support Widget Integration

Integrate an AI-powered support assistant into documentation sites that answers user questions using RAG and intelligently directs logged-in users to the in-app Maximus support agent.

Overview

Architecture

User → Doc Site → AI Widget → ACP Router → RAG (Vectorize) → Response
                     ↓
              Auth Check → If logged in → Redirect to Maximus

Business Value

Benefit	Impact
Self-Service Support	Instant answers from documentation
Reduced Support Tickets	AI handles common questions
Login Conversion	Prompt drives account creation
Cost Efficient	Under $0.01 per query average

Deployment Sites

The AI Support Widget is deployed across all 4 documentation sites:

Site	Domain	Audience
olympus-docs	docs.internal.nebus.ai	NebusAI Employees
restaurant-docs	help.restaurantrevolution.ai	Restaurant Staff/Customers
olympus-cloud-docs	help.olympuscloud.ai	Olympus Cloud Users
creators-docs	help.creatorsrevolution.ai	Content Creators

Quick Start

Docusaurus Installation

The AI support widget is a local shared plugin included in the monorepo — no npm package install is required.

Add to Docusaurus config:

// docusaurus.config.ts
plugins: [
  [
    '../shared/docusaurus-plugin-ai-support',
    {
      apiEndpoint: '/api/chat',
      site: 'restaurant-docs',           // Site identifier for RAG index
      loginUrl: 'https://olympuscloud.ai/login',
      maxGuestInteractions: 5,           // Prompt login after N messages
      primaryColor: '#6366F1',
    },
  ],
],

Manual Integration

For non-Docusaurus sites:

```html
<!-- Add before closing body tag -->
<script src="https://cdn.olympuscloud.ai/widgets/ai-support.js"></script>
<script>
  OlympusAISupport.init({
    apiKey: 'your_api_key',
    siteId: 'your-site-id',
    position: 'bottom-right',
    theme: 'auto'
  });
</script>

---

## Widget Configuration

### Basic Options

```javascript
OlympusAISupport.init({
  // Required
  apiKey: 'your_api_key',
  siteId: 'restaurant-docs',

  // Optional
  position: 'bottom-right',     // 'bottom-right' | 'bottom-left'
  theme: 'auto',                // 'auto' | 'light' | 'dark'
  locale: 'en',                 // Language code
  welcomeMessage: 'Hi! How can I help you today?',
  placeholder: 'Ask a question...',

  // Behavior
  autoOpen: false,              // Auto-open on page load
  autoOpenDelay: 5000,          // Delay before auto-open (ms)
  showOnMobile: true,           // Show on mobile devices
  enableVoice: false,           // Enable voice input
});

Advanced Options

OlympusAISupport.init({
  // ...basic options...

  // RAG Configuration
  rag: {
    indexId: 'docs-restaurant',  // Vectorize index
    topK: 5,                     // Number of chunks to retrieve
    scoreThreshold: 0.7,         // Minimum relevance score
  },

  // Model Routing
  model: {
    tier: 'auto',                // 'auto' | 'T1' | 'T2'
    fallback: 'T2',              // Fallback tier if auto fails
  },

  // Auth Integration
  auth: {
    detectLogin: true,           // Check for logged-in users
    redirectToMaximus: true,     // Redirect logged-in to Maximus
    promptAfter: 3,              // Prompt login after N messages
  },

  // Analytics
  analytics: {
    trackQueries: true,          // Log queries for analysis
    trackSatisfaction: true,     // Show satisfaction rating
  },
});

RAG Index Configuration

How RAG Works

Document Indexing: All documentation is chunked and embedded
Query Processing: User question is embedded
Semantic Search: Find most relevant chunks in Vectorize
Context Assembly: Combine chunks with query
Response Generation: LLM generates answer with citations

Index Structure

// RAG index per documentation site
const indexes = {
  'docs-olympus': {
    source: 'olympus-docs',
    chunkSize: 500,
    overlap: 50,
    embedding: 'text-embedding-3-small'
  },
  'docs-restaurant': {
    source: 'restaurant-docs',
    chunkSize: 500,
    overlap: 50,
    embedding: 'text-embedding-3-small'
  },
  // ...
};

Indexing Pipeline

# Index documentation (run during CI/CD)
npm run index-docs -- --site=restaurant-docs

# Verify index
curl https://api.olympuscloud.ai/v1/rag/indexes/docs-restaurant/stats

Model Routing

ACP Tier Selection

The widget uses ACP Router for cost-optimized model selection:

Tier	Model	Cost	Use Case
T1	Llama 4 Scout (Workers AI)	FREE	Simple lookups, FAQs
T2	Gemini 2.0 Flash	$0.10/M	Complex queries

Auto-Routing Logic

Query Analysis
├── Simple greeting/FAQ → T1 (Free)
├── Documentation lookup → T1 (Free)
├── Complex reasoning → T2 (Paid)
└── Multi-step question → T2 (Paid)

Cost Optimization

Scenario	Tier	Cost per Query
"How do I reset my password?"	T1	$0.00
"What's the API rate limit?"	T1	$0.00
"How do I integrate with Stripe?"	T2	~$0.001
"Compare payment options"	T2	~$0.002

Average cost: Under $0.01 per query

Authentication Flow

The widget detects logged-in users via:

Cookie: Check for olympus_session cookie
Header: Check for Authorization header
API: Call /api/v1/auth/session/validate

Flow for Logged-In Users

┌─────────────────────────────────────────┐
│ Logged-in user opens widget             │
├─────────────────────────────────────────┤
│ "I see you're logged in! Would you      │
│ like to continue here or chat with      │
│ Maximus in the app for a richer         │
│ experience?"                            │
│                                         │
│ [Continue Here] [Open Maximus App]      │
└─────────────────────────────────────────┘

After 3-5 interactions with anonymous users:

┌─────────────────────────────────────────┐
│ Want a better experience?               │
├─────────────────────────────────────────┤
│ Log in to:                              │
│ • Get personalized answers              │
│ • Access your restaurant data           │
│ • Chat with Maximus AI assistant        │
│                                         │
│ [Log In] [Continue as Guest]            │
└─────────────────────────────────────────┘

Styling

/* Custom CSS variables */
:root {
  --ai-support-primary: #2563EB;
  --ai-support-bg: #FFFFFF;
  --ai-support-text: #1F2937;
  --ai-support-border-radius: 12px;
  --ai-support-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Custom widget styles */
.ai-support-widget {
  /* Override default styles */
}

.ai-support-button {
  /* Customize trigger button */
}

.ai-support-chat {
  /* Customize chat window */
}

Custom Welcome Message

OlympusAISupport.init({
  welcomeMessage: {
    title: 'Need help?',
    subtitle: 'Ask me anything about Restaurant Revolution',
    suggestions: [
      'How do I take an order?',
      'Setting up the KDS',
      'Managing tables',
      'Processing payments'
    ]
  }
});

Branding

OlympusAISupport.init({
  branding: {
    logo: 'https://your-site.com/logo.png',
    name: 'Restaurant Help',
    primaryColor: '#FF6B35',
    accentColor: '#2EC4B6'
  }
});

Events & Callbacks

Available Events

OlympusAISupport.on('open', () => {
  console.log('Widget opened');
});

OlympusAISupport.on('close', () => {
  console.log('Widget closed');
});

OlympusAISupport.on('message', (data) => {
  console.log('Message sent:', data.query);
  console.log('Response:', data.response);
});

OlympusAISupport.on('satisfaction', (data) => {
  console.log('Rating:', data.rating);
});

OlympusAISupport.on('redirect', (data) => {
  console.log('Redirecting to:', data.destination);
});

Programmatic Control

// Open widget
OlympusAISupport.open();

// Close widget
OlympusAISupport.close();

// Send message programmatically
OlympusAISupport.sendMessage('How do I set up tables?');

// Clear chat history
OlympusAISupport.clearHistory();

// Set user context
OlympusAISupport.setUser({
  id: 'user_123',
  name: 'John',
  plan: 'professional'
});

Analytics & Monitoring

Query Analytics

Track query patterns to improve documentation:

{
  "total_queries": 15420,
  "unique_users": 3240,
  "avg_queries_per_session": 2.3,
  "satisfaction_rate": 0.87,
  "top_queries": [
    {"query": "how to take order", "count": 234},
    {"query": "reset password", "count": 198},
    {"query": "kds setup", "count": 156}
  ],
  "unanswered_queries": [
    {"query": "integrate with custom pos", "count": 12}
  ]
}

Satisfaction Tracking

After each response, users can rate:

👍 Helpful
👎 Not helpful
💬 Feedback (optional text)

Dashboard Access

View analytics at: https://admin.olympuscloud.ai/support/widget-analytics

Troubleshooting

Common Issues

Issue	Solution
Widget not loading	Check API key and site ID
Slow responses	Check network, verify RAG index
Wrong answers	Review RAG index, adjust chunk size
Login not detected	Verify cookie/session configuration
Mobile issues	Ensure `showOnMobile: true`

Debug Mode

OlympusAISupport.init({
  debug: true,  // Enable console logging
});

Testing

// Test RAG retrieval
OlympusAISupport.testRag('how to process payment')
  .then(results => console.log(results));

// Test model routing
OlympusAISupport.testRouting('simple question')
  .then(tier => console.log('Selected tier:', tier));

Security

Data Handling

Data	Retention	Storage
Chat history	Session only	Client-side
Query logs	30 days	Encrypted (GCP)
User context	Session only	Memory

Privacy

note

The AI Support Widget does not persist chat history server-side for anonymous users. All conversation data is stored client-side in the browser session and is cleared when the session ends. Logged-in user interactions respect GDPR and CCPA data handling requirements.

No PII stored in RAG index
Chat history not persisted server-side
Anonymous users tracked by session ID only
Logged-in user data respects GDPR/CCPA

Content Security Policy

Add to your CSP:

script-src 'self' https://cdn.olympuscloud.ai;
connect-src 'self' https://api.olympuscloud.ai;

API Reference

REST Endpoints

POST /api/v1/support/widget/query
Content-Type: application/json

{
  "query": "How do I set up tables?",
  "siteId": "restaurant-docs",
  "sessionId": "session_123",
  "context": {
    "currentPage": "/docs/tables",
    "previousQueries": []
  }
}

Response Format

{
  "response": "To set up tables, go to Settings > Floor Plan...",
  "sources": [
    {
      "title": "Table Management Guide",
      "url": "/docs/manager/tables/",
      "relevance": 0.94
    }
  ],
  "tier": "T1",
  "tokens": {
    "input": 245,
    "output": 156
  },
  "latency_ms": 342
}

Maximus AI - In-app AI assistant
ACP Router - Model routing
RAG Knowledge Base - RAG configuration
Premium Support - Support tiers

Overview​

Architecture​

Business Value​

Deployment Sites​

Quick Start​

Docusaurus Installation​

Manual Integration​

Advanced Options​

RAG Index Configuration​

How RAG Works​

Index Structure​

Indexing Pipeline​

Model Routing​

ACP Tier Selection​

Auto-Routing Logic​

Cost Optimization​

Authentication Flow​

Login Detection​

Flow for Logged-In Users​

Login Prompt Flow​

Widget Customization​

Styling​

Custom Welcome Message​

Branding​

Events & Callbacks​

Available Events​

Programmatic Control​

Analytics & Monitoring​

Query Analytics​

Satisfaction Tracking​

Dashboard Access​

Troubleshooting​

Common Issues​

Debug Mode​

Testing​

Security​

Data Handling​

Privacy​

Content Security Policy​

API Reference​

REST Endpoints​

Response Format​

Related Documentation​