Docstar Search SDK
DocStar SDK
A powerful, easy-to-integrate search functionality for modern web applications. Add instant search capabilities to any website with beautiful UI, configurable opening modes, and seamless integration.
🚀 Features
Beautiful Search Modal - Dark blur background with smooth animations
Multiple Opening Modes - Iframe sidebar, new tab, or current tab
Environment-Based Configuration - Support for production, development, and local environments
AI Chatbot Integration - Built-in AI assistant for enhanced search experience
Keyboard Shortcuts - Optional Cmd/Ctrl+K support
Debounced API Calls - Configurable delay to prevent excessive requests
Cross-Platform - Works with HTML, React, Vue, Angular, and any web framework
Responsive Design - Mobile-friendly interface
Easy Integration - Just two script tags to get started
📦 How to Integrate
CDN
<!-- Include the DocStar Search SDK -->
<script src="https://script.docstar.io/scripts/search-sdk/search-sdk.script.min.js"></script>
<!-- Configure the SDK -->
<script>
window.DocStarSearch.configure({
collectionId: "your-collection-id",
environment: "prod", // "prod", "dev", or "local"
openMode: "iframe", // "iframe", "newTab", or "currentTab"
debounceDelay: 300,
enableKeyboardShortcut: true,
minSearchLength: 2
});
</script>⚙️ Configuration Options
Option | Type | Default | Description |
|---|---|---|---|
| string | (your collection ID) required | Collection ID for search |
| string |
| How results open: |
| number |
| Delay in ms before API call (100-2000) |
| boolean |
| Enable Cmd/Ctrl+K shortcut |
| number |
| Minimum characters before search |
🎯 Usage
Basic Usage
// Open search modal programmatically
window.DocStarSearch.open();
// Close search modal
window.DocStarSearch.close();React Integration
import { useEffect } from 'react';
function SearchButton() {
const handleSearch = () => {
if (window.DocStarSearch) {
window.DocStarSearch.open();
}
};
return (
<button onClick={handleSearch}>
Search
</button>
);
}🔧 API Response Format
Your API endpoint should return data in this format:
{
"links": [
{
"name": "Page Title",
"link": "https://example.com/page"
}
]
}🤖 AI Chatbot Integration
The SDK includes built-in AI chatbot functionality that enhances the search experience:
Ask AI Button - Appears after search results for natural language queries
Automatic Initialization - Chatbot loads automatically when SDK is configured
Thread Management - Maintains conversation context across sessions
Environment-Aware - Uses appropriate function types based on environment
AI Features
Click "Ask AI" button in search results to get AI-powered answers
Chatbot opens automatically when AI assistance is requested
Persistent thread ID for conversation continuity
⌨️ Keyboard Shortcuts
Cmd/Ctrl + K - Open search modal (if enabled)
Escape - Close search modal or iframe sidebar
Arrow Up/Down - Navigate through search results
Enter - Select highlighted search result
Escape (in iframe) - Close iframe sidebar