Friday, Jun 27, 2025

Make Your Own Search Engine With Dokko's New Web Search Feature
We’re excited to announce the launch of Web Search, an advanced new capability now integrated into Dokko! This is an ideal enhancement to the powerful web crawling feature we introduced a couple of months ago, providing users with an even more comprehensive solution for content indexing and retrieval. This feature expands Dokko’s already powerful RAG-based chatbots with intuitive, full-text indexing and search functionality directly on your websites. Web Search already powers search functionality on Mono’s website, demonstrating its effectiveness in real-world use. Integrating this feature into your own site requires only a few lines of code, making it suitable for both static and dynamic websites.
What Exactly is Web Search?
Dokko’s Web Search allows users to quickly search specific keywords and phrases across any website content you’ve crawled into a Dokko repository. Much like popular search engines such as Google or Bing, Dokko will analyze the query, retrieve relevant pages and documents, and display results sorted by relevance, making information retrieval fast and straightforward.
Quick Setup
Setting up Web Search is straightforward:
- Import Content: Crawl website content into your Dokko repository via the Files > File Management tab.
- Generate Widget Script: Once the import is successful, Dokko generates a widget script ready to be embedded on your website.
- Deploy: Integrate the widget on your site and immediately enable powerful full-text searching capabilities.
Important: Always ensure the content import process is fully completed to avoid incomplete or irrelevant search results.
How It Works
Simply type your keywords into the search box and click ‘Search.’ Dokko will handle the rest, returning highly relevant results, each containing:
- A link to the source webpage.
- A highlighted paragraph that best matches your query.
Advanced Query Processing
Dokko simplifies queries using advanced lemmatization:
- Converts all text to lowercase to ensure comprehensive matching.
- Reduces words to their base forms, accommodating variations like plurals and verb tenses.
- Removes common stop words (e.g., “the,” “is”) to streamline searches.
Supported Characters and Best Practices
- All alphanumeric characters (letters and numbers) are fully supported.
- Hyphenated words (e.g., “short-term”) are intelligently parsed for broader search coverage.
- Avoid contractions (e.g., “I’m,” “you’re”) as these may reduce accuracy.
Search Flexibility
Dokko offers three search modes to suit different user needs:
- Any Keyword (default): Matches content containing at least one keyword.
- All Keywords: Matches content containing every keyword, regardless of order.
- Exact Phrase: Matches the exact sequence of keywords.
Relevance Ranking
Search results are meticulously ranked by relevance, influenced by:
- Frequency and number of keyword occurrences.
- Proximity of keywords within text.
How to Integrate Search Widget to your site
Here is a guide on how to embed the Dokko Search interface to your app, customize its style with CSS variables, and subscribe to its results using either React or vanilla JavaScript. You can use Widgets > Search section in the Dokko admin to this interactively, but here are the low-level detail in case you need greater control.
Step 1: Embed the Search Container
Place the following HTML where you want the Dokko Search interface to appear:
<div id="dokko-search-container"></div>
This is the container where the widget will render.
Step 2: Add Required CSS Variables
If you’re using custom styles, make sure to include the necessary CSS variables to ensure visual consistency:
<style>
:root {
--dks-color-input-background: #ffffff;
--dks-color-btn-background: #ffffff;
--dks-color-btn-border: #1d1d1d;
--dks-color-btn-text: #1d1d1d;
--dks-color-active: #1d1d1d;
--dks-color-inactive: #9ca3af;
--dks-color-loader: #5003f4;
}
</style>
Step 3: Add the Search Widget Script
Insert this <script>
block at the end of your HTML or in your template file, after you download dokko-search-widget-script.js:
<script
src="<LINK TO LOCAL SCRIPT>"
id="dokko-search-widget"
data-tenant-id="<DOKKO_TENANT_ID>"
data-repository-id="<DOKKO_REPOSITORY_ID>" <!-- Only supports web_search/crawler repositories -->
data-language="en"
data-mode="onSubmit"
data-page-size="10"
data-strictness-type="any_keyword"
></script>
React Integration
Place the following in the React component that contains the search container:
useEffect(() => {
function handleSearchResults(res) {
// Handle search results (see response type below)
}
window.DokkoSearch.subscribe(handleSearchResults);
return () => {
window.DokkoSearch.unsubscribe(handleSearchResults);
};
}, []);
Utility Methods
// Fetch a specific page of results
window.DokkoSearch.fetchPage(number);
// Change the widget's language dynamically
window.DokkoSearch.setLanguage('<language>'); // 'en' or 'hr'
Vanilla JavaScript Integration
Use the following if you’re not using a frontend framework:
function handleSearchResults(res) {
// Handle search results
}
window.DokkoSearch.subscribe(handleSearchResults);
// Unsubscribe when the listener is no longer needed
window.DokkoSearch.unsubscribe(handleSearchResults);
// Fetch a specific page
window.DokkoSearch.fetchPage(number);
// Change the language dynamically
window.DokkoSearch.setLanguage('<language>'); // 'en' or 'hr'
Response Payload Types
Here’s what to expect in the response from DokkoSearch.subscribe
:
type TSubscriptionPayload = {
data?: PagedCollection<SearchResponse>;
loading?: boolean;
error?: string | null;
};
type PagedCollection = {
has_next_page: boolean;
items: SearchResponse[];
page_count: number;
page_number: number;
page_size: number;
total_records: number;
};
type SearchResponse = {
file_name_or_webpage_title: string;
file_web_source_url: string;
most_relevant_chunk: string;
chunk_relevance_score: number;
};
CSS Variable Reference
Use the table below to customize styles:
Variable | Description |
---|---|
--dks-font-family |
Font family of the input and placeholder text |
--dks-font-size |
Font size of the input and placeholder text |
--dks-font-weight |
Font weight of the input text |
--dks-color-input-background |
Background color of the input container |
--dks-color-btn-background |
Background color of the submit button |
--dks-color-btn-border |
Border color of the submit button |
--dks-color-btn-text |
Text color of the submit button |
--dks-color-active |
Active state color for border, icon, and text |
--dks-color-inactive |
Inactive state color for border, icon, and text |
--dks-icon-size |
Size of the search and clear icons |
--dks-color-loader |
Loader animation color shown inside the input field |
Future Enhancements
Currently, Web Search does not handle spelling mistakes or partial keyword completion, but these enhancements are planned for future updates.
With Dokko’s new Web Search, empower your websites with comprehensive, fast, and accurate searching alongside AI-driven conversational chatbots, significantly enhancing user experience and engagement. Dokko is rapidly evolving into a true Swiss army knife for content management and understanding, providing versatile tools to help you effortlessly manage, search, and engage with your content.
Explore Dokko’s Web Search today and elevate how your users interact with your content!