🚀 NLWeb Widget Loader - Simple Integration

Example 1: Basic Usage

The simplest way to add the search widget to your page:

<!-- Add a container -->
<div id="my-search"></div>

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

<!-- Initialize the widget -->
<script>
  NLWebWidget.init({
    containerId: 'my-search',
    site: 'all'
  });
</script>

Example 2: Auto-initialization with Data Attributes

Even simpler - just use data attributes and the widget auto-initializes:

<!-- Just add data attributes to your container -->
<div data-nlweb-widget
     data-nlweb-site="imdb.com"
     data-nlweb-placeholder="Search movies...">
</div>

<!-- Load the script - that's it! -->
<script src="https://nlw.azurewebsites.net/static/nlweb-widget-loader.js"></script>

Example 3: Programmatic Control

Get a reference to the widget for programmatic control:

<script>
  // Initialize and get widget reference
  NLWebWidget.init({
    containerId: 'search-box',
    site: 'docs.example.com'
  }).then(widget => {
    // You can now control the widget
    widget.setQuery('How do I...');
    widget.setSite('api.example.com');
  });
</script>

Example 4: Absolute Minimum HTML

The absolute minimum HTML needed (3 lines!):

<div id="search"></div>
<script src="https://nlw.azurewebsites.net/static/nlweb-widget-loader.js"></script>
<script>NLWebWidget.create({containerId: 'search'});</script>

📋 Configuration Options

Option	Default	Description
containerId	'nlweb-search-container'	ID of the container element
site	'all'	Site to search (or 'all' for all sites)
placeholder	'Ask a question...'	Placeholder text for the search input
baseUrl	'https://nlw.azurewebsites.net'	NLWeb server URL