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:

1. Import Content: Crawl website content into your Dokko repository via the Files > File Management tab.
2. Generate Widget Script: Once the import is successful, Dokko generates a widget script ready to be embedded on your website.
3. 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:

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!