NLWeb Dropdown Widget Example

Try it out:

Integration Guide

Quick Start - Just 2 Lines!

The easiest way to add the NLWeb search widget to your website:

                <!-- That's it! Just 2 lines of HTML -->

<div data-nlweb-widget data-nlweb-site="all"></div>

<script src="https://nlw.azurewebsites.net/static/nlweb-widget-loader.js"></script>

The widget will automatically initialize when the page loads. No JavaScript code needed!

Customization

Customize the widget using data attributes:

                <div data-nlweb-widget

     data-nlweb-site="imdb.com"

     data-nlweb-placeholder="Search movies...">

</div>

<script src="https://nlw.azurewebsites.net/static/nlweb-widget-loader.js"></script>

Available Options:

data-nlweb-site - Site to search (e.g., "imdb.com" or "all")
data-nlweb-placeholder - Search input placeholder text
data-nlweb-endpoint - Custom NLWeb server URL (if different from default)

Alternative: JavaScript Control

For more control, you can initialize the widget with JavaScript:

                <div id="search"></div>

<script src="https://nlw.azurewebsites.net/static/nlweb-widget-loader.js"></script>

<script>

  NLWebWidget.init({

    containerId: 'search',

    site: 'imdb.com',

    placeholder: 'Search movies...'

  }).then(widget => {

    // Control the widget programmatically

    widget.setQuery('Star Wars');

  });

</script>

Legacy Integration (ES6 Modules)

If you prefer to host the files yourself, download the following files and update the URLs accordingly:

nlweb-dropdown-chat.css - Widget styles
nlweb-dropdown-chat.js - Widget JavaScript (ES6 module)

Programmatic Control

Once initialized, you can interact with the widget programmatically:

                // Trigger a search programmatically

chat.search('What is machine learning?');

// Pre-fill the search input

chat.setQuery('How do I...');

// Change the search scope

chat.setSite('documentation');

// Clear conversation history

chat.clearHistory();

Configuration Options

containerId

The ID of the HTML element where the widget will be rendered.

site

The site to search. Use 'all' to search all sites, or specify a particular site.

placeholder

The placeholder text shown in the search input.

endpoint

The URL of your NLWeb server instance.

Features

🔍 Smart Search

Natural language search that understands questions and provides conversational responses.

💬 Follow-up Questions

Continue the conversation with follow-up questions to dive deeper into topics.

📚 Conversation History

Access past conversations with the history icon and resume where you left off.

📱 Responsive Design

Works seamlessly on desktop, tablet, and mobile devices.