Widget Integration

Embed the BABEH search widget on any webpage — a floating, self-contained panel that gives your visitors AI-powered search with zero dependencies.

Overview

The KBaaS widget is a self-contained IIFE (Immediately Invoked Function Expression) that renders a fixed-position floating panel at the bottom-center of any webpage. It uses Shadow DOM for full CSS isolation, so it won't conflict with your site's styles.

Installation

There are two ways to install the widget — both use a simple <script> tag.

Method A: Script + JS Init

Add the container, load the script, then initialize with options:

<!-- 1. Container -->
<div id="kbaas-widget"></div>

<!-- 2. Load widget -->
<script src="js/kbaas-widget.js"></script>

<!-- 3. Initialize -->
<script>
 KBaaSWidget.init({
 apiUrl: 'https://your-domain.com/api',
 apiKey: 'your-api-key',
 apiBaseUrl: 'https://your-domain.com'
 });
</script>

Method B: Auto-Init via Data Attributes

No JavaScript required — the widget reads configuration from data attributes on the container element:

<div id="kbaas-widget"
 data-api-url="https://your-domain.com/api"
 data-api-key="your-api-key"
 data-api-base-url="https://your-domain.com">
</div>

<script src="js/kbaas-widget.js"></script>

Configuration Options

All options are optional — defaults are provided:

API Methods

The widget exposes a global KBaaSWidget object with the following methods:

Shadow DOM Isolation

The widget uses attachShadow({ mode: 'open' }) for full CSS isolation. This means:

• Widget CSS never leaks — all styles are injected inside the shadow root as a <style> element
• Host CSS never affects the widget — your site's styles won't break the widget
• DOM queries are scoped — all internal querySelector calls target the shadow root

Theme & Dark Mode

The widget supports three layers of theme control:

CSS Custom Properties

The widget uses CSS custom properties that automatically change with the theme:

Screenshot: Widget in light mode (left) and dark mode (right)

Responsive Behavior

The widget adapts to four viewport widths:

The widget body uses max-height: 80vh with overflow scrolling when expanded (85vh on ≤ 480px).

Screenshot: Widget on mobile viewport (≤ 480px)

Keyboard Shortcuts

Widget UI Structure

The widget renders as a floating panel with these parts:

• Title bar — always visible; click to expand/collapse. Displays "Coba Tanya BABEH!" in Boogaloo font with gradient text.
• LLM Response — markdown-rendered AI answer with a blue left border, scrollable (max 400px), blinking cursor during streaming.
• Source Results — collapsible section with chevron toggle; cited sources as a card grid with filename and color-coded relevance score badges.
• Query textarea — multi-line input with placeholder text.
• "Ask!" button — disables and shows " Searching..." during queries.

Relevance Score Colors

Source cards display color-coded relevance badges:

Streaming Protocol (SSE)

The widget uses Server-Sent Events for real-time responses:

Session & Security

• API Key — every request includes X-API-Key header
• Session ID — a UUID v4 is generated per session and stored in sessionStorage under key kbaas_session_id; sent via X-Session-ID header
• HTML Escaping — filenames and user input are escaped before rendering to prevent XSS
• External Links — all source URL links include rel="noopener noreferrer" and target="_blank"

Framework Integration Examples

The widget works with any framework. Load the script globally, then call init() in the appropriate lifecycle hook.

React

import { useEffect } from 'react';

export default function App() {
 useEffect(() => {
 KBaaSWidget.init({
 apiUrl: 'https://your-domain.com/api',
 apiKey: 'your-api-key',
 apiBaseUrl: 'https://your-domain.com'
 });
 }, []);

 return <div id="kbaas-widget"></div>;
}

Vue

<template>
 <div id="kbaas-widget"></div>
</template>

<script>
export default {
 mounted() {
 KBaaSWidget.init({
 apiUrl: 'https://your-domain.com/api',
 apiKey: 'your-api-key',
 apiBaseUrl: 'https://your-domain.com'
 });
 }
};
</script>

Angular

declare var KBaaSWidget: any;

@Component({
 selector: 'app-root',
 template: '<div id="kbaas-widget"></div>'
})
export class AppComponent implements OnInit {
 ngOnInit() {
 KBaaSWidget.init({
 apiUrl: 'https://your-domain.com/api',
 apiKey: 'your-api-key',
 apiBaseUrl: 'https://your-domain.com'
 });
 }
}

Toast Notifications

The widget displays toast notifications for connection status and errors. Toasts appear at the top-right of the viewport and auto-dismiss after 3 seconds.